jQuery easyui后臺管理頁面tab布局樣式代碼



125 499 167



特效描述:后臺管理頁面 tab布局樣式,jQuery easyui簡單左右布局以及tab右鍵菜單實現

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui.css">

2. 引入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 src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script class="jsbin" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

3. HTML代碼

?<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .west{
    width:200px;
    padding:10px;
  }
  .north{
    height:100px;
  }
</style>
<script>
$(function () {
    //動態菜單數據
    var treeData = [{
            text : "菜單",
            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) {
        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : text
            });
        }
    }
    //綁定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>
</head>
<body class="easyui-layout">
  <div region="north" class="north" title="test">
    <h1>最簡單的左右結構實現,及tab的右鍵菜單實現,右鍵查看源碼</h1>
  </div>
  <div region="center" title="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
      <div title="首頁"></div>
    </div>
  </div>
  <div region="west" class="west" title="menu">
    <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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 收縮菜單 收縮導航 文本框 text文本框 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子