カスタムツリーv2 jQueryプラグイン

先日、古いオープンソースプロジェクトの1つを再ソーイングすることに戻りました。

思考の過程で、現在の形式のツリーを持つ以前のコンポーネントはもはや私に合わないと判断しました。



明確でシンプルなAPIを備えた、もっとイベントドリブンなものが欲しかった。



今、私はすでに公開の準備ができていると決めました。



取って、使ってください 。

またはGH-pagesのフレームワークの例を見てください。



catの下で、短いAPIドキュメントの短い翻訳。



UPD ：コメントで、 ドラッグアンドドロップコード。





jQueryプラグインとして実行されます。



構成の例、つまり ツリーを「作成」するときに送信されるもの：

$('#tree_content').customTree({ root : 'top', init : { callback : function (controller, tree) { info('Init callback.'); } }, // for leaf callbacks handlers : { added : function (leaf, controller, tree) { }, loaded : function (leaf, controller, tree) { }, parsed : function (leaf, controller, tree) { }, open : function (leaf, controller, tree) { }, close : function (leaf, controller, tree) { }, hover : function (leaf, controller, tree) { }, unhover : function (leaf, controller, tree) { }, focus : function (leaf, controller, tree) { }, beforeblur : function (callback, leaf, controller, tree) { }, blur : function (leaf, controller, tree) { }, deleted : function (leaf, controller, tree) { }, dblclick : function (leaf, controller, tree) { } }, listeners : { // click, dblclick, contextmenu up the element Label contextmenu : function (leaf, controller, tree, event) { }, dblclick : function (leaf, controller, tree, event) { } }, storeLoaded : false, focusParentOnClose : true, // focusByDblClick: true, // blurFromContainerClick : false, // blurFromContainerDblClick : false, labelsBreak : { by : 50, expandOnHover : false, expandOnSelect : true }, loader : function (path, callback) { // ... your code for nodes loading } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、Parsing \ Renderingに送られるノードのパラメーターについて厳密な合意を使用しているため、単一ノード（リーフ）の例を示します。

 { // –       , 'unique_naming_string' : { // – ,   , text : 'string', // – ,   ,    leaf , folder : [true || false], // – ,   ,   ""  open : [true || false] //       ,     } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明{

• root-ノードのルートパスの名前
  
  
• init-起動オプション
  
  

 // ,      root init : { //     null delay : null, //     root     //    ,  preloader    preloader : 'preloader', // function (controller, tree)     callback : null, // jQuery ,     "" root method : 'fadeIn', //  true (default),      delay auto : true, //  ,   focus   focus : null }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ハンドラー（リーフ、コントローラー、ツリー） -定義済みのイベントハンドラー。



全員が現在のノード、コントローラー、およびツリーオブジェクトを受け入れます。



ただし、 beforeblurは最初のパラメーターとしてコールバックも受け入れます。



たとえば、現在のノードをぼかすことができるかどうかを確認する必要がある場合。

はいの場合、このコールバックを呼び出す必要があります。

それ以外の場合は、それを呼び出さないでください。そうしないと、ブラーが発生しません。



別のノードにフォーカスを合わせる必要があるためにぼかしを行う必要がある場合、このコールバックを呼び出さないと、現在のぼかしも目的のノードのフォーカスも作成されません。



当然、これらのbeforeblurのコールバック操作は、設定にhandler.beforeblurを渡す場合にのみ可能です。



ローダー（パス、コールバック） -コントローラーがリーフをロードするためにアクセスするもの。



['tree.root'、 'leaf.name']をパスとして使用します。



JSオブジェクトを返す必要があります！



リスナーはjQuery .on標準ではありません（ノードのテキスト要素のコールバック。

つまり、たとえば、コンテキストメニューまたはカスタムクリックが必要な場合は、リスナーを使用する必要があります。



テーマ -レンダリング時のクラスのCSS PREFIX_



cls-レンダリング時のCSSクラスのセット：

 cls : { //  root root : 'tree_root', //  ,     control : 'tree_control', //  ,   ,  "" status : 'tree_leaf_status', //    text : 'tree_leaf_text', //  "" folder : 'folder', //    focus() selected : 'selected', //     hover : 'hover', //     loader : 'loader', //    open : 'open', //    container : 'container', //       supressLabelTextSelection : 'unselectable', supressTreeTextSelection : 'unselectable' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

html-レンダリング用のHTMLタグ：

 html : { // root container tree : '<UL>', // leaf container leaf : '<LI>', // ,   children  children : '<UL>', //      +\- status heading : '<DIV>', //   +\- control : '<SPAN>', // ,   status : '<SPAN>', // ,   text : '<SPAN>', //   container : '<DIV>' }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

control- + \-に使用される行：

 control : { close : '+', open : '–' },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

storeLoaded：true || false- 「折りたたみ」ノードを保存するか、毎回再起動します



focusParentOnClose：true || false-子孫にフォーカスがある場合、親を選択します



focusByDblClick：true || false-ダブルクリック



blurFromContainerClick：true || false-ルートがクリックされたときにぼかし



blurFromContainerDblClick：true || false-ルートをダブルクリックしたときにぼかし



labelsBreak： -ノードのテキストキャプションは長くなる可能性があり、必要に応じて「トリミング」のオプション：

 labelsBreak : { //        by : 0, //   str : '\n', //      expandAlways : false, //  ,  hover expandOnHover : false, //  ,  focused expandOnSelect : true }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コントローラーAPI

• getPath（葉） -葉オブジェクトの配列URLを返します：['top'、 'leaf_name'、 'child_name' ...]
  
  
• 更新（リーフ、コールバック、およびオープン） -渡された「リーフ」をリロードし、
  
  「コールバック」は完了時に使用され、
  
  折りたたまれたノードを展開する必要がある場合は「andOpen」を渡します
  
  
• blur（leaf） -blurノードを作成します
  
  
• フォーカス（リーフ） -ノードにフォーカスを設定します
  
  
• x-現在の構成
  
  
• x.current-現在選択されているノード
  
  
• init-config.init.auto == falseの場合、initツリーを呼び出す関数があります
  
  

これが誰かに役立つことを願っています。