【EasyUI+MVC-搭建后台框架】

淩亂°似流年 2022-08-22 11:30 341阅读 0赞

一.EasyUI简介:

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。

官方网站: http://www.jeasyui.com/

二.下载EasyUI包搭建后台框架

下载最新的EasyUI包: http://www.jeasyui.com/download/index.php

20160527124443958

下载最新的Easyui主题包: http://www.jeasyui.com/extension/themes.php

三.新建.NET MVC Web项目

新建一个MVC的Web应用程序,将下载的EasyUI包,和主题包解压,复制到项目目录:

20160527125859687

新建控制器Home,添加视图页Index。head部分代码如下:

  1. <head>
  2. <meta name="viewport" content="width=device-width" />
  3. <title>Index</title>
  4. @*主题*@
  5. <link id="easyuiTheme" href="~/Content/jquery-easyui-1.4.5/themes/metro/easyui.css" rel="stylesheet" />
  6. <link href="~/Content/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" />
  7. <link href="~/Content/jquery-easyui-1.4.5/themes/color.css" rel="stylesheet" />
  8. <link href="~/Content/jquery-easyui-1.4.5/demo/demo.css" rel="stylesheet" />
  9. <script src="~/Content/jquery-easyui-1.4.5/jquery.min.js"></script>
  10. <script src="~/Content/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
  11. <style type="text/css">
  12. .fm {
  13. margin: 0;
  14. padding: 10px 30px;
  15. }
  16. .ftitle {
  17. font-size: 14px;
  18. font-weight: bold;
  19. padding: 5px 0;
  20. margin-bottom: 10px;
  21. border-bottom: 1px solid #ccc;
  22. }
  23. .fitem {
  24. margin-bottom: 5px;
  25. }
  26. .fitem label {
  27. display: inline-block;
  28. width: 80px;
  29. }
  30. .fitem input {
  31. width: 160px;
  32. }
  33. </style>
  34. </head>

