Blog Content

소스는 설치된 jquery-ui-1.7.2.custom - >development-bundle -> themes에서 ui.theme.css와 ui.core.css와 ui.tabs.css와 이미지를 가져옴 06.Tabs.htm 탭 컨트롤 $(document).ready(function() { $('#tabs').tabs(); //탭 }); 탭 제목1 탭 제목2 탭 제목3 첫번재 영역의 내용 두번재 영역의 내용 세번재 영역의 내용 결과화면

05.Accordion.htm 아코디언 컨트롤 $(document).ready(function() { $('#accordion').accordion({event:"mouseover"}); }); 제목1 내용1 제목2 내용2 제목3 내용3 결과화면

선택한 개체를 표시하는 예제입니다. 04.Selectable.htm 개체 선택 .ui-selected { background-color:Yellow;color:Black; } $(document).ready(function() { $('ul').selectable(); // 선택 }); XHTML CSS JavaScript 결과화면

sortable 주요 속성 및 이벤트 axis - x축과 y축 중 하나로만 이동 opacity - 불투명도 cancel - Sort대상에서 제외하고자 할 때 id설정, 해당 컨트롤은 드래그 X handle:"span" - 해당영역 태그 부분을 핸들로 설정, 부분 끌기 가능 helper:function(e, ui) - 소팅되는 동안 해당 요소의 정보를 알 수 있는 이벤트 start, sort, change - 소팅을 위해서 드래그 하는 순간 발생하는 이벤트 update - 소팅 후 드롭 할 때(update) 발생하는 이벤트 stop - 완료 되었을때 발생 03.Sortable.htm 개체 정렬 $(document).ready(function() { $('ul').sortable({ axis: "y", op..

속성 및 이벤트 accept - 드롭시킬 대상 요소 activeClass - 마우스로 끌 동안 대상의 요소 hoverClass - 끌어 놓을 부분에 대한 마우스 오버시 tolerance(string) : "intersect", "fit", "touch" - 드롭시 위치 결정 active:function(e, ui){} - 드래그 하는 순간 호출 deactivate:function(e, ui){} - 드래그 하여 놓는 순간 호출 over - 드롭 가능한 상태 out - 드롭 불가능한 상태 drop - 드롭해서 놓는 상태 02.Droppable.htm 요소를 끌어서 놓기 $(document).ready(function() { $('img').draggable({ opacity:"0.3" }); // 끄는 동..

jQuery UI의 최신 버전을 받습니다. [ http://jqueryui.com ] jQuery의 홈페이지로 가서 최신 버전을 다운받습니다. 스샷 참고 클릭! 다운받은 jquery-ui-1.7.2.custom.zip 을 압출을 풀고 해당 프로젝트에 복사합니다. 요소를 드래그(끌기)하는 예제입니다. 01.Draggable.htm 요소를 드래그하기(끌기) $(document).ready(function() { //[1] 끌기 가능 //$('img').draggable({}); //[2] x좌표로만 이동 //$('img').draggable({axis:"x"}); //[3] 자기 자리로 이동 $('img').draggable({ revert:true }); }); 결과화면