JQuery JSTree - एक टूलटिप

जोड़ें को JSTree नोड में जोड़ने का कोई तरीका है? जब उपयोगकर्ता किसी तत्व पर हो जाता है तो मैं अतिरिक्त जानकारी प्रदर्शित करना चाहता हूं।JQuery JSTree - एक टूलटिप

जब मैं JQuery की बात करता हूं तो मैं बहुत घना हूं इसलिए इसका स्पष्ट उत्तर हो सकता है।

संपादित करें: नीचे zzzz के लिए धन्यवाद, मैं पॉप अप करने के लिए एक साधारण होवर बॉक्स प्राप्त करने में सक्षम हूं। टूलटिप पेज के भीतर दिए गए निर्देशों के मुताबिक पेड़ के div को fieldset में डालने के बावजूद मैं अभी भी एक फैंसी JQuery टूलटिप लागू नहीं कर सकता हूं।

स्रोत

2011-08-17 Haphazard

क्या यह सिर्फ उस पेड़ में आपके नोड में शीर्षक विशेषता जोड़ने के बारे में नहीं है ?? फैंसी कुछ भी नहीं ..

स्रोत

2011-08-17 17:21:06 Baz1nga

टिप के लिए धन्यवाद। इसके साथ, मैं एक बुनियादी HTML टूलटिप प्रदर्शित करने में सक्षम था। हालांकि यह काफी अच्छा हो सकता है, मैं अभी भी जानना चाहता हूं कि नोड के होवर पर फैंसी JQuery टूलटिप को कैसे ट्रिगर करना है। – Haphazard

आपके JSON डेटा में 'नोड [a_attr] [शीर्षक]' सेट करके मानक टूलटिप्स प्राप्त किए जा सकते हैं। – cweiske

$("#my_tree).bind("hover_node.jstree", function (e, data) 
{ 
    alert(data.rslt.obj.attr("id")); 
})

स्रोत

2011-09-08 19:32:36

माउस को नोड छोड़ने के लिए, 'dehover_node.jstree' ईवेंट देखें। बस इसे संदर्भ के रूप में छोड़ दें। – arvidkahl

'data.rslt.obj.attr ("id") वास्तव में क्या करता है' मेरा मतलब है डेटा क्या है, rslt, obj यहाँ? –

मैं अपने jstree गतिशील create_node समारोह का उपयोग कर बनाने के लिए:

$("#my_tree").jstree("create_node", 
    "my_node", 
    "inside", 
    { "attr": { "id": "my_node" }, 
    "data": { "attr": { "class": "show_tooltip", 
         "title": "my tooltip text" }, 
       "title": "my node text" } });

और फिर मैं टूलटिप के रूप में .show_tooltip वर्ग को परिभाषित: $(".show_tooltip").tooltip();

स्रोत

2011-11-17 12:35:56 Greg

jstree के लिए एक उपकरण टिप जोड़ना बहुत आसान है। चरणों को लिखने से पहले मुझे बताएं कि मैं क्या करूँगा

पूर्वापेक्षाएँ: आपको jquery लाइब्रेरी और अन्य निर्भरताओं का उपयोग करना चाहिए। तो अपने सिर में टैग यह इस

<head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<script> 
$(function() { 
$(document).tooltip(); 
}); 
</script> 
<style> 
label { 
display: inline-block; 
width: 5em; 
} 
</style> 
</head>

कुछ ऐसा दिखाई देगा ऊपर कोड jQuery पुस्तकालय और आवश्यक सीएसएस मिल जाएगा। इसके अलावा यह उपकरण टिप

के लिए आवश्यक शैली तैयार करेगा, इसलिए अब जेस्ट्री पर कदम उठाने के लिए। कि iam लेखन ध्यान दें jstree के नवीनतम संस्करण के लिए इस उत्तर 3.0.2

हम 'hover_node.jstree'

.on('hover_node.jstree',function(e,data){ 
$("#"+data.node.id).prop('title', "add your custom title here"); 
})

इस पकड़ने के लिए की आवश्यकता होगी सब आप क्या करना है और jQuery ले जाएगा टूलटिप को दिखाने के लिए बाकी की देखभाल

इसके पीछे तर्क यह है कि jquery स्वचालित रूप से जांचता है कि क्या किसी भी नोड (यानी तत्व) से जुड़े टिटल विशेषता है और फिर कोई शीर्षक शीर्षक होने पर टूलटिप प्रदर्शित करता है। तो हम जो कुछ भी कर रहे हैं वह शीर्षक को गतिशील रूप से नोड में जोड़ रहा है। यह आपको प्रत्येक नोड के लिए अपने डेटा के आधार पर प्रत्येक नोड पर कस्टम टूलटिप जोड़ने के लिए लचीलापन देता है या यदि यह एक निश्चित है तो आप हार्डकोड भी कर सकते हैं।

अधिक अनुकूलित करने के लिए

और स्टाइल के रूप में यहाँ प्रलेखित आप, Jquery Tooltip

स्रोत

2014-08-26 08:08:21 Chetan

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

, छवि के स्रोत के साथ img टैग का उपयोग करने का प्रयास करें और देखें कि यह काम करता है या नहीं। – Chetan

हाय @ खेतान, मैंने कोशिश की लेकिन मैं इसे करने के लिए जो कुछ भी कर सकता था वह टूल टिप के रूप में एचटीएमएल के लिए प्रदर्शित किया गया था। मैं अभी भी एक काम के आसपास लग रहा हूँ! –

उपयोग "a_attr" या "li_attr" उल्लेख कर सकते हैं शीर्षक जोड़ने के लिए है, जो तत्व आप शीर्षक पर होना चाहते हैं पर निर्भर करता है: https://www.jstree.com/docs/json/

"create_node" फ़ंक्शन का उपयोग करते हैं, तो इस तरह यह कार्य करें:

$("#my_tree").jstree("create_node", 
    "my_node", 
    "inside", { 
     "attr": { 
      "id": "my_node" 
     }, 
     "li_attr": { //or a_attr if you prefer 
      "title": "my tooltip text", 
      "class": "show_tooltip" 
     }, 
     "text": "my node text" 
    });

ऊपर ब्राउज़र में एक टूलटिप यह दिखाएगा। यदि आप कस्टम टूलटिप (उदा। बूटस्ट्रैप) का उपयोग करना चाहते हैं, तो आप बस $ ("show_tooltip") को कॉल कर सकते हैं।टूलटिप();

स्रोत

2017-12-06 14:32:04 Andrew

JQuery JSTree - एक टूलटिप

उत्तर

संबंधित मुद्दे