mulder's it blog

jsBox : jQuery기반 simple box manager. 소스 파일 html coding을 하다보면 ...box layout을 많이 사용한다... 특히 간단한 입력처리나 내용보여주기등은 디자이너에게 의존하지 않고 바로 처리 할 수 있는 box style dialog 매니저를 만들어 보았습니다. jQuery-UI 의 좋은 컴퍼넌트들을 사용하기보다 아주 간단히 처리해야할 박스형 윈도우가 필요한경우 사용하기가 편리 합니다. 최소 종속조건 으로는 jQuery 를 포함해야 하고, draggable 을 사용하시려면 jQuery-UI 도 같이 필요 합니다. (첨부한 소스 참조) ex: simple 3 row window dlg = jsBox.makeDlg('first', {title:'box test', b..

http://docs.jquery.com/UI/Dialog jQueryUI의 Widget 중 가장 복잡하고 자주 사용하는 Dialog 의 기능을 한눈에 볼 수 있도록 만들어 보았습니다.

더이상 javascript calendar 선택에 고민하지 말자.. jQueryUI Datepicker Plugin 멀더도 이것, 저것 심지어 만들어서 사용도 해왔지만, 이제 다 버렸다. ... jQueryUI 에서 가장 사랑받는 ui 는 아마도 Dialog > Tab > Tree ,,, 그 다음이 Calendar 일것 같다. (개인적인 소견임) 아래는 제가 프로젝트에 적용한 UI Capture 화면 입니다. Simple한 화면 구성에서 부터 복잡한 화면 구성까지 거의 대부분의 기능이 포함되어 있다.. 어차피 jQuery를 사용한다면, Calendar 는 jQueryUI 의 Calendar Plugin 을 사용하자. :D 사용법 : 아래는 사용법의 일례입니다. 생각보다 많은 옵션을 제공 하고 있습니다. ..

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