0

jstree および Java スクリプトの新機能。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>
4

2 に答える 2

0

画像の名前と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-01T05:26:06.993 に答える
0

あなたはかなり口いっぱいに尋ねましたが、これはあなたを助けると思います. これは、提供したコードに基づいています。

<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>

明らかに、このコードを表示するための実際の画像はありませんが、空白を埋めることができると確信しています。また、「xml_data」の代わりに「html_data」プラグインを使用したことにも注意してください。これは、XML ファイルがどのようにフォーマットされているかがわからないためです。

于 2012-04-30T21:21:48.183 に答える