我们可以利用树实现菜单的显示，但是我们需要每点击一个菜单在右侧实现一个选项卡，这个就需要easyui里面的选项卡的功能

我们写一个代码

 <%--创建选项卡容器--%><div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"><%--选项卡面板--%><div title="第一个" style="padding:20px;display:none;"><%--linkbutton组件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">测试linkbutton按钮</a></div><%--选项卡面板--%><div title="第二个" style="padding:20px;display:none;"><%--linkbutton组件效果--%><a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add'">测试linkbutton按钮</a></div></div>

最外层的div就是设置这个div为选项卡，里面有几个内部的div，那么就有几个选项卡，只要写了上面的代码，那么我们在页面就可以看到

因为里面写了两个内部的div，那么就可以看到两个选项卡

每一个标签卡里面的属性配置，那么就可以使用api里面的

以上是介绍了选项卡的实现

那么如何将菜单和选项卡联动起来呢？实现的效果为

[1] 功能需求

点击树状菜单的时候，可以在页面的中心区域中新增一个选项卡，显示当前
菜单的资源。如果当前菜单对应的选项卡已经存在，则不会重新创建，而是
选择已经存在的选项卡显示给用户。具有子菜单的一级菜单是无需创建选项卡的

[2] 功能实现

① 给树状菜单的节点增加单击事件
② 在树节点的单击事件中校验当前点击的是资源跳转菜单还是一级菜单
③ 在树节点的单击事件中增加新增选项卡的逻辑
④ 判断菜单节点的选项卡是否存在如果已经存在，则选中，而不是创建

[3] 示例代码

先是菜单的代码，这个代码的样式是使用easyui的树class=“easyui-tree”

 <%--声明树状的ul容器--%><ul id="myTree" class="easyui-tree"><%--声明一级菜单--%><li><span>超市购物网站</span><%--声明二级菜单细信息--%><ul><li>天猫超市</li><li>京东超市</li><li>永辉超市</li></ul></li><%--声明一级菜单信息--%><li><span>电器购物网站</span><%--声明二级菜单信息--%><ul><li>京东</li><li>苏宁</li><li>国美</li></ul></li><%--普通一级菜单--%><li><span>淘宝网</span></li></ul>

以上的代码界面效果是

之后开始创建选项卡的代码

 <%--创建选项卡容器--%><div id="tt" class="easyui-tabs" style="width:500px;height:250px;" data-options="fit:true,border:true,plain:false,tabPosition:'top'"></div>

以上的选项卡的只是写了一个最外层的div，在界面是没效果的。如果我们在里面写几个内部的div，就会有效果。但是现在是点击了菜单之后，里面才建立内部的div，所以需要在菜单按钮上面加事件。

菜单上面加事件，事件方法里面创建选项卡，这样菜单和选项卡就通过事件连接起来了

 /****************设置树组件*************************/$(function () {$("#myTree").tree({onClick:function (node) {//判断当前点击的节点是否具有子节点console.log(node);var cs=node.children;判断是不是一级菜单if(!cs){//判断菜单节点的选项卡是否存在var flag=$("#tt").tabs('exists',node.text);if(flag){//选中菜单节点对用的选项卡$("#tt").tabs('select',node.text);}else{//新增选项卡$("#tt").tabs('add',{title:node.text,closable:true})}}}})})

写了以上的代码，就实现了联动，就实现了效果图

菜单的实现是使用的easyui的树，UI标签上面写class="easyui-tree"就可以展现菜单形状了，UI里面的li就是子菜单

我们利用js

  $(function () {$("#myTree").tree({onClick:function (node) {

这个onClick点击事件，node参数就是我们点击的哪个菜单，node里面的信息就是哪个菜单的。
我们在控制台输出node，就可以看到，点击不同的菜单，输出的就不一样。如果一级菜单下有二级菜单，输出的node里面就有属性chridren.。我们可以根据有没有这个属性判断是不是一级菜单。

onClick:function (node) {//判断当前点击的节点是否具有子节点console.log(node);var cs=node.children;判断是不是一级菜单if(!cs){

因为只有没有子菜单的按钮，才可以弹出选项卡，所以，只要用if判断了没有children，那么里面就可以写关于选项卡的代码了。

  if(!cs){//判断菜单节点的选项卡是否存在var flag=$("#tt").tabs('exists',node.text);if(flag){//选中菜单节点对用的选项卡$("#tt").tabs('select',node.text);}else{//新增选项卡$("#tt").tabs('add',{title:node.text,closable:true})}

以上就是思路

利用easyui实现菜单节点和选项卡的联动效果相关推荐

EasyUI 树菜单
EasyUI 树菜单通过ssm框架项目实现EasyUI 的树菜单的单选,复选,异步加载树,同步加载树和树权限控制等功能. 本章知识点效果图: 需求:通过SSM框架,实现EasyUI 树菜单的单选, ...
EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是方法2:官方文档中: ...
雷林鹏分享：jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单
jQuery EasyUI 树形菜单 - 创建带复选框的树形菜单 easyui 的树(Tree)插件允许您创建一个复选框树.如果您点击一个节点的复选框,这个点击的节点信息将向上和向下继承.例如:点击 ...
安卓案例：利用XML配置菜单
安卓案例:利用XML配置菜单菜单在安卓应用程序中占有比较重要的位置.原生安卓提供了三种类型的菜单:选项菜单.上下文菜单和子菜单.在实际安卓项目中,往往会使用 SlidingMenu (滑动菜单),因 ...
html5绘制节点链接,利用HTML5实现网状结构节点动画特效
特效描述:利用HTML5实现网状结构节点动画特效.利用HTML5实现网状结构节点动画特效代码结构 1. HTML代码 (function() { var canvas, ctx, circ, n ...
Menu详解（二）：利用XML生成菜单和子菜单
前言:上篇,我们说了有关代码生成菜单和子菜单的方法,这里我们再讲讲有关利用XML生成菜单和子菜单的问题. 业精于勤,荒于嬉,行成于思,毁于随 (日拱一卒) 系列文章: 1.<Menu详解(一): ...
Unreal地形根据斜率分配地形材质，以及利用材质Grass Output 节点，以及Foliage 系统添加植被，以及Procedural Foliage Spawn
总结: 1利用heightlerp来调整坡度上地表的拉伸 2利用材质里的grass out put节点来根据地形的mask自动生成地面的草花等小细节 3利用ProceduralFoliageVo ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...
easyui tree 检索树节点（3）
1.检索树节点的调用方法 function searchTreeFunc(){ $("#tree").tree("searchTree",$("#s ...

利用easyui实现菜单节点和选项卡的联动效果

以上是介绍了选项卡的实现

那么如何将菜单和选项卡联动起来呢？实现的效果为

[1] 功能需求

[2] 功能实现

[3] 示例代码

利用easyui实现菜单节点和选项卡的联动效果相关推荐

最新文章

热门文章

利用easyui实现 菜单节点和选项卡的联动效果

以上是介绍了选项卡的实现

那么如何将菜单和选项卡联动起来呢？实现的效果为

[1] 功能需求

[2] 功能实现

[3] 示例代码

利用easyui实现 菜单节点和选项卡的联动效果相关推荐

最新文章

热门文章

利用easyui实现菜单节点和选项卡的联动效果

利用easyui实现菜单节点和选项卡的联动效果相关推荐