트리메뉴 드래그앤 드랍

사용 안내

yakuyaku-yakutree-7ca53c5.zip

Html 작성

네이게이션 메뉴를 작성

?

1 2 3 4 5 6 7 8

<UL id=nav>     <LI><A href="#">메뉴 1</A>         <UL>             <LI><A href="#">메뉴 1-2</A></LI>             <LI><A href="#">메뉴 1-3</A></LI>         </UL>     </LI> </UL>

script 작성

옵션 설명

• unique : 하나만 열리도록 ( true / false )
• animate : 애니메이션 여부 ( true / false )
• dragndrop : 마우스 드래그 ( true / false )
• aTagClick : a 태그 제목 클릭 펼침여부 ( true / false )
• btnCallback : 버튼 클릭 후 콜백 함수 실행 function( type, $source, $target)

실행

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

$("#nav").yakutree({     unique: false,     animate: true,     duration: 100 ,     aTagClick : true ,     btnAllExpand : '.expend',     btnAllColspand : '.colspend',     btnFirst : '.btnFirst',     btnLast : '.btnLast',     btnUp : '.btnUp',     btnDown : '.btnDown',     btnAdd : '.btnAdd',     btnDel : '.btnDel',     dragndrop : true,     btnCallback : function ( type, $source, $target) {         switch( type ) {             case 'moveUp':                 //this.moveAnimation(  $source, $target, 'revert' );                 break;         }     } });

사이트 : http://yakuyaku.github.io/yakutree/ 

[출처] 트리 메뉴 플러그인|작성자 클리티에