头像

jQuery easyui左侧多级树形菜单打开选项卡页面

来源:http://phprr.com/show-406 a***n 2018-05-05 15:46:20浏览() 收藏

jQuery easyui点击左侧多级树形菜单右侧打开多个选项卡页面代码,常用于网站后台或会员管理中心。

jQuery easyui点击左侧多级树形菜单右侧打开多个选项卡页面代码,常用于网站后台或会员管理中心。
jQuery easyui左侧多级树形菜单打开选项卡页面
查看演示 下载资源: 1 下载资源 下载积分: 40 积分

1元=10积分 1元=1码币,全栈客服QQ357058607,在线充值

js代码

<script class="jsbin" src="js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript" src="js/jquery.easyui.min.js"></script> 
<script language="javascript"
$(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]); 
        } 
    } 
}); 
</script>



腾讯云服务器安全可靠高性能,多种配置供您选择

https://cloud.tencent.com/redirect.php?redirect=1001&cps_key=b685b398d3e704662203733b89accc52&from=console

阿里云服务器安全可靠高性能,多种配置供您选择

https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=geqqrf2n


最新交易
评论0
头像

评论后赠送5积分,下载出错或者资源有问题请联系全栈客服QQ 357058607

1 2