一.EasyUI简介：

jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
官方网站：http://www.jeasyui.com/ 

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

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

三.新建.NET MVC Web项目

新建一个MVC的Web应用程序，将下载的EasyUI包，和主题包解压，复制到项目目录：
新建控制器Home,添加视图页Index。head部分代码如下：
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    @*主题*@
    <link id="easyuiTheme" href="~/Content/jquery-easyui-1.4.5/themes/metro/easyui.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/themes/color.css" rel="stylesheet" />
    <link href="~/Content/jquery-easyui-1.4.5/demo/demo.css" rel="stylesheet" />
    <script src="~/Content/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script src="~/Content/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
     <style type="text/css">
        .fm {
            margin: ;
            padding: 10px 30px;
        }

        .ftitle {
            font-size: 14px;
            font-weight: bold;
            padding: 5px ;
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
        }

        .fitem {
            margin-bottom: 5px;
        }

        .fitem label {
            display: inline-block;
            width: 80px;
        }

        .fitem input {
            width: 160px;
        }
    </style>
</head>

body部分代码：

<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: ,
                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:
                }
            });
        };

        //加载开始
        function ajaxLoading() {
            $("<div class=\"datagrid-mask\"></div>").css({ display: "block", width: "100%", height: $(window).height() }).appendTo("body");
            $() / , top: ($(window).height() - ) /  });
        };

        //加载结束
        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: $(,
                    height: $(
                });
            } 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');
            , url.indexOf('themes')) + 'themes/' + themeName + '/easyui.css';
            $easyuiTheme.attr('href', href);
            var $iframe = $('iframe');
            ) {
                ; i < $iframe.length; i++) {
                    var ifr = $iframe[i];
                    $(ifr).contents().find('#easyuiTheme').attr('href', href);
                }
            }
            setCookie()
            //友情提示
            topCenter();
        };

        //设置cookie
        function setCookie(cname, cvalue, exdays) {
            var d = new Date();
            d.setTime(d.getTime() + (exdays *  *  *  * ));
            var expires = "expires=" + d.toUTCString();
            document.cookie = cname + "=" + cvalue + "; " + expires;
        }

        //获取cookie
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            ; i < ca.length; i++) {
                var c = ca[i];
                ) == );
                ) return c.substring(name.length, c.length);
            }
            return "";
        }
    </script>
</body>

四.布置工作区域

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

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

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

EasyUI+MVC-搭建后台框架的更多相关文章

  1. asp.net -mvc框架复习（10）-基于三层架构与MVC搭建项目框架

    一.三种模式比较 1.MVC框架(适合大型项目) (1).V视图 (网页部分) (2).M模型 (业务逻辑+数据访问+实体类) (3).C控制器 (介于M和V之间,起到引导作用) 2.三层架构 (1) ...

  2. SpringBoot+thymeleaf+security+vue搭建后台框架 基础篇（一）

    刚刚接触SpringBoot,说说踩过的坑,主要的还是要记录下来,供以后反省反省! 今天主要讲讲 thymeleaf+security 的搭建,SpringBoot的项目搭建应该比较简单,这里就不多说 ...

  3. 【原】jQuery easyUI 快速搭建前端框架

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

  4. 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架

    转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...

  5. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  6. ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  7. ASP.NET MVC搭建项目后台UI框架—7、统计报表

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...

  8. ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询

    ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...

  9. ASP.NET MVC搭建项目后台UI框架—2、菜单特效

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. sql基础知识：分页+排序

    Oracle的分页还真是挺恶心地,不像mysql直接Limit就搞定 select name from student limit 0,20; Oracle需要借助rownum实现: select * ...

  2. Atitit 项目培训与学校的一些思路总结

    Atitit 项目培训与学校的一些思路总结 1.1. Overview implet review  OIR学习大法1 1.2. "录取流程,对报名者唯一的要求是学习该项目所必须的先修知识和 ...

  3. Atitit.rsa密钥生成器的attilax总结

    Atitit.rsa密钥生成器的attilax总结 1.1. 密钥生成器 1 1.2. 生成固定的密钥 2 1.2.1. 设置或重置 SecureRandom 对象的随机数种子 2 1.3. 密钥结构 ...

  4. eclipse提交项目到github

    1.在https://github.com   new repository 2.在eclipse中new project  比如:Test项目 3.右击"Test"->Te ...

  5. jQuery UI AutoComplete的使用

    现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...

  6. 在configure distribution时遇到错误，不能打开sql agent

    今天在配置Distribution时,遇到一个错误,不能打开sql agent,详细错误信息如下: SQL Server blocked access to procedure 'dbo.sp_set ...

  7. 拓扑排序(三)之 Java详解

    前面分别介绍了拓扑排序的C和C++实现,本文通过Java实现拓扑排序. 目录 1. 拓扑排序介绍 2. 拓扑排序的算法图解 3. 拓扑排序的代码说明 4. 拓扑排序的完整源码和测试程序 转载请注明出处 ...

  8. Anliven - 有效阅读的方法

    讲方法,忌盲目. 阅读方法 做好眼前事 排除其他事项干扰,营造适合阅读的状态和环境,专注地投入阅读之中. 如果被一堆乱糟糟的事情烦扰,身心处于一个疲惫的状态,必然无法保持专注的阅读. 定性定量 每个人 ...

  9. 使用 CSS & jQuery 制作一款漂亮的多彩时钟

    大家可能见过各种各样的时钟效果,比如多年前非常流行的 Flash 制作的各种新奇的动画时钟,现在的 Web 开发者们又开始应用 CSS3 和 Canvas 等最新技术来实现.而今天这里要分享的这款漂亮 ...

  10. 坑人的微信新版支付(V3.3.6)

         现在微支付的需求越来越多,最近刚接到一个需要微支付的项目,于是身为程序猿的我拿到最新的微信支付接口文档(3.3.6)就开始研究微信支付.本以为应该跟支付宝差不多的感觉结果被坑了.恕在下无能, ...