<h2 class="contentTitle">树形菜单</h2>

<div id="resultBox"></div>

<div style=" float:left; display:block; margin:10px; overflow:auto; width:200px; height:200px; overflow:auto; border:solid 1px #CCC; line-height:21px; background:#FFF;">
<p>treeFolder treeCheck expand</p>
<form method="post" action="demo/common/ajaxDone.json" class="pageForm required-validate" onsubmit="return validateCallback(this)">
<ul class="tree treeFolder treeCheck expand" oncheck="test_check_tree">
	<li><a tname="name" tvalue="框架面板" >框架面板</a>
		<ul>
			<li><a tname="name" tvalue="value1" checked="true">我的主页</a></li>
			<li><a tname="name" tvalue="value2">页面一</a></li>
			<li><a tname="name" tvalue="value3">替换页面一</a></li>
			<li><a tname="name" tvalue="value4">页面二</a></li>
			<li><a tname="name" tvalue="value5">页面三</a></li>
		</ul>
	</li>

	<li><a tname="name" tvalue="test1">Test 1</a>
		<ul>
			<li><a tname="name" tvalue="test1.1">Test 1.1</a>
				<ul>
					<li><a tname="name" tvalue="test1.1.1" checked="true">Test 1.1.1</a></li>
					<li><a tname="name" tvalue="test1.1.2" checked="false">Test 1.1.2</a></li>
				</ul>
			</li>
			<li><a tname="name" tvalue="test1.2" checked="true">Test 1.2</a></li>
		</ul>
	</li>
	<li><a tname="name" tvalue="test2" checked="true">Test 2</a></li>
</ul>

<input type="submit" value="Submit"/>
</form>
</div>

<div style="float:left; display:block; margin:10px; overflow:auto; width:200px; height:200px; border:solid 1px #CCC; line-height:21px; background:#FFF;">
<p>treeFolder collapse</p>
<ul class="tree treeFolder collapse">
	<li><a href="tabsPage.html" target="navTab">框架面板</a>
		<ul>
			<li target="selectedObjId" rel="1"><a href="main.html" target="navTab" rel="main">我的主页</a></li>
			<li target="selectedObjId" rel="2"><a href="newPage1.html" target="navTab" rel="page1">页面一</a></li>
			<li><a href="newPage2.html" target="navTab" rel="page1">替换页面一</a></li>
			<li><a href="newPage2.html" target="navTab" rel="page2">页面二</a></li>
			<li><a href="newPage3.html" target="navTab" rel="page3" title="页面三（自定义标签名）">页面三</a></li>
		</ul>
	</li>
	<li><a href="w_panel.html" target="navTab" rel="w_panel">面板</a></li>
	<li><a href="w_tabs.html" target="navTab" rel="w_tabs">选项卡面板</a></li>
	<li><a href="w_dialog.html" target="navTab" rel="w_dialog">弹出窗口</a></li>
	<li><a href="w_alert.html" target="navTab" rel="w_alert">提示窗口</a></li>
	<li><a href="w_table.html" target="navTab" rel="w_table">表格容器</a></li>
	<li><a href="w_tree.html" target="navTab" rel="w_tree">树形菜单</a></li>
	<li><a href="w_editor.html" target="navTab" rel="w_editor">编辑器</a></li>
</ul>
</div>
<div style=" float:left; display:block; margin:10px; overflow:auto; width:200px; height:200px; border:solid 1px #CCC; line-height:21px; background:#FFF;">
<ul class="tree">
	<li><a href="tabsPage.html" target="navTab">框架面板</a>
		<ul>
			<li><a href="main.html" target="navTab" rel="main">我的主页</a></li>
			<li><a href="newPage1.html" target="navTab" rel="page1">页面一</a></li>
			<li><a href="newPage2.html" target="navTab" rel="page1">替换页面一</a></li>
			<li><a href="newPage2.html" target="navTab" rel="page2">页面二</a></li>
			<li><a href="newPage3.html" target="navTab" rel="page3" title="页面三（自定义标签名）">页面三</a></li>
		</ul>
	</li>
	<li><a href="w_panel.html" target="navTab" rel="w_panel">面板</a></li>
	<li><a href="w_tabs.html" target="navTab" rel="w_tabs">选项卡面板</a></li>
	<li><a href="w_dialog.html" target="navTab" rel="w_dialog">弹出窗口</a></li>
	<li><a href="w_alert.html" target="navTab" rel="w_alert">提示窗口</a></li>
	<li><a href="w_table.html" target="navTab" rel="w_table">表格容器</a></li>
	<li><a href="w_tree.html" target="navTab" rel="w_tree">树形菜单</a></li>
	<li><a href="w_editor.html" target="navTab" rel="w_editor">编辑器</a></li>

</ul>
</div>

<script type="text/javascript">
function test_check_tree(json){
	console.log(json);

	var result = json.checked ? "选择" : "取消";
//	alert(json.checked);

	$(json.items).each(function(i){
		result += "<p>name:"+this.name + " value:"+this.value+" text: "+this.text+"</p>";
	});
	$("#resultBox").html(result);

}
</script>