上一篇教程《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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发4- 后台模板html页面创建的更多相关文章

  1. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

    上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里 ...

  2. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作

    /****** Object: 新闻表 Script Date: 2017/9/2 星期六 15:11:12 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENT ...

  3. asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发3-登录模块开发

    进行本文之前需要在数据库用户表里面增加一条用户数据,直接手动添加即可,未安全考虑密码一定要使用Md5加密后的,这里提供666666的Md5密文为(c831b04de153469d),本文完成登录模块的 ...

  4. [转]开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  5. 开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo（转）

    热衷于开源框架探索的我发现ASP.NET MVC与jQuery easyUI的组合很给力.由于原先一直受Ext JS框架的licence所苦恼,于是痛下决心寻找一个完全免费的js框架——easyUI. ...

  6. [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理

    原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...

  7. Swift游戏开发实战教程（霸内部信息大学）

    Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料. 本教程具体解说记忆配对 ...

  8. 微信小程序-云开发实战教程

    微信小程序-云开发实战教程 云函数,云存储,云数据库,云调用 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/gettin ...

  9. React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

    尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...

随机推荐

  1. Linux经常使用的命令(21) - find参数具体解释

    一．使用name选项: 文件名称选项是find命令最经常使用的选项.要么单独使用该选项,要么和其它选项一起使用.  能够使用某种文件名称模式来匹配文件,记住要用引號将文件名称模式引起来.  无论当前路 ...

  2. Linux Sed技巧

    删除行首空格 sed 's/^[ ]*//g' filename sed 's/^*//g' filename sed 's/^[[:space:]]*//g' filename 匹配行前或后添加空白 ...

  3. uwp - 上滑隐藏导航栏下滑显示

    原文:uwp - 上滑隐藏导航栏下滑显示 好久没写博客了,因为忙着工作.昨天周末填坑需要做一个上滑列表数据时隐藏导航栏下滑时显示的效果,下面分享一下我的做法,希望能给你带来帮助. 思路是通过判断滚动条 ...

  4. poj 3390 Print Words in Lines 动态规划

    意甲冠军: 给n每行长度和字符可放置最大数量字m,每一行产生值至(m-x)^2,x是一个字符上线人数(包含空话之间格).为了让所有的完成,产生的话值最小和. 分析: 动态规划非常重要的就是状态的定义, ...

  5. Expression.Blend.4 Chapter 图片和视频的使用

    原文:Expression.Blend.4 Chapter 图片和视频的使用 翻译的地方可能有错误,欢迎大家指正.但是里面每一个程序都是亲自测试过,并加了点自己的看法. 我翻译的是Expression ...

  6. wpf 绑定数据无法更新ui控件可能存在的问题

    BindingMode的枚举值有: ① OneWay ② TwoWay ③ OneTime:根据源端属性值设置目标属性值,之后的改变会被忽略,除非调用BindingExpression.UpdateT ...

  7. qt部分类释义

    如果测试错误,输出包含源码的警告信息 Q_ASSERT Qtime最后一次star()或restar()到现在的毫秒数 QTime::elapsed QMetaObject::invokeMethod ...

  8. sql xml 查询指定节点值，以及节点属性值

    SELECT   top 10  [HFMBDATA].query('(/Items/Item[@ID=''tbBryj''])').value('(//TextValue)[1]','nvarcha ...

  9. ApplicationCommands用于表示应用程序程序员经常遇到的常见命令，类似于ctrl+c

    在WPF中,许多控件都自动集成了固有的命令集.比如文本框TextBox就提供了复制(Copy),粘贴(Paste),裁切(Cut),撤消(Undo)和重做(Redo)命令等. WPF提供常用应用程序所 ...

  10. WPF中ItemsControl应用虚拟化时找到子元素的方法

    原文:WPF中ItemsControl应用虚拟化时找到子元素的方法  wpf的虚拟化技术会使UI的控件只初始化看的到的子元素, 而不是所有子元素都被初始化,这样会提高UI性能. 但是我们经常会遇到一个 ...