JsTree - पेड़ आसान हैं

नमस्ते!

एक हब पर प्लग-इन JTTree के बारे में केवल 2009 में ही उल्लेख किया गया था । तब से, सब कुछ काफी बदल गया है। प्लगइन सक्रिय रूप से विकसित हो रहा है। प्रोजेक्ट पेज github पर ।

इस परियोजना की बारीकियों को देखते हुए कि मैं वर्तमान में (सहायता प्रणाली) पर काम कर रहा हूं, यह प्लगइन केवल अपरिहार्य है, और मैं इसकी कार्यक्षमता का 90% बड़े आनंद के साथ उपयोग करता हूं। और मैंने अभी भी वही शक्तिशाली विकल्प नहीं देखा है।



यदि आपको ब्राउज़र में बस एक पेड़ खींचने की आवश्यकता है, तो निश्चित रूप से आप अन्य प्लगइन्स का उपयोग कर सकते हैं, या यहां तक ​​कि इसे स्वयं भी लिख सकते हैं और संक्षिप्त रूप से, लेकिन व्यापक कार्यक्षमता के लिए - JsTree सिर्फ एक बढ़िया विकल्प है।

हमारे पास क्या है?

• HTML मार्कअप, json और xml प्रारूप पर आधारित एक पेड़ का निर्माण
• एक पेड़ पर नोड्स को स्थानांतरित करने की क्षमता को ठीक से ट्यूनिंग के साथ खींचें और छोड़ें
• डायनामिक रूप से नोड्स जोड़ें / निकालें / बदलें
• एक पृष्ठ पर कई पेड़ बनाने की क्षमता और इन पेड़ों के बीच नोड्स में हेरफेर
• मनमाने प्रकार के नोड्स (फ़ाइल, फ़ोल्डर, ड्राइव, हाँ जो भी हो) निर्दिष्ट करने की क्षमता, और प्रत्येक के लिए एक अलग व्यवहार निर्दिष्ट करें
• थीम के लिए समर्थन (लेख की शुरुआत में स्क्रीन पर कि मैंने इसे कैसे लागू किया है)
• कीबोर्ड नियंत्रण
• देशी और कस्टम चेकबॉक्स का उपयोग करना
• AJAX नोड लोड हो रहा है, एक पेड़ की स्थिति को याद करते हुए
• प्लगइन सुंदर और पठनीय है, यह आपको अतिरिक्त प्लगइन्स लिखने और इसे बिना किसी समस्या के अनुकूलित करने की अनुमति देता है।
• इवेंट प्रोसेसिंग के लिए सुविधाजनक बाइंडिंग सिस्टम
• बहुभाषी
• प्रकटीकरण एनिमेशन प्रबंधित करें
• वृक्ष की खोज
• कस्टम संदर्भ मेनू
• ब्राउज़र समर्थन: IE 6+, फ़ायरफ़ॉक्स 2+, सफारी 3+, ओपेरा 9+, क्रोम
• मिनी-फीचर जिसने मुझे विशेष रूप से प्रसन्न किया, वह था व्होलरो प्लगइन, जिसने पूरी चौड़ाई में एक नोड पर प्रकाश डाला। एक ला मैक शैली

यह कैसे काम करता है?

उत्कृष्ट और स्पष्ट उदाहरण आधिकारिक वेबसाइट पर पाए जा सकते हैं। विस्तृत दस्तावेज भी मौजूद है ।

आरंभ करने के लिए, हमें jquery.js, jstree.js (180KB को असम्पीडित रूप में) और विषयों के साथ एक फ़ोल्डर कनेक्ट करने की आवश्यकता है (यह स्वयं प्लगइन द्वारा जुड़ा हुआ है, बस इसे अगला डालें)

मैं JSON पर आधारित एक पेड़ का उपयोग करने का एक उदाहरण दूंगा।

HTML:

<div id="tree"></div> 

JQuery:

 $("#tree") .bind("before.jstree", function (e, data) { //       }) .jstree({ //   "plugins" : [ "themes","json_data" ], "json_data" : { "ajax" : { "url" : "tree.php", //   JSON "data" : function (n) { //   } } }, }) .bind("select_node.jstree", function(e, data){ //     //        window.location.hash = "view_" + data.rslt.obj.attr("id").replace("node_",""); }) }); 

हमें उदाहरणों की भावना में एक साधारण पेड़ मिलता है

शायद मैं अन्य उदाहरणों से शीट का वर्णन नहीं करूंगा। आप आधिकारिक वेबसाइट पर उनके साथ खुद को परिचित कर सकते हैं, लेकिन यदि विषय पर कोई विशिष्ट प्रश्न हैं, तो मैं खुशी के साथ उत्तर दूंगा।