easyui(Tree前端工作）

最新推荐文章于 2024-11-16 23:03:00 发布

第五天537

最新推荐文章于 2024-11-16 23:03:00 发布

阅读量178

点赞数

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/weixin_64549900/article/details/124773579

版权

EasyUI 树形菜单选项卡 JavaScript 前端开发

关键词由CSDN通过智能技术生成

实现树形菜单

<body class="easyui-layout" data-options="fit:true" >
	<div data-options="fit:true" id="cc" class="easyui-layout">
		<div data-options="region:'north',title:'后台管理系统',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'south',title:'版权区域',split:true"
			style="height: 100px;"></div>
		<div data-options="region:'west',title:'菜单选项',split:true"
			style="width: 200px;">
			<!--树型菜单  -->
			<!--创建ul容器  -->
			<ul id="menuTree"></ul>
			
			</div>
		<div data-options="region:'center',title:'内容区域'"
			style="padding: 5px; ">
			
			<!--选项卡区域  -->
			<div id="tt" class="easyui-tabs" style="width:100%;height:500px; "margin=0px"">   
        <p>panel content.</p>
         <p>panel content.</p>
</div>  
			
			
		
	</div>
<script type="text/javascript">
//加载函数
$(function () {
	//通过脚本的方式实现树形菜单
	$("#menuTree").tree({
		 url:"start/data/tree_data1.json"

	})
	
	//通过脚本创建选项卡
	$('#tt').tabs({    
	    border:false,    
	    onSelect:function(title){    
	        alert(title+' is selected');    
	    }    
	});  

	 

	
})

</script>
</body>