mulder's it blog

Web 개발자가 자주 접하는것중 하나가 DropDown 메뉴 입니다. 사이트를 서핑하다가 좋은 메뉴가 있어서 보면 대부분 플래쉬거나, 복잡도가 상당한 메뉴인경우가 대다수 입니다.... 혹시 boxy 라고 아시는분이 있을지 모르지만 그거 만든 개발자가 아주 쉽게 개발한 메뉴 스크립트가 있습니다. 스크립트가 아주 짧고 간단하면서도 효율성이 좋아서 소개 합니다.. 이름하여 droppy 원사이트에서 설명한 부분을 보자면 Nested drop dwon menus 라는 부제가 있습니다. 즉 하위 아이템이 있으면 자동으로 연결되는 구조라는 얘기인것 같네요, 이제 각설하고 droppy 에 대해 알아 보죠. 아래가 Demo Screen 입니다. ::: droppy 소스 및 관련 css ::: HTML내에서 메뉴를 만들기..

멀더가 만든 또하나의 jQuery Plugin... - name : jsMarkingInput - desc : 기본값이 있는 html inputbox 웹개발에서 아주 많이 사용하는 기능중 하나가 HTML INPUT BOX 에 기본값을 넣어 두고, keyin 이나 click 이벤트에 clear 시켜 주는 작업입니다.. 이런 작업을 아주 손쉽게 할 수 있는 초간단 Plugin 을 개발해 보았습니다. (많은 테스트가 없어서, 버그가 있을 염려가 있습니다.) DEMO output 1. 기본값이 미리 입력되 있다. 2. click 시 기본값이 clear 된다. // Script (function($) { $.fn.jsMarkingInput = function(o) { o = $.extend({ grayColor:..

jQuery Plugin을 만들기 위한 기본 template -------------------------------------------------------------------- (function($) { $.fn.myJQueryExtFunction = function(o) { o = $.extend({ param1:'1' ,param2:'2' }, o || {}); return this.each(function(index) { }); }; })(jQuery);

데모 소스 파일 좀전에 포스팅한 jsImageSlider 를 jQuery Plugin Version으로 수정 하였습니다.. 여러개를 동시에 처리 할 수 있도록 내부 구조도 좀 수정 되었습니다... (멀더, 갑자기 불밭은것 같은데.. 이유가 ~~~~ 뭔가 ???) 아래와 같이 설정 합니다. $('div.ximg_slider').jsImageSlider({ viewSize:5 }); 아래와 같이 설정 합니다. 'to-left', 'to-right' 는 현재 text 로 처리 되어 있습니다... 알맞게 수정 하시면 좋겠죠. 아래의 데모 화면은 위아래 () 두 블록을 slide 할 수 있도록 하고 있습니다. navigation button은 따로 해당 slider만 작동 되도록 조정 되었습니다. 데모 화면.....

보호되어 있는 글입니다.

오늘은 jQuery기반 CSS Tab 을 소개 해 드립니다.. 물론 제가 개발한 건 아니고.... 급하게 쓸만한것 소싱하가다가 물건이다 십에서 소개 해 드립니다. (현업에서 jQueryUI tab 의 사용이 어려울때가 많습니다. 특히 디자이너가 반대 하는경우가 많죠... 이럴경우 손쉽게 css 를 수정할 수 있는 tab 이 필요한데, 그럴때 안성마춤 입니다.) 출 처 : http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 좋은 리소스 : http://www.sohtanaka.com/web-design/category/jquery-tutorials/ HTML Gallery Submit TAB CSS ul.tabs { margin: 0; paddin..

web 작업을 하다 보면, 이미지 스크롤링을 해야 되는경우가 종종 있습니다... (영어로는 Carousel 이라고 하는것 같습니다) 지금까지 그때,그때 처리 하다보니, 기억나는게 별로 없군요. 그래서... 까먹을것을 대비해서 오늘 처리한 내용을 대충 정리해 둡니다. 개발자 사이트 : http://www.gmarwaha.com/jquery/jcarousellite/?#what 개발자 사이트에 가보시면 여러 옵션, 설치 등등 자세히 설명이 잘 되어 있군요... 참 감사한 일이요.. twit 도 2개 날려주는센스를 발위 했습니다. ㅋ 저의 경우 아래와 같이 include 하여 사용 준비 OK [ jCarousel jQuery Plugin Install ] [ HTML Part ] [ Script Part ] ..

web program 중에 자주 맞닫트리는 작업중하나가 select box 의 데이터를 조작하는 작업이다... 제가 좀 꼼지락거려봤습니다.... 작동은 잘 되는것 같구요... 추가 기능도 많이 필요하지만,,, 필수 기능만 만들어 보았습니다. 그럼 즐플 ~ jquery를 이용하여 손쉽게 select box item 을 제어 해 보자 ~ Add/ Delete/ Clear/ Up/ Down

오늘도 jQuery 이용자를 위한 좋은 TIP 올립니다. jQuery 작업을 하다 보면, jQuery를 동적으로 로딩하고 싶은데, 이미 로딩 되어 있으면 그럴 필요가 없다. 이럴경우 아래와 같이 동적으로 jQuery를 로딩하면 아주 편하게 사용가능 하다... 구글링하다가 조금 힌트를 얻었는데, 모든 브라우져에서 효과적을 처리하는 방법으로 수정 반영 했습니다...

아래의 bind, live, delegate 관련 설명 부분은 잘 못 되었습니다.... 잘못된 부분을 남겨서 나중에 신중히 포스트를 쓸 수 있도록 거울로 삼겠습니다. 제가 자세히 테스트 한결과 bind ( direct click event) : event handler를 해석할 당시의 dom element 에만 적용됩니다. live, delegate : 아래 코멘트 주신분의 말씀과 같이 현재시점( document ready후에 새로이 추가된 dom element가 있다면 그것도 포함) 에 selector 가 재 해석되어 처리 됩니다. evnet propagation 처리의 미표한 차이 정리: event 처리시 e.stopPropagation(); 으로 event의 전파를 차단 하는 경우 bind, del..