zTree树形菜单交互选项卡效果的实现方法       下面小编就为大家分享一篇zTree树形菜单交互选项卡效果的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
!-- 导入jquery核心类库 -- script type="text/javascript" src="../js/jquery-1.8.3.js" /script !-- 导入easyui类库 -- link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" /script !--引入ztree-- script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8" /script link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css" rel="external nofollow" / script type="text/javascript" //页面加载后执行 $(function() { //1.进行ztree树形菜单设置，开启简单json数据支持 var setting = { data:{ simpleData:{ enable:true//开启简单json数据格式支持 callback:{ onClick:function(event,treeId,treeNode,clickFlag){ var content = ' div '+' iframe src="'+treeNode.page+'" scrolling="auto" /iframe /div ' //没有设置page属性的树形菜单，不打开选项卡 if(treeNode.page!=undefined treeNode.page!=""){ //如果选项卡已经打开，就选中 if($("#mytabs").tabs('exists',treeNode.name)){ //选中选项卡 $("#mytabs").tabs('select',treeNode.name); }else{ //如果没有打开，添加选项卡 $("#mytabs").tabs('add',{ title:treeNode.name, content:content, closable:true //2.提供ztree树形菜单数据 var zNodes = [ {id:1,pId:0,name:"父节点一"}, {id:2,pId:0,name:"父节点二"}, {id:11,pId:1,name:"子节点一"}, {id:12,pId:1,name:"子节点二"}, {id:13,pId:2,name:"CSDN博客",page:"a"}, {id:14,pId:2,name:"博客园",page:"niwotaxuexiba/"} //3.生成树形菜单 $.fn.zTree.init($("#baseMenu"),setting,zNodes); /script /head body div data-options="region:'north',title:'你我他学习吧-学习Java的好博客！'" /div div data-options="region:'west',title:'菜单导航'" !--折叠面板-- div data-options="fit:true" div data-options="title:'基础菜单'" !--通过ztree插件，制作树形菜单-- ul id="baseMenu" /ul /div div data-options="title:'系统菜单'" 你我他学习吧 /div /div /div div data-options="region:'center',title:'中部区域'" !--选项卡面板-- div id="mytabs" data-options="fit:true" div data-options="title:'选项卡面板一',closable:true" 选项卡面板一 /div div data-options="title:'选项卡面板二',closable:true" 选项卡面板二 /div /div /div div data-options="region:'east',title:'东部区域'" /div div data-options="region:'south',title:'南部区域'" /div /body /html

以上这篇zTree树形菜单交互选项卡效果的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。