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 ...
随机推荐
- lua跨平台文件夹遍历匹配查找
require"lfs" --[[Desc:在B路径D文件中下 搜寻A路径下的没用到的C类文件: 并且将没用到的B类文件名称打印出来: 设置好路径拖到lua自带编辑器中即可运行之; ...
- iOS---------- @synchronized(self)的用法
1. synchronized 这个主要是考虑多线程的程序,这个指令可以将{ } 内的代码限制在一个线程执行,如果某个线程没有执行完,其他的线程如果需要执行就得等着. Objective-C除了提 ...
- 找到SQL Server的序列号
有时候希望获取当前机器上安装的SQL Server序列号,但注册表中序列号是经过加密的,因此我写了一个小工具获取当前SQL Server的序列号.程序比较粗糙,没有做错误验证. ...
- struts2获取web元素(request、session、application)
一.Action中获取 第一种方式: 通过ActionContext,这种方式取到的对象是Map类型 import java.util.Map; import com.opensymphony.xwo ...
- JSP网站开发基础总结《十一》
继上一篇关于过滤器连总结后,本篇为大家详细介绍一下过滤器中过滤规则的dispatcher属性的使用,在servlet2.5中dispatcher的属性有四种,其中上一篇已经为大家介绍了error属性的 ...
- Abp公共连接和事务管理方法
Conection 和事务管理在使用数据库的应用中是一个最重要的概念.当你打开一个连接,开始一个事务,如何来处理这些连接等等. 您也许知道,.NET使用了连接池.所以,创建一个连接实际上是从连接池里得 ...
- A/B 测试之前必须要了解的 10 件事
如今,转化率优化(CRO)已是营销人员必须具备的技能,并且与 ROI 直接挂钩.但是在优化网页的转化率方面又有太多因素要考量,如果你已经不堪其忧,请专心做一件事-- A/B 测试. A/B测试,即你设 ...
- 漫谈可视化Prefuse（四）---被玩坏的Prefuse API
这个双12,别人都在抢红包.逛淘宝.上京东,我选择再续我的“漫谈可视化”系列(好了,不装了,其实是郎中羞涩...) 上篇<漫谈可视化Prefuse(三)---Prefuse API数据结构阅读有 ...
- 【Java基础】RTTI与反射之Java
一.引言 很多时候我们的程序可能需要在运行时识别对象和类的信息,比如多态就是基于运行时环境进行动态判断实际引用的对象.在运行时识别对象和类的信息主要有两种方式:1.RTTI,具体是Class对象,它假 ...
- js的日期格式化
function date(){ var date = new Date(); var year = date.getFullYear(); var month = date.getMonth()+1 ...