body部分代码:

  1. <body class="easyui-layout" id="cc">
  2. @*头部区域*@
  3. <div data-options="region:'north',border:false" style="height: 80px; padding: 10px; background-color: #2d3e50;color:#c7c7c7;">
  4. <div style="float:left;height:50px;padding:0px;margin:0px;">
  5. <div style="height:24px;width:120px;border-bottom:1px solid #c4c4c4;font-size:18px;">
  6. GM.Authority
  7. </div>
  8. <a href="#" class="easyui-splitbutton" data-options="menu:'#mm1',iconCls:'icon-edit'" style="color:#c7c7c7;margin-top:2px;">修改主题</a>
  9. </div>
  10. <div style="height:50px;width:800px;">
  11. </div>
  12. </div>
  13. @*隐藏的导航栏*@
  14. <div data-options="region:'west',split:true,collapsed:true,
  15. hideExpandTool: true,
  16. expandMode: null,
  17. hideCollapsedContent: false,
  18. collapsedSize: 120,
  19. collapsedContent: function(){
  20. return $('#titlebar');
  21. }
  22. " title="导航栏" style="width: 119px;">
  23. <div class="easyui-accordion">
  24. <div title="站点管理" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
  25. <ul style="padding: 0px; margin: 0px;">
  26. <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('站点配置', '/SiteInfo/Index')">站点配置</a></li>
  27. <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('功能配置', '/UrlInfo/Index')">功能配置</a></li>
  28. </ul>
  29. </div>
  30. <div title="部门管理" data-options="iconCls:'icon-help'" style="padding:10px;">
  31. <ul style="padding: 0px; margin: 0px;">
  32. <li style=" margin:4px 12px;"><a href="#" style="list-style:none;text-decoration:none;" οnclick="javascript: AddTab('部门配置', '/Department/Index')">部门配置</a></li>
  33. </ul>
  34. </div>
  35. <div title="职位管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  36. </div>
  37. <div title="用户管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  38. </div>
  39. <div title="权限管理" data-options="iconCls:'icon-search'" style="padding:10px;">
  40. </div>
  41. </div>
  42. </div>
  43. @*右边区域*@
  44. @*<div data-options="region:'east',split:true,collapsed:true,title:'其他'" style="width:100px;">east region</div>*@
  45. @*底部区域*@
  46. <div data-options="region:'south',border:false" style="height: 20px; background:#712369;">底部</div>
  47. @*中间操作区域*@
  48. <div data-options="region:'center',title:'展示区'">
  49. <div class="easyui-tabs" style="width:100%;height:100%" id="tabs">
  50. <div title="主页" style="padding:10px">
  51. <p>欢迎来到权限后台管理系统!</p>
  52. <p>管理员:xxx</p>
  53. @*<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="topCenter('ok')">TopCenter</a>*@
  54. </div>
  55. </div>
  56. </div>
  57. @*导航栏*@
  58. <div id="titlebar" style="padding:2px;">
  59. <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'layout-button-right'" οnclick="$('#cc').layout('expand','west')">菜单栏</a>
  60. <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-picture',size:'large',iconAlign:'top'">Picture</a>
  61. <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-shapes',size:'large',iconAlign:'top'">Shapes</a>
  62. <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-smartart',size:'large',iconAlign:'top'">SmartArt</a>
  63. <a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%" data-options="iconCls:'icon-large-chart',size:'large',iconAlign:'top'">Chart</a>
  64. </div>
  65. @*主题*@
  66. <div id="mm1" style="width:150px;">
  67. <div οnclick="changeTheme('metro');">metro</div>
  68. <div οnclick="changeTheme('metro-blue');">metro-blue</div>
  69. <div οnclick="changeTheme('metro-gray');">metro-gray</div>
  70. <div οnclick="changeTheme('metro-green');">metro-green</div>
  71. <div οnclick="changeTheme('metro-orange');">metro-orange</div>
  72. <div οnclick="changeTheme('metro-red');">metro-red</div>
  73. <div class="menu-sep"></div>
  74. <div οnclick="changeTheme('black');">black</div>
  75. <div οnclick="changeTheme('bootstrap');">bootstrap</div>
  76. <div οnclick="changeTheme('default');">default</div>
  77. <div οnclick="changeTheme('gray');">gray</div>
  78. <div οnclick="changeTheme('material');">material</div>
  79. <div class="menu-sep"></div>
  80. <div οnclick="changeTheme('ui-cupertino');">ui-cupertino</div>
  81. <div οnclick="changeTheme('ui-dark-hive');">ui-dark-hive</div>
  82. <div οnclick="changeTheme('ui-pepper-grinder');">ui-pepper-grinder</div>
  83. <div οnclick="changeTheme('ui-sunny');">ui-sunny</div>
  84. </div>
  85. @*脚本*@
  86. <script type="text/javascript">
  87. $(function () {
  88. //读取easyuiThemeName Cookie
  89. var ThreadCookie = getCookie("themeName");
  90. if (ThreadCookie != "") { changeTheme(ThreadCookie) };//LoadThread
  91. });
  92. //提示框
  93. function topCenter(val,time) {
  94. $.messager.show({
  95. title: '友情提示!',
  96. msg: val,
  97. timeout: time,
  98. showType: 'slide',
  99. style: {
  100. right: '',
  101. bottom: '',
  102. top: 80
  103. }
  104. });
  105. };
  106. //加载开始
  107. function ajaxLoading() {
  108. $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
  109. $("<div class=\"datagrid-mask-msg\"></div>").html("正在处理,请稍候。。。").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 });
  110. };
  111. //加载结束
  112. function ajaxLoadEnd() {
  113. $(".datagrid-mask").remove();
  114. $(".datagrid-mask-msg").remove();
  115. };
  116. //添加选项卡
  117. function AddTab(subtitle, url) {
  118. if (!$('#tabs').tabs('exists', subtitle)) {
  119. $('#tabs').tabs('add', {
  120. title: subtitle,
  121. href: url,
  122. closable: true,
  123. width: $('#mainPanle').width() - 10,
  124. height: $('#mainPanle').height() - 10
  125. });
  126. } else {
  127. $('#tabs').tabs('select', subtitle);
  128. }
  129. TabClose();
  130. }
  131. function TabClose() {
  132. $(".tab-inner").dblclick(function () {
  133. var subtitle = $(this).children("span").text();
  134. $('#tabs').tabs('close', subtitle)
  135. })
  136. }
  137. //切换主题
  138. changeTheme = function (themeName) {
  139. var $easyuiTheme = $('#easyuiTheme');
  140. var url = $easyuiTheme.attr('href');
  141. var href = url.substring(0, url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
  142. $easyuiTheme.attr('href', href);
  143. var $iframe = $('iframe');
  144. if ($iframe.length > 0) {
  145. for (var i = 0; i < $iframe.length; i++) {
  146. var ifr = $iframe[i];
  147. $(ifr).contents().find('#easyuiTheme').attr('href', href);
  148. }
  149. }
  150. setCookie("themeName", themeName, 7)
  151. //友情提示
  152. topCenter("当前主题:" + themeName, 1000);
  153. };
  154. //设置cookie
  155. function setCookie(cname, cvalue, exdays) {
  156. var d = new Date();
  157. d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  158. var expires = "expires=" + d.toUTCString();
  159. document.cookie = cname + "=" + cvalue + "; " + expires;
  160. }
  161. //获取cookie
  162. function getCookie(cname) {
  163. var name = cname + "=";
  164. var ca = document.cookie.split(';');
  165. for (var i = 0; i < ca.length; i++) {
  166. var c = ca[i];
  167. while (c.charAt(0) == ' ') c = c.substring(1);
  168. if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
  169. }
  170. return "";
  171. }
  172. </script>
  173. </body>

四.布置工作区域

20160527130105969

五.点击菜单栏:进行来回切换的切换

20160527130237153

六.更换主题:消息提示Message自动退出

20160527130517642

七.向工作区动态添加Tab选项卡

20160527130921992

发表评论

表情:
评论列表 (有 0 条评论,341人围观)

还没有评论,来说两句吧...

相关阅读