一.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. （数学）P、NP、NPC、NP hard问题

    概念定义: P问题:能在多项式时间内解决的问题: NP问题:(Nondeterministic Polynomial time Problem)不能在多项式时间内解决或不确定能不能在多项式时间内解决, ...

  2. PMP和PRINCE2

    首先先简单介绍一下,PMP是属于美国的项目管理知识体系.PRINCE2是属于英国项目体系. 美国的项目管理知识体系最主要的价值是把世界上所有跟项目管理相关的,不管是知识.最佳实践.工具技术,把它们汇总 ...

  3. EF架构~CodeFirst模型下的数据初始化

    回到目录 我为什么会来 在传统的大型系统设计中,数据库建模是个比开发更早的环节,先有数据库,然后是ORM模型,最后才是开发程序,而这种模型在EF出现后发生了转变,而且有可能将来会被code first ...

  4. 将http调用返回json中的有关中文的unicode转换为中文

    在http调用时获取到的json数据中文是乱码的解决方法: 中文转Unicode:HttpUtility.UrlEncodeUnicode(string str);转换后中文格式:"%uxx ...

  5. 读《编写可维护的javascript》笔记

    第一章 基本的格式化 缩进层级:推荐 tab:4; 换行:在运算符后面换行,第二行追加两个缩进: // Good: Break after operator, following line inden ...

  6. 【译】采用MVC模式创建一个简单的javascript App

    原文标题:Build A Simple Javascript App The MVC Way 作者:joshcrawmer4 翻译人:huansky 初次翻译,翻译的不好,还请见谅 JavaScrip ...

  7. HTML5横竖屏提示

    HTML代码: <div class="screen-prompt"></div> CSS判断代码: /*横竖屏提示*/ @media screen and ...

  8. java常用命令行指令

    javac 将java源文件编译成class字节码文件 javac HelloWorld.java java (1)运行class文件 java HelloWorld 注意java命令后面不要加.cl ...

  9. ASP.NET MVC在线人数统计

    在Global.asax.cs文件中代码: protected void Application_Start() { Application[; AreaRegistration.RegisterAl ...

  10. Docker如何为企业产生价值？

    一个 IT 系统大致可以分为: 应用程序 运行时平台(bin/framework/lib) 操作系统 硬件(基础设施) 开发人员的主要工作是应用程序的编码.构建.测试和发布,涉及应用程序和运行时平台这 ...