後臺簡單介面模板
阿新 • • 發佈：2019-01-09
效果圖
html： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>後臺介面模板</title> <link rel="stylesheet" type="text/css" href="css/easyui.css"> <link rel="stylesheet" href="css/index.css"> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <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]--> <script src="js/index.js"></script> </head> <body class="easyui-layout"> <div id="cc" class="fts-zt-container easyui-layout"> <!--結構--> <!--頂部導航欄--> <div class="top-nav-header" region="north" split="false" > <!--導航條左側--> <div class="nav-left"> <div class="left-item-1"> <span> <img id="logo-icon" src="images/blocks.gif" /> <span>此處放置圖示logo</span> </span> </div> </div> <!--導航條右側--> <div class="nav-right"> <div class="right-item-1"> <ul id="background-switch"> <li class="cur"></li> <li></li> <li></li> <li></li> <li></li> </ul> <div> <span>已登入，歡迎你！小明</span> <span>|</span> <span>切換城市</span> <span>|</span> <span> <span>設定</span> <div class="setting-function"> <ul> li></li> <li></li> <li></li> <li></li> </ul> </div> </span> <span>|</span> <a href="#" id="loginOut">登出</a> </div> </div> </div> </div> <!--中間佈局 顯示內容--> <div region="center" class="center-cnt-side" > <div class="easyui-tabs" fit="true" border="false" id="tabs"> <div title=" 首頁 "> 系統首頁顯示 </div> </div> </div> <!--左側選單--> <div region="west" class="west" title="主選單"> <ul class="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> </div> </body> </html>自定義樣式css
#background-switch li:nth-child(4) {background: #eee5dd;} #background-switch li:nth-child(5) {background: #0aadee;} #background-switch li.cur {border-style:inset;} .setting-function {position: absolute;width: 300px;height: 300px;background: red;} /*左側選單*/ .west{width:15%;padding:10px;height: 300px;} /*中間內容*/ .center-cnt-side {width: 1140px;height: 165px;}js：
$(function () { $("#background-switch li").click(function () { $(".top-nav-header").css("background", $(this).css("background")); $("body").css("background", $(this).css("background")); $(this).css("background") $(this).addClass("cur"); $(this).sibling().addClass("cur"); }); });/** * Created by Founder007 on 2018/07/23. * 詳情請瀏覽： https://www.cnblogs.com/fly_dragon/p/9186734.html */ $(function () { //動態選單資料----一鍵建立所有資料來源 var treeData = [{ id: 1, text : "選單", state : "closed", children : [{ text : "一級選單1", attributes : { url : "test.html" } }, { text : "一級選單2", attributes : { url : "" } }, { 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 : "test.html" } } ] } ] }] },{ id: 2, text : "使用者許可權管理", state : "closed", children : [{ text : "使用者資訊", attributes : { url : "test.html" } }, { text : "修改密碼", attributes : { url : "" } }, { text : "設定", 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 : "test.html" } } ] } ] } ] }]; //例項化樹形選單---直接把所有資料來源賦值給例項化tree $("div.west .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]); } } });
目錄結構
