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 ...
随机推荐
- JavaScript-分支语句练习
-1.方程 ax^2+bx+c=0,一元二次方程求根情况. 解: <head><meta http-equiv="Content-Type" content=&q ...
- js笔记——call,apply,bind使用笔记
call和apply obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是把obj( ...
- Duplicate id @+id/imageView, already defined earlier in this layout,android
原文地址http://www.thinksaas.cn/topics/0/448/448554.html 其實這個訊息也是可以解掉的,當然最簡單的解法就是你不要使用相同的id就好了.不過萬一你是幫別人 ...
- ajax图片上传及FastDFS入门案例.
今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jqu ...
- Atitit DbServiceV4qb9 数据库查询类库v4 新特性
Atitit DbServiceV4qb9 数据库查询类库v4 新特性 V4新特性 安全特性,屏蔽了executeUpdate,使用v2版 Sql异常转换,特别转换了DuplicateEnt ...
- 贪心算法-最小生成树Kruskal算法和Prim算法
Kruskal算法: 不断地选择未被选中的边中权重最轻且不会形成环的一条. 简单的理解: 不停地循环,每一次都寻找两个顶点,这两个顶点不在同一个真子集里,且边上的权值最小. 把找到的这两个顶点联合起来 ...
- Enterprise Solution 开发框架功能点
1. 通用查询模块,可以通过关联数据库表,存储过程或程序代码开发查询,多个查询之间也可构成主从关联查询. 2. 业务异常处理 支持统一的异常处理. 3. 内置一个简单的SQL Server查询分析器, ...
- CSS技能汇总，研究及实践
最近一直在研究CSS,因为发现实践中大部分时间都在写CSS,且自己感觉写的很烂,虽然以前看的很多,但却很少有去实践过,更别提研究了,现在发现根本就不是你懂你就会,很多都是你用着用着才真的会了的,于是现 ...
- C++智能指针简单剖析
导读 最近在补看<C++ Primer Plus>第六版,这的确是本好书,其中关于智能指针的章节解析的非常清晰,一解我以前的多处困惑.C++面试过程中,很多面试官都喜欢问智能指针相关的问题 ...
- Linux 内存管理
查看Linux内存使用情况 free -m Linux内存清理:绝大多数情况下都不需要此操作,因为cache的内存在需要的时候是可以自动释放的- 最好先sync几次,再清理内存,有下面三个级别,数值越 ...