選擇jstree節點時加載圖像

新增jstree和java腳本。需要創建一個jstree，當點擊一個節點時，我需要加載一個圖像。點擊不同的節點應該加載不同的圖像。到目前爲止，我有這個：選擇jstree節點時加載圖像

<html> 
<head> 
    <title>Tree</title> 

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
    <script type="text/javascript" src="jquery.jstree.js"></script> 
    <Script type="text/javascript"> 

$(document).ready(function(){ 

    $("#test1").jstree({ 


     "xml_data" : { 

      "ajax" : { 

       "url" : "/URL/tree.xml 

      }, 

      "xsl" : "nest" 

     }, 


     "plugins" : ["themes", "xml_data", "ui","types"] 


    }); 

    }); 

</Script> 

</script> 

</head> 
<body> 
<div id='tree.xml1'></div> 
</body> 
</html>

來源

2012-04-30 Sean Kaplan

你已經問了很多口，但我認爲這對你有幫助。這是根據您提供的代碼：

<html> 
<head> 
    <title>Tree</title> 

    <link href="jqueryUI/css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" type="text/css"> 
    <script src="jquery-1.7.1.js"></script> 
    <script src="jqueryUI/js/jquery-ui-1.8.19.custom.min.js"></script> 

    <script type="text/javascript" src="jstree/jquery.jstree.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 

      $("#test1").jstree({ 
       "html_data" : { 
        "data" : "<li id='root'><a href='#'>My Images</a><ul>" + 
         "<li id='image1.png'><a href='#'>Image 1</a></li>" + 
         "<li id='image2.png'><a href='#'>Image 2</a></li>" + 
         "<li id='image3.png'><a href='#'>Image 3</a></li>" + 
         "</ul></li>" 
       }, 

       "plugins" : ["themes", "html_data", "ui","types"] 
      }).bind("select_node.jstree", function (event, data) { 
       $("#imageDisplay").html("Load " + data.rslt.obj.attr("id") + " here"); 
      }); 
     }); 

</script> 

</head> 

<body> 
    <table> 
     <tr><td><div id='test1'></div></td> 
     <td><div id='imageDisplay'></div></td> 
     </tr> 
    </table> 
</body> 
</html>

顯然，有沒有實際的圖片此代碼來顯示，但我敢肯定，你可以填補空白。另外請注意，我使用「html_data」插件而不是「xml_data」，因爲我不知道如何格式化XML文件。

來源

2012-04-30 21:21:48

我的xml文件看起來像這樣： –

我感謝您的回覆。由於我將動態地從xml文件構建節點，因此單擊一個節點並加載相應的圖像將會非常具有挑戰性。我真的不知道我該怎麼做呢。 –

謝謝丹。我只是在學習jquery，並且需要知道我想要做的任務對於jquery是否可行。我有數百個用程序生成的圖像。這些圖像以主數字作爲jstree節點。 Jstree節點和圖像共享每個具有的主鍵值。點擊jstree上的一個節點，我需要加載所有圖像，並以該常用數字開始。我可以用jquerr做這個嗎？再次感謝您的幫助。 –

既然您知道圖像名稱和ID提前，爲什麼不在CSS中做這一切？無需編程，圖像更新全部在css文件中完成。

#f_def.jstree-open > a > ins{ 
    background: url("../images/f_def.png") no-repeat scroll 0px 0px transparent ! important; 
} 

#f_def.jstree-open > a > ins, 
#f_def.jstree-open > a{ 
    width:100px; 
    height:100px; 
} 


#f_def.jstree-closed > a > ins { 
    /* Use Default Icon for closed */ 
}

來源

2012-05-01 05:26:06 MMeah

你可以在這上面簽字。基於jstree上點擊的節點捕捉圖像並加載它，這是可以用CSS來實現的嗎？ –

@SeanKaplan肯定，但你需要能夠區分每個獨特的圖像。上面的例子是通過每個jstree節點的ID來完成的。 – MMeah

選擇jstree節點時加載圖像

回答

相關問題