jQuery Easyui实现左右布局


Posted in Javascript onJanuary 26, 2016

EasyUI 简介

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架。

1.在页面中引入easyui所需的文件

<%-- 加载easyui的样式文件,bootstrap风格 --%>
<link href="${ctx }/css/themes/bootstrap/easyui.css" rel="stylesheet">
<link href="${ctx }/css/themes/icon.css" rel="stylesheet">
<%-- 加载jquery和easyui的脚本文件 --%>
<script src="${ctx }/js/jquery-easyui-../jquery.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../jquery.easyui.min.js"></script>
<script src="${ctx }/js/jquery-easyui-../locale/easyui-lang-zh_CN.js"></script>

2.在页面body部分构建必要的html结构

<body>
<div id="home-layout">
<!-- 页面北部,页面标题 -->
<div data-options="region:'north'" style="height:50px;">
<!-- add your code -->
</div>
<!-- 页面西部,菜单 -->
<div data-options="region:'west',title:'菜单栏'" style="width:200px;">
<div class="home-west">
<ul id="home-west-tree"></ul>
</div>
</div>
<!-- 页面中部,主要内容 -->
<div data-options="region:'center'">
<div id="home-tabs">
<div title="首页">
<h2 style="text-align: center">欢迎登录</h2>
</div>
</div>
</div>
</div>
</body>

这里需要注意一点:easyui在使用layout布局的时候,north、south需要指定高度,west、east需要指定宽度,而center会自动适应高和宽。

3.使用js初始化easyui组件

我个人比较推荐使用js代码去初始化easyui组件,而不使用easyui标签中的data-options属性去初始化。因为对于后台开发人员来说,写js代码可能比写html标签更加熟悉,而且这样使得html代码更加简洁。

<script>
$(function(){
/*
* 初始化layout
*/
$("#home-layout").layout({
//使layout自适应容器
fit: true
});
/*
* 获取左侧菜单树,并为其节点指定单击事件
*/
$("#home-west-tree").tree({

//加载菜单的数据,必需
url: "${ctx }/pages/home-west-tree.json",
method: "get",


//是否有层次线
lines: true,


//菜单打开与关闭是否有动画效果
animate: true,


//菜单点击事件
onClick: function(node){
if(node.attributes && node.attributes.url){




 //打开内容区的tab,代码在其后
addTab({
url: "${ctx }/" + node.attributes.url,
title: node.text
});
}
}
});

/*
* 初始化内容区的tabs
*/
$("#home-tabs").tabs({
fit : true,


//tab页是否有边框
border : false
});})
</script>
<script>
/*
* 在内容区添加一个tab
*/
function addTab(params){
var t = $("#home-tabs");
var url = params.url;
var opts = {
title: params.title,
closable: true,
href: url,
fit: true,
border: false
};
//如果被选中的节点对应的tab已经存在,则选中该tab并刷新内容
//否则打开一个新的tab
if(t.tabs("exists", opts.title)){
var tab = t.tabs("select", opts.title).tabs("getSelected");
t.tabs("update", {
tab: tab,
options: opts
});
}else{
t.tabs("add", opts);
}
}
</script>

4.easyui-tree组件所需的json格式

easyui使用的传输格式为json,它对json内容的格式有比较严格的限制,所以请注意查看api

[{
"text":"区域管理",
"attributes":{
"url":"pages/consume/area/areaList.jsp"
}
},{
"text":"预约信息管理",
"children":[{
"text":"商户预约信息查询",
"attributes":{
"url":"/pages/consume/reservation/merchantReservation/merchantReservationList.jsp"
}
}]
},{
"text":"准入申请管理",
"children":[{
"text":"商户准入申请",
"state":"closed",
"children":[{
"text":"商户待处理申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_wait"
}
},{
"text":"商户审批中申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_current"
}
},{
"text":"商户审批通过申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_pass"
}
},{
"text":"商户被拒绝申请",
"attributes":{
"url":"waterAply.do?method=toList&channelType=1&handleFlag=aply_refuse"
}
}]
}]
},{
"text":"准入审批管理",
"children":[{
"text":"商户审批管理",
"state":"closed",
"children":[{
"text":"当前任务",
"children":[{
"text":"商户当前初审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalTrial.jsp"
}
},{
"text":"商户当前复审任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRetrial.jsp"
}
}]
},{
"text":"商户已完成任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalDone.jsp"
}
},{
"text":"商户不通过任务",
"attributes":{
"url":"pages/consume/approval/merchantApproval/merchantApprovalRefuse.jsp"
}
}]
}]
}]

就这样,我们使用easyui完成了简单的左右布局。

以上所述是小编给大家分享的jQuery Easyui实现上左右布局的相关内容,希望对大家有所帮助。

Javascript 相关文章推荐
Javascript 类与静态类的实现(续)
Apr 02 Javascript
初窥JQuery-Jquery简介 入门了解篇
Nov 25 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
May 26 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
node.js命令行教程图文详解
May 27 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 #Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 #Javascript
详解javascript new的运行机制
Jan 26 #Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 #Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 #Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 #Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 #Javascript
You might like
PHP 一个随机字符串生成代码
2010/05/26 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
为你总结一些php信息函数
2015/10/21 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JSON格式化输出
2014/11/10 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
小程序实现多列选择器
2019/02/15 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
使用python爬取B站千万级数据
2018/06/08 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
python实现视频压缩功能
2020/12/18 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
行政总经理岗位职责
2013/12/05 职场文书
绩效管理实施方案
2014/03/19 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2014全年工作总结
2014/11/27 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
Redis全局ID生成器的实现
2022/06/05 Redis