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的public、private和privileged模式
Dec 28 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
深入学习JavaScript中的Rest参数和参数默认值
2015/07/28 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
使用Python读取安卓手机的屏幕分辨率方法
2018/03/31 Python
python线程池threadpool实现篇
2018/04/27 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
python实现网页自动签到功能
2019/01/21 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
css3实现背景动态渐变效果
2019/12/10 HTML / CSS
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
局域网标准
2016/09/10 面试题
2014年建筑工程工作总结
2014/12/03 职场文书
数学备课组工作总结
2015/08/12 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL