帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery+easyui树形菜单打开多个选项卡代码

帝国模板之家 2020-10-11 网页特效 评论

这是一款基于jQuery easyui.js制作多级树形菜单+右侧多个选项卡显示,适用于后台页面模板代码。

html代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script class="jsbin" src="js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!--[if IE]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .west{
    width:200px;
    padding:10px;
  }
  .north{
    height:30px;
  }
</style>
</head>
<body class="easyui-layout">
<div region="north" split="true" border="false" style="overflow: hidden; height: 30px;
        background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; font-family: Verdana, 微软雅黑,黑体">
  <span style="float:right; padding-right:20px;" class="head">
    欢迎 测柜员
    <a href="#" id="loginOut">安全退出</a>
  </span>
  <span style="padding-left:10px; font-size: 16px; ">
    <img src="images/blocks.gif" width="20" height="20" align="absmiddle" /> 实时报表系统
  </span>
</div>
  <div region="center" title="">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
      <div title="首页"></div>
    </div>
  </div>
  <div region="west" class="west" title="菜单">
    <ul id="tree"></ul>
  </div>
  
  <div id="tabsMenu" class="easyui-menu" style="width:120px;">  
    <div name="close">关闭</div>  
    <div name="Other">关闭其他</div>  
    <div name="All">关闭所有</div>
  </div>  
</body>
</html>

主要js代码如下:

$(function () {
    //动态菜单数据
    var treeData = [{
        text : "菜单",
        state : "closed",
        children : [{
            text : "数据表格",
            state : "",
            attributes : {
                url : "http://www.baidu.com"
            }
        }, {
            text : "一级菜单2",
            attributes : {
                url : "http://www.baidu.com"
            }
        }, {
            text : "一级菜单3",
            state : "closed",
            children : [{
                text : "二级菜单1",
                attributes : {
                    url : ""
                }
            }, {
                text : "二级菜单2",
                attributes : {
                    url : ""
                }
            }, {
                text : "一级菜单3",
                state : "closed",
                children : [{
                    text : "二级菜单1",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "二级菜单2",
                    attributes : {
                        url : ""
                    }
                }, {
                    text : "三级菜单3",
                    attributes : {
                        url : ""
                    }
                }
                ]
            }
            ]
        }
        ]
    }
    ];

    //实例化树形菜单
    $("#tree").tree({
        data : treeData,
        lines : true,
        onClick : function (node) {
            if (node.attributes) {
                Open(node.text, node.attributes.url);
            }
        }
    });
    //在右边center区域打开菜单,新增tab
    function Open(text, url) {
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';

        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : content
            });
        }
    }

    //绑定tabs的右键菜单
    $("#tabs").tabs({
        onContextMenu : function (e, title) {
            e.preventDefault();
            $('#tabsMenu').menu('show', {
                left : e.pageX,
                top : e.pageY
            }).data("tabTitle", title);
        }
    });

    //实例化menu的onClick事件
    $("#tabsMenu").menu({
        onClick : function (item) {
            CloseTab(this, item.name);
        }
    });

    //几个关闭事件的实现
    function CloseTab(menu, type) {
        var curTabTitle = $(menu).data("tabTitle");
        var tabs = $("#tabs");

        if (type === "close") {
            tabs.tabs("close", curTabTitle);
            return;
        }

        var allTabs = tabs.tabs("tabs");
        var closeTabsTitle = [];

        $.each(allTabs, function () {
            var opt = $(this).panel("options");
            if (opt.closable && opt.title != curTabTitle && type === "Other") {
                closeTabsTitle.push(opt.title);
            } else if (opt.closable && type === "All") {
                closeTabsTitle.push(opt.title);
            }
        });

        for (var i = 0; i < closeTabsTitle.length; i++) {
            tabs.tabs("close", closeTabsTitle[i]);
        }
    }
});
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言