jquery easyui后台模板
生活随笔
收集整理的這篇文章主要介紹了
jquery easyui后台模板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上一篇教程《asp.net mvc+jquery easyui開發實戰教程之網站后臺管理系統開發3-登錄模塊開發》完成了本項目的登錄模塊，登錄后就需要進入后臺管理首頁了，需要準備一個后臺模板，本文主要講解如何創建這個后臺模板，本文創建的后臺模板不集成到項目內部，只是靜態html頁面。后臺模板是系統開發必須的，一般小公司有個3套后臺模板就夠用了。本項目后臺模板主要是jquery easyui插件創建的，不需要美工設計就可以創建出來，而且效果還可以，具體效果圖如下：
這個版面的缺點是，只能適應2層菜單級別的項目，如果項目包含3層以上級別菜單時需要將左側二級菜單改為樹形控件即可，這里不多介紹了。
整個模板除頂部需要使用Div+Css簡單設計外，其他部分都是easyui組件實現的。
一、創建前準備工作新建一個名為：EasyUiTemp的文件夾，里面包含Css、Images、Js文件夾和一個index.html文件，Css、Images、Js三個文件夾是一個網站包含的3個基本的目錄，分別用于存放樣式文件、圖片資源和腳本資源。
本模板中Css文件夾內主要放網頁基本css樣式文件（初始樣式文件必須的）、還有模板頭部樣式文件，Images文件夾放置Logo圖片，Js文件夾存放jquery和EasyUI類庫，jquery和EasyUI這倆類庫需要讀者自己下載，本文最后也提供資源下載鏈接。
最終項目目錄結構如下圖所示：
二、核心頁面代碼| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 | <!DOCTYPE html> <html> <head> ????<title>網站后臺模板</title> ????<meta charset="utf-8"> ????<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> ????<script src="Js/jquery-1.7.1.min.js"></script> ????<script src="Js/jquery.easyui.min.js" type="text/javascript"></script> ????<link href="Css/themes/default/easyui.css" rel="stylesheet" /> ????<link href="Css/themes/icon.css" rel="stylesheet" /> ????<link href="Css/Public.css" rel="stylesheet" /> ????<link href="Css/Index.css" rel="stylesheet" /> ????<script src="Js/ShowMyWindow.js"></script> ????<script type="text/javascript"> ????????function windowClose() { ????????????$('#myWindow').window('close'); ????????????$.messager.alert('提示信息', '密碼修改成功，請重新登錄！', 'info'); ????????????window.location.href = '/Login/AdminLogin'; ????????} ????????$(document).ready(function () { ????????????$('.easyui-accordion li a').click(function () { ????????????????var tabTitle = $(this).text();//tab標題 ????????????????var url = $(this).attr("href");//tab連接 ????????????????addTab(tabTitle, url); ????????????????$('.easyui-accordion li div').removeClass("selected"); ????????????????$(this).parent().addClass("selected"); ????????????}).hover(function () { ????????????????$(this).parent().addClass("hover"); ????????????}, function () { ????????????????$(this).parent().removeClass("hover"); ????????????}); ????????????function addTab(subtitle, url) { ????????????????if (!$('#tabs').tabs('exists', subtitle)) { ????????????????????$('#tabs').tabs('add', { ????????????????????????title: subtitle, ????????????????????????content: createFrame(url), ????????????????????????closable: true, ????????????????????????cache: true, ????????????????????????width: $('#mainPanle').width() - 10, ????????????????????????height: $('#mainPanle').height() - 26, ????????????????????????tools: [{ ????????????????????????????iconCls: 'icon-reload', ????????????????????????????handler: function () { ????????????????????????????????refreshTab(); ????????????????????????????} ????????????????????????}] ????????????????????}); ????????????????} else { ????????????????????$('#tabs').tabs('select', subtitle); ????????????????} ????????????????tabClose(); ????????????????tabCloseEven(); ????????????} ????????????//切換選項卡刷新 ????????????$('#tabs').tabs({ ????????????????onSelect: function (title, index) { ????????????????????refreshTab(); ????????????????} ????????????}); ????????????//刷新當前選項卡 ????????????function refreshTab() { ????????????????var currTab = self.parent.$('#tabs').tabs('getSelected'); //獲得當前tab ????????????????var url = $(currTab.panel('options').content).attr('src'); ????????????????if (url == undefined) url = "/Statistics/CountyStatistics"; ????????????????self.parent.$('#tabs').tabs('update', { ????????????????????tab: currTab, ????????????????????options: { ????????????????????????content: createFrame(url) ????????????????????} ????????????????}); ????????????} ????????????function createFrame(url) { ????????????????var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"? src="' + url + '" style="width:100%;height:100%;"></iframe>'; ????????????????return s; ????????????} ????????????function tabClose() { ????????????????/*雙擊關閉TAB選項卡*/ ????????????????$(".tabs-inner").dblclick(function () { ????????????????????var subtitle = $(this).children("span").text(); ????????????????????$('#tabs').tabs('close', subtitle); ????????????????}) ????????????????//綁定右鍵菜單 ????????????????$(".tabs-inner").bind('contextmenu', function (e) { ????????????????????$('#mm').menu('show', { ????????????????????????left: e.pageX, ????????????????????????top: e.pageY, ????????????????????}); ????????????????????var subtitle = $(this).children("span").text(); ????????????????????$('#mm').data("currtab", subtitle); ????????????????????return false; ????????????????}); ????????????} ????????????//綁定右鍵菜單事件 ????????????function tabCloseEven() { ????????????????//刷新 ????????????????$('#mm-refresh').click(function () { ????????????????????refreshTab(); ????????????????}) ????????????????//關閉當前 ????????????????$('#mm-tabclose').click(function () { ????????????????????var currtab_title = $('#mm').data("currtab"); ????????????????????$('#tabs').tabs('close', currtab_title); ????????????????}) ????????????????//全部關閉 ????????????????$('#mm-tabcloseall').click(function () { ????????????????????$('.tabs-inner span').each(function (i, n) { ????????????????????????var t = $(n).text(); ????????????????????????$('#tabs').tabs('close', t); ????????????????????}); ????????????????}); ????????????????//關閉除當前之外的TAB ????????????????$('#mm-tabcloseother').click(function () { ????????????????????var currtab_title = $('#mm').data("currtab"); ????????????????????$('.tabs-inner span').each(function (i, n) { ????????????????????????var t = $(n).text(); ????????????????????????if (t != currtab_title) ????????????????????????????$('#tabs').tabs('close', t); ????????????????????}); ????????????????}); ????????????????//關閉當前右側的TAB ????????????????$('#mm-tabcloseright').click(function () { ????????????????????var nextall = $('.tabs-selected').nextAll(); ????????????????????if (nextall.length == 0) { ????????????????????????//msgShow('系統提示','后邊沒有啦~~','error'); ????????????????????????//alert('后邊沒有啦~~'); ????????????????????????return false; ????????????????????} ????????????????????nextall.each(function (i, n) { ????????????????????????var t = $('a:eq(0) span', $(n)).text(); ????????????????????????$('#tabs').tabs('close', t); ????????????????????}); ????????????????????return false; ????????????????}); ????????????????//關閉當前左側的TAB ????????????????$('#mm-tabcloseleft').click(function () { ????????????????????var prevall = $('.tabs-selected').prevAll(); ????????????????????if (prevall.length == 0) { ????????????????????????//alert('到頭了，前邊沒有啦~~'); ????????????????????????return false; ????????????????????} ????????????????????prevall.each(function (i, n) { ????????????????????????var t = $('a:eq(0) span', $(n)).text(); ????????????????????????$('#tabs').tabs('close', t); ????????????????????}); ????????????????????return false; ????????????????}); ????????????????//退出 ????????????????$("#mm-exit").click(function () { ????????????????????$('#mm').menu('hide'); ????????????????}) ????????????} ????????????$("#exitSystem").click(function () { ????????????????window.location.href = "/Login/AdminLoginOff"; ????????????}); ????????????$("#modifyPassSystem").click(function () { ????????????????showMyWindow("修改密碼", "http://www.baidu.com", 500, 350); ????????????}); ????????}); ????</script> </head> <body> ????<body class="easyui-layout"> ????<div class="clear"></div> ????<div region="north" border="true" split="true" style="overflow: hidden; height: 80px;"> ????????<div class="top"> ????????????<div class="button-tools"> ????????????????<div class="exit-system"><a id="exitSystem" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">安全退出</a></div> ????????????????<div class="exit-system"><a id="modifyPassSystem" target="mainFrame" class="easyui-linkbutton" data-options="iconCls:'icon-key-delete'">修改密碼</a></div> ????????????????<div class="exit-system"> ????????????????????<div class="curUserInfo">當前登錄用戶：Admin</div> ????????????????</div> ????????????</div> ????????</div> ????</div> ????<div region="south" border="true" split="true" style="overflow: hidden; height: 40px;"> ????????<div class="footer">版權所有：<a href="http://www.kwstu.com">山東極點軟件開發有限公司</a></div> ????</div> ????<div region="west" split="true" title="導航菜單" style="width: 200px;"> ????????<div id="menu-content" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;"> ????????????<div title="文章管理" iconcls="icon-folder-page" style="overflow: auto; padding: 0px;"> ????????????????????<ul> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">文章管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">欄目管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">專題管理</span></a></div> ????????????????????????</li> ????????????????????</ul> ????????????????</div> ????????????????<div title="會員管理" iconcls="icon-folder-page" style="overflow: auto; padding: 0px;"> ????????????????????<ul> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">會員管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">訂單管理</span></a></div> ????????????????????????</li> ????????????????????</ul> ????????????????</div> ????????????????<div title="系統管理" iconcls="icon-folder-page" style="overflow: auto; padding: 0px;"> ????????????????????<ul> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">友情鏈接</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">用戶管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">角色管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">日志管理</span></a></div> ????????????????????????</li> ????????????????????????<li> ????????????????????????????<div class=""><a target="mainFrame" href="http://www.baidu.com"><span class="defined-icon icon-chart-organisation"> </span><span class="nav">預約參觀</span></a></div> ????????????????????????</li> ????????????????????</ul> ????????????????</div> ????????</div> ????</div> ????<div id="mainPanle" region="center" style="overflow: hidden;"> ????????<div id="tabs" class="easyui-tabs" fit="true" border="false"> ????????</div> ????????<div id="mm" class="easyui-menu" style="width: 150px;"> ????????????<div id="mm-refresh">刷新</div> ????????????<div class="menu-sep"></div> ????????????<div id="mm-tabclose">關閉</div> ????????????<div id="mm-tabcloseall">全部關閉</div> ????????????<div id="mm-tabcloseother">除此之外全部關閉</div> ????????????<div class="menu-sep"></div> ????????????<div id="mm-tabcloseright">當前頁右側全部關閉</div> ????????????<div id="mm-tabcloseleft">當前頁左側全部關閉</div> ????????????<div class="menu-sep"></div> ????????????<div id="mm-exit">退出</div> ????????</div> ????</div> </body> </html> |
點擊下載本教程源碼
技術交流QQ：806693619
轉載于:https://www.cnblogs.com/kwstu2018/p/9656111.html
總結
以上是生活随笔為你收集整理的jquery easyui后台模板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： redux中间件的用法
- 下一篇： EevExpress中XtraGrid常