'jQuery' 태그의 글 목록

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

Side Tab

JavaScript 2010. 10. 9. 18:10 |

종종 나오는 케이스라서 기록해 놓는다. C&P방법론 적용하여 구현하자.

모양은 아래와 같다.

우측 탭 마우스 오버시 왼쪽 이미지가 변한다.

한 방에 긁어 성공하려면 이미지 이름이 다음과 같이 되어야 한다.

왼쪽 큰 이미지 >> 이미지 이름 끝에 1~n까지의 순번 부여

(gunghap_box2, gunghap_box3, gunghap_box4 ...)

오른 쪽 탭 이미지 >> over이미지일 경우이미지 명이 ov.gif, 아닐경우 or.gif로 끝나게

구현 소스는 다음과 같다.

----------------------------------------------------------------------------------

$("img.imgOv")

.addClass("pointer")

.bind('mouseover', function(){

$("img.imgOv").map(function(){

$(this).attr('src',$(this).attr('src').replace('ov.gif','or.gif'));

});

$(this).attr('src',$(this).attr('src').replace('or.gif','ov.gif'));

var idx = $("img.imgOv").index(this); $("#changeImage").attr('src', '/images/fortune/gunghap_box'+(idx+1)+'.gif'); $("#changeImage").show();

});

저작자표시

'JavaScript' 카테고리의 다른 글

jquery live (0)	2011.05.20
세션유지 (0)	2010.12.20
팝업 띄우기 주소보안 방법. (0)	2010.10.07
유용한 놈들 (0)	2010.09.26
jQuery Plug-in (0)	2010.09.12

Posted by 기계식키보드

:

jQuery Plug-in

JavaScript 2010. 9. 12. 15:01 |

from

http://affo.springnote.com/pages/5597897

Layout
- jQuery Masonry
  - 그리드 레이아웃을 만들어 주는 jQuery 플러그인
  - Info, Demo..: http://desandro.com/resources/jquery-masonry
Data

Visualization
- TreeMap | jQuery.info
  - Info, Howto: http://www.jquery.info/spip.php?article40
  - Demo: http://www.fbtools.com/jquery/treemap
- jSquares for jQuery
  - TED.com 메인 화면 같은 박스 채우기 형태
  - Info: http://boedesign.com/blog/2009/10/22/jsquares-for-jquery
  - Demo: http://boedesign.com/demos/jsquares
Menu, Navigation
- Cloud Carousel
  - 3D 회전 형태 로 썸네일 이미지(반사되는 이미지도 표현)가 롤링됨.
  - Home: http://www.professorcloud.com/mainsite/carousel.htm
- MasicLine Navigation
- Lava Lamp
  - 메뉴 배경(효과)이 선택된 메뉴로 이동하는(따라 다니는) 형태
  - jQuery LavaLamp Menu
    - plugins: http://plugins.jquery.com/project/lavalamp2
    - home: http://nixboxdesigns.com/projects/jquery-lavalamp
  - Home & Tutorial(old): http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers
- CSS Dock Menu
  - Home & Tutorial: http://www.ndesign-studio.com/blog/design/css-dock-menu
  - Demo: http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html
- jCarousel Light
  - 가로 슬라이드 형태, 정해진 갯수의 썸네일을 슬라이드 형태로 보여줌.
  - Home: http://www.gmarwaha.com/jquery/jcarousellite
  - Demo: http://www.gmarwaha.com/jquery/jcarousellite/#demo
- jQuery Scrollable
  - 정해진 영역 내에 html 형식의 내용을 슬라이드 형태로 보여줌. 탭, 배너 등에 활용가능.
  - Home & Demo: http://flowplayer.org/tools/scrollable.html
Clock
- jDigiClock
  - 위 젯모양. 시간과 날씨를 같이 보여줌.
  - Home & Demo: http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock
Tab
- jQuery idTabs
  - Home & Demo: http://www.sunsean.com/idTabs
LightBox
- Zip.li
  - 사 진전용 모달 창. 깔끔한 인터페이스, 모션. 쉬운 설정
  - Home: http://leandrovieira.com/projects/jquery/lightbox
- Slimbox 2
  - Zip.li 와 비슷한 형태 좀더 가볍고 커스마이징 옵션이 많음.
  - Home: http://www.digitalia.be/software/slimbox2
- prettyPhoto
  - 사 진뿐만 아니라 비디오, 플래시, iframe등도 적용가능
  - Home: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone
Effects
- GSGD's jQuery Easing Plugin
  - 기본모션에 변형을 가해주는 Easing Library. Robert Penners's Easing Equations 의 jQuery 버전.
  - Home: http://gsgd.co.uk/sandbox/jquery/easing
- Ariel Flesler's jQuery.ScrollTo
  - 부드러운 스크롤 애니메이션을 가능하게 해 주는 플러그인. (스크롤 가능한 요소, 윈도우 자체의 스크롤도 가능)
  - Home: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
  - Demo: http://demos.flesler.com/jquery/scrollTo/
  - jQuery Plugins: http://plugins.jquery.com/project/ScrollTo
Tooltip
- http://docs.jquery.com/Plugins/Tooltip
  - Example: tooltip.zip
- http://plugins.jquery.com/project/bt
  - ExplorerCanvas : http://excanvas.sourceforge.net
  - Canvas Tutorial - Mozilla Dev : https://developer.mozilla.org/en/Canvas_tutorial
- http://craigsworks.com/projects/simpletip
Resources

저작자표시

'JavaScript' 카테고리의 다른 글

팝업 띄우기 주소보안 방법. (0)	2010.10.07
유용한 놈들 (0)	2010.09.26
jQuery UI Tab Header 없애기 (1)	2010.08.31
jQuery 1.4변경사항 (0)	2010.08.30
유용한 놈들(jQuery) (0)	2010.08.27

Posted by 기계식키보드

:

jQuery 1.4변경사항

JavaScript 2010. 8. 30. 15:55 |

http://firejune.com/1527

저작자표시

'JavaScript' 카테고리의 다른 글

jQuery Plug-in (0)	2010.09.12
jQuery UI Tab Header 없애기 (1)	2010.08.31
유용한 놈들(jQuery) (0)	2010.08.27
구현한 놈들 (0)	2010.08.06
정규식 (0)	2010.07.26

Posted by 기계식키보드

:

유용한 놈들(jQuery)

JavaScript 2010. 8. 27. 11:05 |

[ 숫자만 입력 받기 ]

$("#phone").bind('keyup', function(e){

$(this).val( $(this).val().replace(/[^0-9]/g, ""));

});

// 퍼센테이지 애니메이션

$("img.percentage").map(function(){

$(this).animate({"height":percentage[$("img.percentage").index(this)]},2000);

});

저작자표시

'JavaScript' 카테고리의 다른 글

jQuery UI Tab Header 없애기 (1)	2010.08.31
jQuery 1.4변경사항 (0)	2010.08.30
구현한 놈들 (0)	2010.08.06
정규식 (0)	2010.07.26
Ajax 뒤로가기 구현 (3)	2010.07.26

Posted by 기계식키보드

:

Notice

Category

Tags

Recent Posts

Recent Comments

Archives

Links

'jQuery'에 해당되는 글 4건

Side Tab

'JavaScript' 카테고리의 다른 글

jQuery Plug-in

'JavaScript' 카테고리의 다른 글

jQuery 1.4변경사항

'JavaScript' 카테고리의 다른 글

유용한 놈들(jQuery)

'JavaScript' 카테고리의 다른 글

티스토리툴바