一.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. js常用函数

    日期时间函数(需要用变量调用): var c=new Date; c.getDate(); document.write(c) //获取当前时间 var c=new Date(); c.getTime ...

  2. [Spring框架]Spring AOP基础入门总结一.

    前言:前面已经有两篇文章讲了Spring IOC/DI 以及 使用xml和注解两种方法开发的案例, 下面就来梳理一下Spring的另一核心AOP. 一, 什么是AOP 在软件业,AOP为Aspect ...

  3. java 类之间的关系

    一.继承 二.实现 三.组合

  4. [java] 找出字符串中出现最多的字符和出现的次数

    逛园子看到一童鞋做的华为上机题目,写来好长的代码,懒得看,感觉不可能这么难,于是动手敲了下. import java.util.Scanner; public class StringTest { / ...

  5. android TextView 文字垂直的设置

    <TextView android:id="@+id/tv_status" android:layout_width="wrap_content" and ...

  6. vc++用ADO方式连接oracle问题

    今天装了个oracle客户端,准备写个访问远程oracle的程序.用的是vs2010,采用ADO的连接方法连接oracle,结果运行的时候总是报下面的错: 从提示可以看出是没有找到OraOLEDBup ...

  7. Twitter Storm安装配置（Ubuntu系统）单机版

    要使用storm首先要安装以下工具:JDK.Python.zookeeper.zeromq.jzmq.storm (注:各个模块都是独立的,如果安装失败或者卡顿可以单独百度某个模块的安装,都是可以的. ...

  8. Java多线程系列--“JUC集合”10之 ConcurrentLinkedQueue

    概要 本章对Java.util.concurrent包中的ConcurrentHashMap类进行详细的介绍.内容包括:ConcurrentLinkedQueue介绍ConcurrentLinkedQ ...

  9. 基于@AspectJ配置Spring AOP之一--转

    原文地址:http://tech.it168.com/j/2007-08-30/200708302209432.shtml 概述 在低版本Spring中定义一个切面是比较麻烦的,需要实现特定的接口,并 ...

  10. HTML5移动Web开发（七）——通过界面图标启动Web应用

    现在我们要使用手机上某个应用时,通过点击屏幕上的图标就可以运行.但是对基于HTML的Web应用来说,运行起来就比较麻烦了,用户必须先打开浏览器,然后访问想使用的应用程序站点.现在我们想把一个指定的We ...