modal window를 만들어 봅시다.

• 보짱
• 2010-03-09
• 조회 수 46

일반적으로 플러그인으로 나와 있는 라이트박스를 많이 사용합니다. 플러그인을 가져다 붙이기에는 좀 거시기할 때, 간단하게 사용할 수 있는 심플한 modal window 코드를 소개합니다. - HTML <p><a class='activate_modal' name='...

this를 사용한 초간단 롤오버 이미지

• 보짱
• 2010-03-08
• 조회 수 48

this를 사용해서 정말 간단하게 롤오버 이미지를 만들수가 있네요. - jQuery $(function() { $("#menu img").hover(function() { $(this).attr("src", $(this).attr("src").split(".").join("-hover.")); }, function() { $(this).attr("src", ...

디자이너를 위한 jQuery

• 보짱
• 2010-03-08
• 조회 수 57

디자이너를 위한 jQuery 튜토리얼 입니다. 슬라이드 패널, Accordion, Collapsible 패널 등은 유용하게 사용할 수 있겠군요. 아무래도 여러군데 사용되는 것들이니까요 ^-^ 튜토리얼 보기 : http://www.webdesignerwall.com/tutoria...

.toggle() 이벤트 정리

• 보짱
• 2010-03-04
• 조회 수 105

.toggle() .toggle() 은 어떤 경우에 사용하면 좋을까? 여러 경우가 있겠지만, 레이어의 디스플레이 제어에 가장 많이 사용하지 않을까 생각됩니다. 1. 디스플레이 제어 - jQuery $("a.toggleLink").click(function () { $(".layerBox"...

라이트 박스(lightbox) - ColorBox

• 보짱
• 2010-02-23
• 조회 수 376

여러 jQuery 라이트 박스 중 다양한 효과와 디자인 스타일을 제공하고 있는 ColorBox 입니다. 꾸준히 업데이트 되고 있기 때문에 버그도 거의 없습니다. 다운로드 및 데모, 설명 : http://colorpowered.com/colorbox/

input text에 포커스 이동시 value 삭제 함수

• 보짱
• 2010-02-22
• 조회 수 314

CLEAR INPUT ON FOCUS FUNCTION input 필드에 포커스 이동시 value값을 지웠다가 나타냈다가 하는 함수 입니다. 로그인 폼이나 검색 폼 등등 여러곳에서 사용할 수 있겠지요. $(document).ready(function() { //attach ...

select box (combo box)에 디자인(css) 입히기

• 보짱
• 2010-02-18
• 조회 수 514

개인적으로 셀렉트박스나 체크박스, 라디오 버튼 등 폼관련 엘리먼트들은 기본을 유지하는게 좋다고 생각합니다만, 때때로 클라이언트나 디자이너의 강압에 못이겨 어쩔 수 없이 디자인이나 css를 입혀야 할 경우가 발생합니다. 일단...

정말 심플한 이미지 뷰어 [5]

• 보짱
• 2010-02-11
• 조회 수 655

Simple Image Viewer정말 심플한 이미지 뷰어 입니다. 디자인이야 자유롭게 변경해서 사용하면 될 것 같구요. 슬라이드업 효과때문에 그런지 갤러리보다는 제품이미지 등에 어울릴 것 같군요. Step 1: Create the Mark-up <div ...

배경 이미지 애니메이션 효과 - 메뉴등에 쓰면 좋을 듯

• 보짱
• 2010-02-08
• 조회 수 672

배경 이미지 애니메이션 효과 입니다. 메뉴 등에 사용하면 괜찮을 것 같네요. 이미지에 따라서 다양한 효과를 낼 수 있겠네요. 문제는 창의력 -_-;;; 튜토리얼 : http://snook.ca/archives/javascript/jquery-bg-image-animations/ 미리보기...

이미지 및 div 등등 페이드 인/아웃 (fade in/fade out)

• 보짱
• 2010-02-03
• 조회 수 798

Jquery Fade In.Fade Out이미지나 div 등을 페이드 인/아웃 효과를 줄 수 있습니다. 갤러리 리스트에 적용하면 좀 답답할 것 같고, 최신글 같은 곳에 사용하면 좋을 것 같군요. 과도한 사용은 사이트를 전체적으로 너무 어둡...

슬라이딩 하는 박스와 캡션

• 보짱
• 2010-02-03
• 조회 수 767

Sliding Boxes and Captions with jQuery아주 간단하면서 멋진 슬라이딩 애니메이션 효과를 낼 수 있네요. ^-^ jQuery 코드도 간단하기 때문에 다양한 곳에 응용이 가능할 것 같습니다. 데모보기 : https://buildinternet.s3...

pngFix.js (IE5.5~6에서 PNG이미지를 투명처리)

• 보짱
• 2010-02-02
• 조회 수 680

IE5.5~6에서는 PNG이미지의 투명처리를 못하죠. 크로스브라우징 목록에 IE6이 포함되어 있으며, 디자인상 png이미지의 사용이 가장 효율적일 때. 사이트 개발시 jQuery를 사용하고 있다면 pngFix.js로 간단히 해결할 수 있습니다....

탭 슬라이드 메뉴

• 보짱
• 2010-01-29
• 조회 수 1021

jQuery 탭 슬라이드 메뉴 입니다. 탭 클릭시 컨텐츠가 슬라이드 되어 나옵니다. 여러모로 유용하게 사용할 수 있을 것 같군요 ^-^ 출처 : http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tutorial 데...

Floating 레이어 (스크롤에 따라다니는.. 주로 퀵메뉴에 사용)

• 보짱
• 2010-01-29
• 조회 수 996

주료 퀵메뉴에 많이 사용하죠. Floating 레이어 입니다. 일단 jQuery 코드는 아래와 같습니다. $(document).ready(function(){ var currentPosition = parseInt($(".floating").css("top")); $(window).scroll(function() { var positi...

Sexy Drop Down Menu w/ jQuery & CSS

• 보짱
• 2010-01-19
• 조회 수 926

Sexy Drop Down Menu음... 메뉴 이름이 참 좋네요. 섹시 -_-; 드랍메뉴가 존재할 경우 화살표 아이콘을 클릭해야 메뉴가 나오는 형식입니다. 전 이 형식이 불편해서 그냥 메뉴에 마우스 오버하면 바로 드랍되게 바꿔서 사용하...

Sliding Jquery Menu

• 보짱
• 2010-01-19
• 조회 수 891

Sliding Jquery Menu간결한 효과가 마음에 듭니다. 말 그대로 슬라이딩이네요 ^-^ 바로가기 메뉴나 메인메뉴에 사용할 수 있을 것 같네요. 다운로드 : http://www.hv-designs.co.uk/tutorials/sliding_menu/sample.zip 미리보기 : http...

베이직한 세로 Drodown Menu

• 보짱
• 2010-01-19
• 조회 수 709

베이직한 세로 Drodown Menu 입니다. 코드도 간단해서 사용하기 편합니다. jQuery와 일반 javascript 두가지 모두 들어 있네요. jQuery를 사용하지 않으실 경우엔 javascript로 사용하시면~ ^-^ 미리보기 : http://designreviver.c...

컨텐츠+이미지 슬라이드쇼 2가지

• 보짱
• 2010-01-13
• 조회 수 772

컨텐츠+이미지 슬라이드쇼 2가지를 소개합니다.1. jQuery Slideshow Explained 바로가기 : http://www.devirtuoso.com/2009/08/jquery-slideshow-explained/ 데모보기 : http://www.devirtuoso.com/Examples/Slide-Show/ 2. Making a Slide...

FACEBOOK 스타일 하단 패널

• 보짱
• 2010-01-13
• 조회 수 720

Facebook Style Footer Admin Panel 커뮤니티 사이트에서 유용하게 사용될 수 있을 것 같군요. 회원 로그인 뒤 무언가 활동을 해야하는 사이트는 하단패널의 사용으로 사용성을 높일 수 있겠네요. 우리나라의 예로 들면 세이...

마우스 오버시 썸네일 이미지 줌효과와 제목 보여주기 [2]

• 보짱
• 2010-01-12
• 조회 수 776

jQuery Thumbnail with Zooming Image and Fading Caption Tutorial 마우스 오버시 썸네일 이미지 줌효과와 제목을 페이딩 합니다. 깔끔하게 갤러리 리스트나 최신글 썸네일 리스트에 사용하면 좋을 것 같군요. 다운로드 : h...