jsTree插件简介(六)

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/download/yizhizouxiaqu/4347515  之lang-plugin.html

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