EasyUI+MVC-搭建后台框架
一.EasyUI简介：
jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。
二.下载EasyUI包搭建后台框架
下载最新的EasyUI包：http://www.jeasyui.com/download/index.php
下载最新的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-搭建后台框架的更多相关文章
- asp.net -mvc框架复习（10）-基于三层架构与MVC搭建项目框架
一.三种模式比较 1.MVC框架(适合大型项目) (1).V视图 (网页部分) (2).M模型 (业务逻辑+数据访问+实体类) (3).C控制器 (介于M和V之间,起到引导作用) 2.三层架构 (1) ...
- SpringBoot+thymeleaf+security+vue搭建后台框架 基础篇（一）
刚刚接触SpringBoot,说说踩过的坑,主要的还是要记录下来,供以后反省反省! 今天主要讲讲 thymeleaf+security 的搭建,SpringBoot的项目搭建应该比较简单,这里就不多说 ...
- 【原】jQuery easyUI 快速搭建前端框架
jQueryEasyUI jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要 ...
- 【SSH网上商城项目实战03】使用EasyUI搭建后台页面框架
转自:https://blog.csdn.net/eson_15/article/details/51312490 前面两节,我们整合了SSH并且抽取了service和action部分的接口,可以说基 ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—4、tab多页签支持
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
- ASP.NET MVC搭建项目后台UI框架—7、统计报表
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NET M ...
- ASP.NET MVC搭建项目后台UI框架—11、自动加载下拉框查询
ASP.NET MVC搭建项目后台UI框架—1.后台主框架 需求:在查询记录的时候,输入第一个字,就自动把以这个字开头的相关记录查找出来,输入2个字就过滤以这两个子开头的记录,依次类推. 突然要用到这 ...
- ASP.NET MVC搭建项目后台UI框架—2、菜单特效
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- 每天一个linux命令（61）：wget命令
Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP ...
- 60,000毫秒内对Linux的性能诊断效的方法
转载于:http://www.itxuexiwang.com/a/liunxjishu/2016/0225/168.html?1456484140 60,000 毫秒内对 Linux 的性能诊断 当你 ...
- paip.2013年技术趋势以及热点 v2.0 cae
paip.2013年技术趋势以及热点 v2.0 cae HTML5 多核编程 物联网 可穿戴计算设备 3. 物联网 无论是M2M(机器对机器)通信应用,还是NFC(进距离通信)技术,都是物联网的组成部 ...
- TextView 显示内容时出现 ArrayIndexOutOfBoundsException 的解决方法(Android 4.1)
很久以前做的表情输入及显示,用的系统的SpannableString,完成后的代码在其他版本的Android手机上没有问题,但是在在4.1和4.1.1的手机上显示时,有概率出现程序崩溃的问题. 下面是 ...
- 实用的开放源码的Excel导入导出类库 CarlosAg ExcelXmlWriter
做企业管理软件经常会遇到要把数据导出成EXCEL格式,目前市面上有很多工具类库可以实现此功能.CarlosAg ExcelXmlWriter是其中之一,它绿色小巧,免安装,又源码开放,我在项目中一直以 ...
- Geometry Surface of OpenCascade BRep
Geometry Surface of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲面是参数表示的曲面 ,在边界表示中其数据存在于BRep_TFace中, ...
- 深入理解PHP内核(十)变量及数据类型-类型提示的实现
原文链接:http://www.orlion.ga/253/ PHP是弱类型语言,向方法传递参数时也并不严格检查数据类型.不过有时候需要判断传递到方法中的参数,为此PHP中提供了一些函数来判断数据的类 ...
- 【原创】.NET读写Excel工具Spire.Xls使用(2)Excel文件的控制
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html .NET读写Excel工具Spire.Xls使用文章 ...
- 默認打開pr_debug和dev_dbg
作者:彭東林 郵箱:pengdonglin137@163.com 日期:2016-08-26 18:04:14 在進行Linux驅動開發時經常見到使用pr_debug和dev_dbg打印驅動的log, ...
- Android基于mAppWidget实现手绘地图（十五）–如何控制放大缩小
一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 1. 使用控件底部的缩放按钮 2.双击控件 3.pinch手势 4.物理按键 :I键标识缩小 :O键表示放大.(只有设备具有物理按键才行) ...