jsTree插件简介(六)

languages plugin

描述：JSTree的languages插件使得树节点可以以不同的语言显示。一棵树可以有多种语言，但是在一个时刻只能显示一种语言。

配置：声明一个语言的数组，同时每一项作为一个CSS class name，因此要保证每一项字符的合法性。数组的第一个语言选项默认被加载。

演示：本例使用html作为展示数据，代码如下：

[html] view plaincopy

1. <h3>Using the languages plugin with HTML data</h3>  
2. <input type="button" class="button" value="en" id="en_1" style="float:left;" />  
3. <input type="button" class="button" value="bg" id="bg_1" style="float:left;" />  
4. <input type="button" class="button" value="zh" id="zh_1" style="float:left;" />  
5. <input type="button" class="button" value="rename_1" id="rename_1" style="float:left;" />  
6. <input type="button" class="button" value="rename_2" id="rename_2" style="float:left;" />  
7. <input type="button" class="button" value="show_lang" id="show_lang" style="float:left;" />  
8. <input type="button" class="button" value="get_string" id="get_string" style="float:left;" />  
9. <input type="button" class="button" value="get_text" id="get_text" style="float:left;" />  
10. <input type="button" class="button" value="set_text" id="set_text" style="" />  
11. <div id="demo1" class="demo">  
12.     <ul>  
13.         <li id="phtml_1">  
14.             <a href="#" class="en">Root node 1</a>  
15.             <a href="#" class="bg">Корен 1</a>  
16.             <a href="#" class="zh">根节点1</a>  
17.             <ul>  
18.                 <li id="phtml_2">  
19.                     <a href="#" class="en">Child node 1</a>  
20.                     <a href="#" class="bg">Дете 1</a>  
21.                     <a href="#" class="zh">子节点 1</a>  
22.                 </li>  
23.                 <li id="phtml_3">  
24.                     <a href="#" class="en">Child node 2</a>  
25.                     <a href="#" class="bg">Дете 2</a>  
26.                     <a href="#" class="zh">子节点2</a>  
27.                 </li>  
28.             </ul>  
29.         </li>  
30.         <li id="phtml_4">  
31.             <a href="#" class="en">Root node 2</a>  
32.             <a href="#" class="bg">Корен 2</a>  
33.             <a href="#" class="zh">根节点2</a>  
34.         </li>  
35.     </ul>  
36. </div>  
37.   
38. <script type="text/javascript" class="source">  
39. $(function () {  
40.     $("#en_1, #bg_1, #zh_1").click(function () {   
41.         $("#demo1").jstree("set_lang", this.value);  
42.     });  
43.     $("#rename_1").click(function () {   
44.         $("#demo1").jstree("rename_node", "#phtml_1", "Rename visible lang");  
45.     });  
46.   
47.     $("#rename_2").click(function () {   
48.         $("#demo1").jstree("rename_node", "#phtml_1", "Rename `bg`", "bg");  
49.     });  
50.       
51.     $("#show_lang").click(function () {   
52.         alert($("#demo1").jstree("get_lang"));  
53.     });  
54.   
55.     $("#get_string").click(function () {   
56.         alert($("#demo1").jstree("_get_string", "#phtml_1", "zh"));  
57.     });  
58.       
59.     $("#get_text").click(function () {   
60.         alert($("#demo1").jstree("get_text", "#phtml_1", "en"));  
61.     });  
62.       
63.       
64.     $("#set_text").click(function () {   
65.         $("#demo1").jstree("set_text", "#phtml_1", "测试", "zh");  
66.     });  
67.       
68.     $("#demo1").jstree({   
69.         "languages" : [ "en", "bg", "zh" ],  
70.         "plugins" : [ "themes", "html_data", "languages","checkbox"]  
71.     });  
72.   
73.       
74. });  
75.   
76. </script>  

默认效果如下图：

当点击bg按钮时显示效果如下：

当点击zh时显示效果如下

代码还对language的函数做了说明

1、get_lang：取得树结构当前使用的语言。

2、set_lang()：设置树结构的当前语言。

3、get_text(node, lang)：取得指定节点指定语言的title，参数node：指定节点，lang：制定语言。

4、set_text(node, text, lang)：设定指定节点指定语言现实的内容，参数node：指定节点， text：制定内容(title)，lang：指定语言

5、_get_string(node, lang)：从core配置对象返回需要的字符串。

代码详见：http://download.csdn.net/detail/xiaolinye3319/6241575  之lang-plugin.html

本文参考：http://www.jstree.com/documentation/languages