languages plugin
描述:JSTree的languages插件使得树节点可以以不同的语言显示。一棵树可以有多种语言,但是在一个时刻只能显示一种语言。
配置:声明一个语言的数组,同时每一项作为一个CSS class name,因此要保证每一项字符的合法性。数组的第一个语言选项默认被加载。
演示:本例使用html作为展示数据,代码如下:
- <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>
默认效果如下图:
当点击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