【EasyUI+MVC-搭建後臺框架】
阿新 • • 發佈：2019-01-10
<body class="easyui-layout" id="cc"> @*頭部區域*@ <div data-options="region:'north',border:false" style="height: 80px; padding: 10px; background-color: #2d3e50;color:#c7c7c7;"> <div style="float:left;height:50px;padding:0px;margin:0px;"> <div style="height:24px;width:120px;border-bottom:1px solid #c4c4c4;font-size:18px;"> GM.Authority </div> <a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'" style="color:#c7c7c7;margin-top:2px;">修改主題</a> </div> <div style="height:50px;width:800px;"> </div> </div> @*隱藏的導航欄*@ <div data-options="region:'west',split:true,collapsed:true, hideExpandTool: true, expandMode: null, hideCollapsedContent: false, collapsedSize: 120, collapsedContent: function(){ return $('#titlebar'); } " title="導航欄" style="width: 119px;"> <div class="easyui-accordion"> <div title="站點管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <ul style="padding: 0px; margin: 0px;"> <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" onclick="javascript: AddTab('站點配置', '/SiteInfo/Index')">站點配置</a></li> <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" onclick="javascript: AddTab('功能配置', '/UrlInfo/Index')">功能配置</a></li> </ul> </div> <div title="部門管理" data-options="iconCls:'icon-help'" style="padding:10px;"> <ul style="padding: 0px; margin: 0px;"> <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" onclick="javascript: AddTab('部門配置', '/Department/Index')">部門配置</a></li> </ul> </div> <div title="職位管理" data-options="iconCls:'icon-search'" style="padding:10px;"> </div> <div title="使用者管理" data-options="iconCls:'icon-search'" style="padding:10px;"> </div> <div title="許可權管理" data-options="iconCls:'icon-search'" style="padding:10px;"> </div> </div> </div> @*右邊區域*@ @*<div data-options="region:'east',split:true,collapsed:true,title:'其他'" style="width:100px;">east region</div>*@ @*底部區域*@ <div data-options="region:'south',border:false" style="height: 20px; background:#712369;">底部</div> @*中間操作區域*@ <div data-options="region:'center',title:'展示區'"> <div class="easyui-tabs" style="width:100%;height:100%" id="tabs"> <div title="主頁" style="padding:10px"> <p>歡迎來到許可權後臺管理系統！</p> <p>管理員：xxx</p> @*<a href="javascript:void(0)" class="easyui-linkbutton" onclick="topCenter('ok')">TopCenter</a>*@ </div> </div> </div> @*導航欄*@ <div id="titlebar" style="padding:2px;"> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'layout-button-right'" onclick="$('#cc').layout('expand','west')">選單欄</a> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a> <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a> </div> @*主題*@ <div id="mm1" style="width:150px;"> <div onclick="changeTheme('metro');">metro</div> <div onclick="changeTheme('metro-blue');">metro-blue</div> <div onclick="changeTheme('metro-gray');">metro-gray</div> <div onclick="changeTheme('metro-green');">metro-green</div> <div onclick="changeTheme('metro-orange');">metro-orange</div> <div onclick="changeTheme('metro-red');">metro-red</div> <div class="menu-sep"></div> <div onclick="changeTheme('black');">black</div> <div onclick="changeTheme('bootstrap');">bootstrap</div> <div onclick="changeTheme('default');">default</div> <div onclick="changeTheme('gray');">gray</div> <div onclick="changeTheme('material');">material</div> <div class="menu-sep"></div> <div onclick="changeTheme('ui-cupertino');">ui-cupertino</div> <div onclick="changeTheme('ui-dark-hive');">ui-dark-hive</div> <div onclick="changeTheme('ui-pepper-grinder');">ui-pepper-grinder</div> <div onclick="changeTheme('ui-sunny');">ui-sunny</div> </div> @*指令碼*@ <script type="text/javascript"> $(function () { //讀取easyuiThemeName Cookie var ThreadCookie = getCookie("themeName"); if (ThreadCookie != "") { changeTheme(ThreadCookie) };//LoadThread }); //提示框 function topCenter(val,time) { $.messager.show({ title: '友情提示！', msg: val, timeout: time, showType: 'slide', style: { right: '', bottom: '', top: 80 } }); }; //載入開始 function ajaxLoading() { $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body"); $("<div class=\"datagrid-mask-msg\"></div>").html("正在處理，請稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 }); }; //載入結束 function ajaxLoadEnd() { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); }; //新增選項卡 function AddTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title: subtitle, href: url, closable: true, width: $('#mainPanle').width() - 10, height: $('#mainPanle').height() - 10 }); } else { $('#tabs').tabs('select', subtitle); } TabClose(); } function TabClose() { $(".tab-inner").dblclick(function () { var subtitle = $(this).children("span").text(); $('#tabs').tabs('close', subtitle) }) } //切換主題 changeTheme = function (themeName) { var $easyuiTheme = $('#easyuiTheme'); var url = $easyuiTheme.attr('href'); var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css'; $easyuiTheme.attr('href', href); var $iframe = $('iframe'); if ($iframe.length > 0) { for (var i = 0; i < $iframe.length; i++) { var ifr = $iframe[i]; $(ifr).contents().find('#easyuiTheme').attr('href', href); } } setCookie("themeName", themeName, 7) //友情提示 topCenter("當前主題：" + themeName, 1000); }; //設定cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); var expires = "expires=" + d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; } //獲取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length, c.length); } return ""; } </script> </body>