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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
jQuery实现原理的模拟代码 -6 代码下载
Aug 16 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
AngularJS中过滤器的使用与自定义实例代码
Sep 17 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
jQuery Ajax前后端使用JSON进行交互示例
Mar 17 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
vue刷新和tab切换实例
Feb 11 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
在 Vue 中编写 SVG 图标组件的方法
Feb 24 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-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
ThinkPHP3.2.3数据库设置新特性
2015/03/05 PHP
php的4种常见运行方式
2015/03/20 PHP
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python  Django 母版和继承解析
2019/08/09 Python
wxpython布局的实现方法
2019/11/01 Python
Numpy之reshape()使用详解
2019/12/26 Python
利用Vscode进行Python开发环境配置的步骤
2020/06/22 Python
Python 绘制可视化折线图
2020/07/22 Python
医务人员自我评价
2014/01/26 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
学习之星事迹材料
2014/05/17 职场文书
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
七年级生物教学反思
2016/02/20 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技