使用插件和纯JS实现在右边区域打开菜单新增tab

使用插件和纯JS实现在右边区域打开菜单新增tab

上面的就是初始的表，接下来我在点击“数据表格”的时候，它不会重新打开一个新的页面，是直接嵌套在首页的旁边。
先把框架给打好，获取框架的id，

<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>

引用插件：《注意：引用时要把路径改为自己本地的》

<script src="~/ifame/js/jquery-1.7.2.min.js"></script>
<link href="~/ifame/css/easyui.css" rel="stylesheet" />
<script src="~/ifame/js/jquery.easyui.min.js"></script>

然后开始编打js代码，先把左边的框架给打好，然后把路径放在左边的属性里，而现实在右边的窗口，是获取到“首页”外层的id，然后对id“tabs”进行新增和绑定，在实例化一下“tabsMenu”的点击事件（onclick）,这就是简单的描述。
代码：

 $(function () {
       //动态菜单数据
       var treeData = [{
       //第一个树形菜单
       text: "菜单",
       state: "closed",
       children: [{
            text: "数据表格",//子文件
            state: "",
            attributes: {
            url: "http://www.baidu.com"//页面路径
            }
         }, {
            text: "基础资料",//子文件
            attributes: {
            url: "https://daohang.qq.com/?fr=hmpage"
             }
           },
          ]
         }
       ];
     //实例化树形菜单
      $("#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>';//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]);
                }
            }
        });

效果图：