jqueryeasyui中文详细说明文档Word格式.docx
《jqueryeasyui中文详细说明文档Word格式.docx》由会员分享，可在线阅读，更多相关《jqueryeasyui中文详细说明文档Word格式.docx（26页珍藏版）》请在冰豆网上搜索。
<
divregion="
north"
title="
NorthTitle"
split="
true"
100px;
/div>
south"
SouthTitle"
east"
icon="
icon-reload"
East"
west"
West"
center"
centertitle"
padding:
5px;
background:
#eee;
jQuery
$（'
#cc'
）.layout（options）;
Dependencies
panel
resizable
Options
LayoutPanelOptions
所有属性都是放在<
div/>
标签里面
Name
Type
Description
Default
title
string
标题名字，当写了名字后将会产生
折叠图标
null
region
布局的位置值有:
north,south,east,west,center.
border
boolean
显示布局面板的边框
true
split
True时,面板间将产生一个
拖动条可改变面板间大小
false
icon
在面板头部显示图标的CSS
将在布局面板中产生一个图标如：
icon="
href
从远程地址加载数据的URL
fit="
自动改变大小
Methods
Parameter
panel
Returnthespecifiedpanel,the'
region'
parameterpossiblevalues:
'
north'
'
south'
east'
west'
.
collapse
Collapsethespecifiedpanel,the'
expand
Expandthespecifiedpanel,the'
2.tabs面板
2.1.样图
2.2.示例代码
在<
标签里使用方法class="
easyui-tabs"
tt"
500px;
250px;
divtitle="
Tab1"
20px;
display:
none;
tab1
Tab2"
closable="
overflow:
auto;
tab2
Tab3"
tab3
Tocreateatabscontainer
#tt'
）.tabs（options）;
Toaddatabpanel:
）.tabs（'
add'
{
title:
NewTab'
content:
TabBody'
closable:
}）;
none
TabsContainer
Overridedefaultswith$.fn.tabs.defaults.
Properties
width
number
标签容器宽度
auto
height
标签容器高度
idSeed
应该是生成标签面板的基本id
plain
标签栏显示背景
fit
设置true，自适应父集容器大小false
是否显示容器边框
scrollIncrement
滚动按钮每次被按下时滚动的像素值
100
scrollDuration
每次滚动持续的毫秒数
400
Events
Parameters
onLoad
arguments
当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同
onSelect
当用户选择一个标签面板时被触发
onClose
当用户关闭一个标签面板时被触发
方法
方法名
参数
描述
resize
调整标签容器的大小和布局
add
options
添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性
close
关闭一个标签面板，标题参数表明被关闭的面板
select
选择一个标签面板
exists
指示特定的标签是否存在
标签面板属性
属性名
id
标签面板的ID属性
标签面板的文本标题
content
标签面板的主体内容
填充标签内容的远程URL地址
cache
如果为true，当设置href时，对标签面板进行缓存
标签面板上标题的图标CSS类
closable
如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。
selected
如果为true，标签标签面板将被选中
标签面板的宽度
标签面板的高度
3.jQueryEasyUI提示框（Messager）用法
jQueryEasyUI提示框（Messager）不仅重写了window默认的alert,confirm和prompt，而且还增加一些在页面右下角显示的提示框。
3.1.样图
jQueryEasyUI提示框（Messager）不仅强大，而且也不用任何的HTML代码，只需要按照《jQueryEasyUI框架使用文档》包含必要文件后，在$（function（）{}）;
里插入下面的代码即可：
3.2.示例代码
1.$.messager.show（）
2.$.messager.alert（'
MyTitle'
事件已经触发'
）;
Messager需要依存于以下的这些组件：
*可拖放（Draggable）
*调整大小（Resizable）
*面板（panel）
*窗口（window）
*链接按钮（linkbutton）
上面只是一个小例子，下面来看一下具体的选项和方法：
名字
类型
默认值
ok
字符串
Ok按钮上的文本
Ok
cancel
Cancel按钮上的文本
Cancel
$.messager.show
在屏幕的右下角显示一个消息窗口。
这些选项的参数可以是一下的一个配置对象：
showType：
定义如何将显示消息窗口。
可用的值是：
null,slide,fade,show。
默认值是slide。
showSpeed：
定义消息窗口完成的时间（以毫秒为单位），默认值600。
width：
定义消息窗口的宽度。
默认值250。
height：
定义消息窗口的高度。
默认值100。
msg：
定义显示的消息文本。
title：
定义显示在标题面板显示的标题文本。
timeout：
如果定义为0，消息窗口将不会关闭，除非用户关闭它。
如果定义为非0值，当超时后消息窗口将自动关闭。
$.messager.alert
title,msg,icon,fn
显示一个警告窗口。
参数如下：
显示在标题面板的标题文本。
提示框显示的消息文本。
icon：
提示框显示的图标。
error,question,info,warning.
fn：
当窗口关闭时触发的回调函数。
$.messager.confirm
title,msg,fn
显示一个含有确定和取消按钮的确认消息窗口。
确认消息窗口显示的消息文本。
fn（b）：
当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。
$.messager.prompt
显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。
提示窗口显示的消息文本。
fn（val）：
用户点击按钮后的回调函，参数是用户输入的内容。
4.分页（Pagination）用法
在web开发中，经常会遇到分页的需求，如果靠我们手写代码，可能代码又多，样式又不好看，下面介绍一下jQueryeasyUI分页功能，非常的方便简单，下面看一下
4.1.样图
4.2.示例代码
1.<
pp"
#efefef;
border:
1pxsolid#ccc;
然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;
1.$（'
#pp'
）.pagination（options）;
下面来介绍Pagination的具体用法，首先来看属性：
total
数字
当分页建立时设置记录的总数量
1
pageSize
每一页显示的数量
10
pageNumber
当分页建立时，显示的页数
pageList
数组
用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.
[10,20,30,50]
loading
布尔
定义数据是否正在加载
buttons
定义自定义按钮，每个按钮包含两个属性：
iconCls:
显示背景图像的CSS类
handler:
当一个按钮被点击时的处理函数
showPageList
定义是否显示页面列表
showRefresh
定义是否显示刷新按钮
beforePageText
在输入框组件前显示的标签
Page
afterPageText
在输入框组件后显示的标签
of{pages}
displayMsg
显示一个页面的信息。
Displaying{from}to{to}of{total}items
事件
事件名
onSelectPage
pageNumber,pageSize
当用户选择一个新页时触发，回调函数包含两个参数：
pageNumber:
新页面的页数
pageSize:
新页面的大小
onBeforeRefresh
刷新按钮被点击之前触发，如果返回false则取消刷新操作
onRefresh
刷新以后触发
onChangePageSize
当改变页面大小时触发
5.jQueryEasyUI对话框（Dialog）用法
jQueryEasyUI对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图也只与窗口的效果图差几个按钮，下面看一下EasyUI的对话框效果图：
5.1.示例图片
5.2.示例代码
（很多属性可以和Window的用法依洋，在标记语言中定义，比如说:
icon,title等等）
dd"
MyDialog"
200px;
2.
DialogContent.
3.<
#dd'
）.dialog（options）;
Window需要依存于以下的三个组件：
下面来介绍Window的具体用法，首先来看属性大多数的属性和窗口（Window）的属性是相同的，下面列出一些Dialog私有的属性：
对话框的标题文本
NewDialog
collapsible
定义是否显示可折叠按钮
minimizable
定义是否显示最小化按钮
maximizable
定义是否显示最大化按钮
resizable
定义对话框是否可编辑大小
toolbar
对话框上的工具条，每个工具条包括:
text,iconCls,disabled,handleretc.
对话框底部的按钮，每个按钮包括:
text,iconCls,handleretc.
Dialog的事件和窗口（Window）的事件相同，可以参考《jQueryEasyUI窗口（Window）用法》
除了”header”和”body”以外，Dialog的函数方法和窗口（Window）的相同，同样也可以参考《jQueryEasyUI窗口（Window）用法》
6.jQueryEasyUI窗口（Window）用法
jQueryEasyUI窗口（Window）的主要用法和面板（panel）用法差不多，首先来看一下jQueryEasyUI窗口（Window）在页面里显示的效果是这样的：
6.1.样图
6.2.示例代码
（很多Window的属性可以在标记语言中定义，比如说:
win"
icon-save"
MyWindow"
WindowContent
生成一个Window：
#win'
）.window（options）;
打开一个Window：
）.window（'
open'
下面来介绍Window的具体用法，首先来看属性大多数的属性和面板（panel）的属性是相同的，下面列出一些Window私有的属性：
zIndex
窗口的z-index属性，可以通过这个属性来增加
9000
draggable
定义窗口是否可被拖动
定义窗口是否可以被改变大小
shadow
如果设置为true，窗口的阴影也将显示。
modal
定义窗口是否是一个模式窗口。
Window也重写了Panel里的一些属性
窗口的标题文本
NewWindow
定义是否显示可折叠定义按钮
定义是否显示关闭按钮
Window的事件和面板（panel）的事件相同，可以参考《jQueryEasyUI面板（Panel）用法》
除了”header”和”body”以外，Window的函数方法和面板（panel）的相同，同样也可以参考《jQueryEasyUI面板（Panel）用法》
7.jQueryEasyUI验证框（ValidateBox）用法
jQueryEasyUI验证框（ValidateBox）在表单的验证方面给我们提供了很方便的方法，下面来介绍一下验证框（ValidateBox）的详细用法：
7.1.样图
7.2.示例代码
inputid="
vv"
required="
validType="
email"
#vv'
）.validatebox（options）
下面介绍一下验证规则：
验证规则是通过使用属性“required”和”validType”来定义的，已经实施的规则如下：
∙email:
匹配电子邮件正则表达式规则
∙url:
匹配URL正则表达式规则
∙length[0,100]:
允许字符串长度的范围
当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。
例如，要定义一个minLength有效的类型：
1.$.extend（$.fn.validatebox.defaults.rules,{
minLength:
{
3.
validator:
function（value,param）{
4.
returnvalue.length>
=param[0];
5.
},
6.
message:
'
Pleaseenteratleast{0}characters.'
7.
}
8.}）;
定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：
inputclass="
easyui-validatebox"
minLength[5]"
下面来介绍更多的用法：
属性
required
定义文本域是否为必填项
validType
定义字段的验证类型，比如email,url,etc.
missingMessage
当文本框为空时提示的文本信息
Thisfieldisrequired.
invalidMessage
当文本框内容不合法时提示的文本信息
destroy
删除并且销毁组件
validate
做验证以确定文本框的内容是否是有效的。
isValid
调用验证方法并返回验证结果，true或者false
8.jQueryEasyUI数字框（NumberBox）用法
jQueryEasyUI数字框（NumberBox）相对来说比较简单，就是控制一个输入只接受数字类型，其他所有的字符都不接受。
这在我们的应用中还是能起到很大作用的，比如说电话号码框获取金额框是只接受数字的。
下面来介绍数字框（NumberBox）用法的详细用法：
8.1.样图
8.
升级会员 