2011-12-04 8 views
12

मैं जेक्री और जेएस ट्री के लिए नया हूं लेकिन इसे प्यार करना सीख रहा हूं। मैंने को PHP उत्पन्न जेएमएल (नीचे कोड देखें) का उपयोग करके एक पेड़ मेनू सेट किया है। यह एक अपवाद के साथ के रूप में काम करता है - लिंक सक्रिय नहीं हैं।जेएस ट्री लिंक सक्रिय नहीं हैं

मुझे पता है कि कुछ बुनियादी है जो मुझे समझ में नहीं आता है। लघु अवधि I लिंक सामान्य लिंक के रूप में कार्य करने के लिए चाहते हैं। दीर्घकालिक मैं उन्हें पर एक अजाक्स कॉल ट्रिगर करना चाहता हूं जो पृष्ठ पर एक विशिष्ट div को फिर से लोड करेगा।

क्या कोई मुझे सही दिशा में इंगित कर सकता है? मदद के लिए बहुत बहुत धन्यवाद!

$(function() { 
     $("#mainMenu").jstree({ 
       xml_data : { data : <?php $menu->deliver(); ?> }, 
       core : { animation : 1000 } 
       ui : { select_limit : 1, selected_parent_close : false }, 
       themes : { theme : "default", dots : true, icons : false }, 
       types : { types : { "heading" : { select_node : true } } }, 
       plugins : [ "themes", "xml_data", "ui", "types" ] 
     }); 
}); 

उदाहरण एक्सएमएल (एक आइटम):

"<root><item id='pubPages_home' parent_id='0'><content><name href='? 
a=pubPages&amp;f=home'>Public Home</name></content></item><root>" 
+0

कौन से लिंक काम नहीं करते हैं? यदि आप नोड नाम पर क्लिक करते हैं? आप क्या करना चाहते हैं? क्या आप jsfiddle नमूना प्रदान कर सकते हैं? – Radek

+1

@Radek नोड्स काम करते हैं (पेड़ को खोलें और बंद करें) अपेक्षित के रूप में। एक टैग hrefs काम नहीं करता है। लिंक पर होवर करते समय, ब्राउज़र उन्हें पहचानता है, लेकिन क्लिक करने से ब्राउज़र को लिंक पर नहीं भेजा जाता है। मुझे संदेह है कि जेएस ट्री ने टैग पर क्लिक करने के लिए रोकथाम() को बुलाया है। –

उत्तर

2

मैं आपको स्पष्ट रूप से पेड़ नोड लिंक के लिए क्लिक हैंडलर लिखने के लिए की जरूरत है। JsTree अपने लिए क्लिक ईवेंट लेता है और इसे पृष्ठ को रीडायरेक्ट करने की अनुमति नहीं देता है।

मैं इस तरह से जाने की कोशिश करेंगे:

$('#mainMenu').bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.attr("href"); 
}); 
3

मैं जानता हूँ कि यह पुराना है, लेकिन मैं यहाँ एक त्वरित फिक्स की तलाश में आया था। ल्यूबर बिलेक ज्यादातर सही है, लेकिन ध्यान रखें कि जेएसटी क्लिक किए गए एंकर तत्व के माता-पिता <li> को बाध्य करेगा।

मैं ऐसा करके इस हल:

.bind('select_node.jstree', function(e,data) { 
    window.location.href = data.rslt.obj.find('a').attr("href"); 
}); 

इस तरह, घटना बच्चे <li> खुद के बजाय <li> की <a> करने के लिए बाध्य होगा, ताकि आप अपने एंकर पर href विशेषता के बजाय कर सकते हैं आपकी सूची आइटम

0

मुझे एक आसान तरीका मिल रहा है।

$('#'+target).jstree({ 'core' : { 
    'data' : treeInfo 
} }); 

$(".jstree-anchor").click(function() 
{ 
    document.location.href = this; 
}); 

मैंने पाया कि jstree ली सूचियों के लिए "jstree-लंगर" वर्ग का इस्तेमाल किया। तो, मैं इस ऑब्जेक्ट से href लिंक पा सकता हूं, मैं बिना किसी बाध्यकारी फ़ंक्शन के इस लिंक को बना सकता हूं।

1

मैं इस कोड का प्रयास करें:

window.location.href = data.rslt.obj.find('a').attr("href"); 

यह data.rslt अपरिभाषित त्रुटि बढ़ा है, इसलिए मैं इसके साथ href नहीं मिल सकता है!

$("#mytree").bind("select_node.jstree", function(e, data) { 
    window.location.href = data.node.a_attr.href; 
}); 

jstree के संस्करण से संबंधित है:

यहाँ

मेरी उपलब्ध कोड है? मेरा जेएसटी संस्करण: 3.0.0-बाटा 10

14
  .bind("select_node.jstree", function (e, data) { 
       var href = data.node.a_attr.href 
       document.location.href = href; 
      }) ; 

जेएसटी संस्करण: "3.0।0 ", jQuery: पिछले

अद्यतन: या मेरे लिए सबसे अच्छा तरीका है:

.bind("select_node.jstree", function (e, data) { 
    $('#jstree').jstree('save_state'); 
}) ; 

.on("activate_node.jstree", function(e,data){ 
    window.location.href = data.node.a_attr.href; 
}) 
1

मैं अभी थोड़ा जानवर बल

<li id="child_node_1"><span onClick="javascript:window.location.href='your_page.html'" title="Lassie come home!">your text here</span></li> 

अच्छा और आसान के साथ इस समस्या का समाधान

1

इसे आजमाएं:

jQuery("#mytree ul").on("click","li.jstree-node a",function(){ 
    document.location.href = this; 
}); 

jQuery event delegation के लिए धन्यवाद, यह घटना <a> elemets को सौंपी जाएगी। यदि आप ईवेंट प्रतिनिधिमंडल का उपयोग नहीं करते हैं तो यह केवल पहली बार आग लग जाएगा जब आप प्रत्येक एंकर पर क्लिक करेंगे।

+0

ओपी को "इसे आजमाएं" क्यों चाहिए? क्या आप एक स्पष्टीकरण प्रदान कर सकते हैं जो ओपी के साथ-साथ भविष्य के आगंतुकों को एसओ को लाभ पहुंचाएगा? –

1

आम तौर पर हमें "कंटेनर नोड्स" और "चाइल्ड नोड्स" दोनों की कार्रवाई को नियंत्रित करने की आवश्यकता होती है।

$("#jstree-div").jstree().delegate("a","click", function(e) { 
      if ($("#jstree-div").jstree("is_leaf", this)) { 
       document.location.href = this; 
      } 
      else { 
       $("#jstree-div").jstree("toggle_node", this); 
      } 
     }); 

"is_leaf" jsTree कार्यों अगर एक नोड से कोई संतान नहीं है की जाँच करता है कि में से एक है:

तो हम जैसे thomething कर सकते हैं।

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