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 相关文章推荐
js中opener与parent的区别详细解析
Jan 14 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
简单的js表格操作
Sep 24 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
js绘制一条直线并旋转45度
Aug 21 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
9个PHP开发常用功能函数小结
2011/07/15 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
php 基础函数
2017/02/10 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
基于python实现把图片转换成素描
2019/11/13 Python
Django实现将views.py中的数据传递到前端html页面,并展示
2020/03/16 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
过滤器的用法
2013/10/08 面试题
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
人事部岗位职责范本
2014/03/05 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
给领导的感谢信范文
2015/01/23 职场文书
关于环保的宣传稿
2015/07/23 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书