1. 程式人生 > >jsTree外掛簡介(六)

jsTree外掛簡介(六)

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

預設效果如下圖: