jQuery Easyui实现左右布局

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=toListchannelType=1handleFlag=aply_wait"

}

},{

"text":"商户审批中申请",

"attributes":{

"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_current"

}

},{

"text":"商户审批通过申请",

"attributes":{

"url":"waterAply.do?method=toListchannelType=1handleFlag=aply_pass"

}

},{

"text":"商户被拒绝申请",

"attributes":{

"url":"waterAply.do?method=toListchannelType=1handleFlag=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实现上左右布局的相关内容，希望对大家有所帮助。

JQuery-EasyUI与EXTjs有什么区别？

一、ExtJS

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了大量跨浏览器方面的处理。相对来说，EXT要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。

二、JQuery

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript框架，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

三、二者对比

1.JQuery-EasyUI是仿照Ext做的。

2.Ext框架是一个整体，面向对象的编程思想，每个控件之间可以相互通讯。

3.JQuery的控件全都是分散的，没有整体性可言。你可以单独拿出来一个控件就能用。

4.若要开发系统应用，首选Ext，控件库丰富，扩展和维护都方便。若是简单的页面动画和效果，首选JQuery

5.jquery只是一个工具库，比较简单，相对容易。 Ext是一套真正的ria开发框架，甚至可以实现桌面应用一样的强大功能。本身代码质量极高，而且是高度的面向对象设计。jQuery 入门相对容易一些，实际用的过程中要用到各种插件，基本上用一个“学”一个。 ExtJS 入门稍难。

6.大小比较：首先ExtJS是一个完整的Framework,是重量级别的，easy ui 是基于jquery库的一套UI组件库，是轻量级的，ExtJS是应用application级的，而jquery是page页面级的。当然application也是由page组成的，那就需要你自己去完成了，考虑你的需求，和使用框架的初衷，选择使用哪一种。同时ExtJs由于是重量级框架，完全面向对象风格，提供API非常完备也非常庞大，所以学习成本也想相对较大。

7.兼容性比较：ExtJS兼容IE全系列浏览器和其他非IE现代浏览器，jquery UI向来不太考虑ie低版本浏览器的兼容，从态度上的鄙视。easy UI是基于jquery的，jquery2.X以上的版本不再支持IE6、7、8,，已郑重声明，请看官方网站，easyUI最新版本1.3.3使jQuery2.0,由于又很多HTML5特性，不再支持IE6\7\8，低版本由一些小部分的兼容不够好，请自己做技术选型的时候去测试，要使用那个版本。在兼容问题上，都有瑕疵，主要看接收程度。

8.使用许可license. EXTJS 2.1以上版本，商用需要购买商业授权，jquery UI 使用MIT协议，开源。 jquery easyUI如果商用需遵循license commercial商业许可，也就是要购买使用权。

如何设置jquery easyui中下拉框不可编辑

设置jquery easyui中下拉框不可编辑的方法：

EasyUI常用控件禁用方法：

1.validatebox可以用的用法:前两种适用于单个的validatebox;

第三种应用于整个form里面的输入框;

1.$("#id").attr("readonly", true);

$("#id").removeAttr("readonly");

2.$("#id").attr("readonly", "readonly");

$("#id").removeAttr("readonly");

3.$("#Form :input").attr("readonly", "readonly"); //对form里面的禁用

4.$("input").attr("readonly", "readonly"); //对所有的input标签禁用

2.combobox禁用启用用法:

1.$("#id").combobox({ disabled: true });

$("#id").combobox({ disabled: false});

2.$("#id").attr("readonly", "readonly"); //对单个禁用 $("#id").removeAttr("readonly");

3.$("#fm .easyui-combobox").combobox({ disabled: true }); //对form里面的下拉框禁用

4.$("#ID").combobox("disable"); ------ $("#ID").combobox("enable");

3.datebox与datetimebox禁用启用方法:

1.$("#fm .easyui-datebox").datebox({ disabled: true });

$("#fm .easyui-datebox").datebox({ disabled: false});

2.$("#id").attr("readonly", "readonly");

$("#id").removeAttr("readonly");

3.$("#fm .easyui-datetimebox").datetimebox({ disabled: true });

4.combogrid禁用启用方法:

1.$("#FPayApplySupAccountID").combogrid("disable"); $("#FPayApplySupAccountID").combogrid("enable");

5.lable标签ID附加文字：

1.$("#id").text("标题:"); //此方法可以屏蔽掉lable标签内的文字