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 ...
随机推荐
- NodeJS系列~第四个小例子，NodeJs处理Get请求和Post请求
返回目录 说在前 对于HTTP请求来说,我们通常使用的是Get和Post,除此之外还有put,delete等,而对于get来说,比较lightweight,只是对字符串的传输,它会被添加到URL地址里 ...
- EF架构~linq to entity的随机排序问题
回到目录 对于从linq to sql迁移过来的开发者,对随机排序不会感到陌生,直接为datacontext添加一个方法再配合反射就可以实现随机排序了,代码如下: /// <summary> ...
- 【管理心得之三十八】如果“Q”不是高富帅，也吸引不了白富美“A”
场景再现=========================={美剧片段}一位老人在电话亭中,一次又一次地向公用电话投硬币,但是每一次仅是接通后就自动掉线了.老人无奈之下寻求他人拨打报修电话,但苦等了许 ...
- Android WebView 开发教程
声明在先:必须在AndroidMainfest.xml 里面声明权限,否则在Java里面编写的所有WebView浏览网页的代码都无法正常使用 <uses-permission android:n ...
- mysql创建数据库
mysql创建数据库 创建utf8编码的数据库 CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf8_ ...
- TSql Output 用法
第一部分:TSql Output 关键字有两种应用场景 1,作为存储过程的参数类型,从存储过程中返回数据 2,返回受 INSERT.UPDATE.DELETE 或 MERGE 语句影响的各行中的信息, ...
- Node学习
参见Node入门 做出node应用的第一个例子 图片上传浏览.
- AngularJs bower install 卡主不动解决办法
,在开发过程中,前端的依赖包都是使用bower来进行安装的,但是经常就是下载不了package特别的苦恼,这里顺便要抱怨一下github,不是一般的慢!! 后来在stackoverflow找到一个方法 ...
- 基于TCPCopy的Dubbo服务引流工具-DubboCopy
TCPCopy顾名思义,就是一个可以将tcp流量复制的工具(其实也可以复制UDP).有了这样一个工具,我们就可以真实的复制线上流量,然后将这些流量复制到我们的测试服务器上.这样就可以很容易模拟线上真实 ...
- Linux命令之diff
1．命令格式: diff[参数][文件1或目录1][文件2或目录2] 2．命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时才有效.以逐行的方式,比较文 ...