jsTree外掛簡介(六)
阿新 • • 發佈:2019-02-08
<h3>Using the languages plugin with HTML data</h3> <input type="button" class="button" value="en" id="en_1" style="float:left;" /> <input type="button" class="button" value="bg" id="bg_1" style="float:left;" /> <input type="button" class="button" value="zh" id="zh_1" style="float:left;" /> <input type="button" class="button" value="rename_1" id="rename_1" style="float:left;" /> <input type="button" class="button" value="rename_2" id="rename_2" style="float:left;" /> <input type="button" class="button" value="show_lang" id="show_lang" style="float:left;" /> <input type="button" class="button" value="get_string" id="get_string" style="float:left;" /> <input type="button" class="button" value="get_text" id="get_text" style="float:left;" /> <input type="button" class="button" value="set_text" id="set_text" style="" /> <div id="demo1" class="demo"> <ul> <li id="phtml_1"> <a href="#" class="en">Root node 1</a> <a href="#" class="bg">Корен 1</a> <a href="#" class="zh">根節點1</a> <ul> <li id="phtml_2"> <a href="#" class="en">Child node 1</a> <a href="#" class="bg">Дете 1</a> <a href="#" class="zh">子節點 1</a> </li> <li id="phtml_3"> <a href="#" class="en">Child node 2</a> <a href="#" class="bg">Дете 2</a> <a href="#" class="zh">子節點2</a> </li> </ul> </li> <li id="phtml_4"> <a href="#" class="en">Root node 2</a> <a href="#" class="bg">Корен 2</a> <a href="#" class="zh">根節點2</a> </li> </ul> </div> <script type="text/javascript" class="source"> $(function () { $("#en_1, #bg_1, #zh_1").click(function () { $("#demo1").jstree("set_lang", this.value); }); $("#rename_1").click(function () { $("#demo1").jstree("rename_node", "#phtml_1", "Rename visible lang"); }); $("#rename_2").click(function () { $("#demo1").jstree("rename_node", "#phtml_1", "Rename `bg`", "bg"); }); $("#show_lang").click(function () { alert($("#demo1").jstree("get_lang")); }); $("#get_string").click(function () { alert($("#demo1").jstree("_get_string", "#phtml_1", "zh")); }); $("#get_text").click(function () { alert($("#demo1").jstree("get_text", "#phtml_1", "en")); }); $("#set_text").click(function () { $("#demo1").jstree("set_text", "#phtml_1", "測試", "zh"); }); $("#demo1").jstree({ "languages" : [ "en", "bg", "zh" ], "plugins" : [ "themes", "html_data", "languages","checkbox"] }); }); </script>
預設效果如下圖: