कस्टम ट्री v2 jQuery प्लगइन

दूसरे दिन मैंने अपने पुराने ओपन सोर्स प्रोजेक्ट में से एक के पुनः देखे जाने का फैसला किया।
सोचने की प्रक्रिया में, मैंने फैसला किया कि अपने वर्तमान रूप में पेड़ के साथ पिछला घटक अब मुझे सूट नहीं करता है।

मैं एक स्पष्ट और सरल एपीआई के साथ कुछ और इवेंट ड्रिवन चाहता था।

अब मैंने फैसला किया कि यह पब्लिक के लिए पहले से ही तैयार है।

लो, इसका उपयोग करो ।
या जीएच-पन्नों के ढांचे में उदाहरण देखें ।

बिल्ली के नीचे, एक संक्षिप्त एपीआई प्रलेखन का एक संक्षिप्त अनुवाद।

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 } }); 

पार्सिंग \ _ रेंडरिंग में आने वाले नोड के मापदंडों पर कोड सख्त समझौते का उपयोग करता है, इसलिए मैं एक नोड (पत्ती) का एक उदाहरण देता हूं :

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

स्पष्टीकरण {

• रूट - नोड के रूट पथ का नाम
  
• 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 } 

हैंडलर (पत्ती, नियंत्रक, पेड़) - पूर्वनिर्धारित ईवेंट हैंडलर।

हर कोई वर्तमान नोड, नियंत्रक और ट्री ऑब्जेक्ट को स्वीकार करता है।

लेकिन पहले वाला भी कॉलबैक को पहले पैरामीटर के रूप में स्वीकार करता है।

यदि, उदाहरण के लिए, आपको यह जांचने की आवश्यकता है कि क्या वर्तमान नोड धुंधला हो सकता है।
यदि हाँ, तो इस कॉलबैक को कॉल करने की आवश्यकता है।
अन्यथा, बस इसे कॉल न करें, फिर धुंधला नहीं होगा।

यदि धब्बा बनाया जाना था, क्योंकि किसी अन्य नोड के लिए फ़ोकस करना आवश्यक था, तो यदि आप इस कॉलबैक को कॉल नहीं करते हैं, तो न तो वर्तमान का धब्बा और न ही वांछित का ध्यान केंद्रित किया जाएगा।

स्वाभाविक रूप से, पहले के लिए इन कॉलबैक जोड़तोड़ केवल तभी संभव होगा जब आप हैंडलर को भेजें।

लोडर (पथ, कॉलबैक) - नियंत्रक लोड लीफ तक पहुंचेगा।

पथ के रूप में ['tree.root', 'leaf.name'] लेता है।

एक जेएस वस्तु वापस करना चाहिए!

श्रोता jQuery नहीं हैं। एक मानक (एक नोड के पाठ तत्व के लिए कॉलबैक)।
यही है, अगर, उदाहरण के लिए, आपको संदर्भ या कस्टम क्लिक की आवश्यकता है, तो आपको श्रोताओं का उपयोग करने की आवश्यकता है।

विषय - सीएसएस PREFIX_ कक्षाओं के लिए जब प्रतिपादन

सीएलएस - जब प्रतिपादन सीएसएस वर्गों का एक सेट:

 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 : { close : '+', open : '–' }, 

storeLoaded: सच है || झूठी - "ध्वस्त" नोड्स को बचाने, या हर बार पुनरारंभ करें

focusParentOnClose: सच || गलत - यदि उसके वंशज का ध्यान केंद्रित था तो माता-पिता का चयन करें

focusByDbl क्लिक करें: true || झूठी - डबल क्लिक करें

blurFromContainer क्लिक करें: सच || जब रूट क्लिक किया जाता है तो गलत - धुंधला

blurFromContainerDblClick: सच || गलत - जब डबल-क्लिक रूट

लेबलबैक: - यदि आवश्यक हो तो नोड का टेक्स्ट कैप्शन लंबा हो सकता है, "ट्रिमिंग" के विकल्प:

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

नियंत्रक एपीआई

• getPath (लीफ) - लीफ ऑब्जेक्ट के लिए ARRAY URL लौटाता है: ['शीर्ष', 'leaf_name', 'child_name' ...]
  
• ताज़ा करें (पत्ती, कॉलबैक, और ऑपन) - पारित 'पत्ती' को पुनः लोड करता है,
  'कॉलबैक' का उपयोग पूरा होने पर किया जाता है,
  यदि आपको ढहने वाले नोड का विस्तार करने की आवश्यकता है, तो'Open 'पास करें
  
• ब्लर (पत्ती) - ब्लर नोड बनाते हैं
  
• फोकस (लीफ) - फोकस को नोड बनाते हैं
  
• x - वर्तमान विन्यास
  
• x.current - वर्तमान में चयनित नोड
  
• init - अगर config.init.auto == गलत है, तो init ट्री को कॉल करने के लिए एक फंक्शन होगा
  

मुझे उम्मीद है कि यह किसी के लिए उपयोगी है।