jqueryeasyui中文详细说明文档.docx

jQuery

Tocreateatabscontainer

$（'#tt'）.tabs（options）;

Toaddatabpanel:

$（'#tt'）.tabs（'add',{

title:

'NewTab',

content:

'TabBody',

closable:

true

}）;

Dependencies

none

Options

TabsContainer

Overridedefaultswith$.fn.tabs.defaults.

Properties

Name

Type

Description

Default

width

number

标签容器宽度

auto

height

number

标签容器高度

auto

idSeed

number

应该是生成标签面板的基本id

0

plain

boolean

标签栏显示背景

false

fit

boolean

设置true，自适应父集容器大小false

false

border

boolean

是否显示容器边框

true

scrollIncrement

number

滚动按钮每次被按下时滚动的像素值

100

scrollDuration

number

每次滚动持续的毫秒数

400

Events

Name

Parameters

Description

onLoad

arguments

当一个AJAX标签加载远程数据完成时被触发，参数和jQuery.ajax成功返回的回调函数相同

onSelect

title

当用户选择一个标签面板时被触发

onClose

title

当用户关闭一个标签面板时被触发

方法

方法名

参数

描述

resize

none

调整标签容器的大小和布局

add

options

添加新标签面板，可选参数是一个配置对象，详细信息可以查看下面的标签面板属性

close

title

关闭一个标签面板，标题参数表明被关闭的面板

select

title

选择一个标签面板

exists

title

指示特定的标签是否存在

标签面板属性

属性名

Type

Description

Default

id

string

标签面板的ID属性

null

title

string

标签面板的文本标题

content

string

标签面板的主体内容

href

string

填充标签内容的远程URL地址

null

cache

boolean

如果为true，当设置href时，对标签面板进行缓存

true

icon

string

标签面板上标题的图标CSS类

null

closable

boolean

如果为true，标签面板会显示出关闭按钮，点击可以关闭选项卡面板。

false

selected

boolean

如果为true，标签标签面板将被选中

false

width

number

标签面板的宽度

auto

height

number

标签面板的高度

auto

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

options

在屏幕的右下角显示一个消息窗口。

这些选项的参数可以是一下的一个配置对象：

showType：

定义如何将显示消息窗口。

可用的值是：

null,slide,fade,show。

默认值是slide。

showSpeed：

定义消息窗口完成的时间（以毫秒为单位），默认值600。

width：

定义消息窗口的宽度。

默认值250。

height：

定义消息窗口的高度。

默认值100。

msg：

定义显示的消息文本。

title：

定义显示在标题面板显示的标题文本。

timeout：

如果定义为0，消息窗口将不会关闭，除非用户关闭它。

如果定义为非0值，当超时后消息窗口将自动关闭。

$.messager.alert

title,msg,icon,fn

显示一个警告窗口。

参数如下：

title：

显示在标题面板的标题文本。

msg：

提示框显示的消息文本。

icon：

提示框显示的图标。

可用的值是：

error,question,info,warning.

fn：

当窗口关闭时触发的回调函数。

$.messager.confirm

title,msg,fn

显示一个含有确定和取消按钮的确认消息窗口。

参数如下：

title：

显示在标题面板的标题文本。

msg：

确认消息窗口显示的消息文本。

fn（b）：

当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title,msg,fn

显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。

参数如下：

title：

显示在标题面板的标题文本。

msg：

提示窗口显示的消息文本。

fn（val）：

用户点击按钮后的回调函，参数是用户输入的内容。

4.分页（Pagination）用法

在web开发中，经常会遇到分页的需求，如果靠我们手写代码，可能代码又多，样式又不好看，下面介绍一下jQueryeasyUI分页功能，非常的方便简单，下面看一下

4.1.样图

4.2.示例代码

1.

#efefef;border:

1pxsolid#ccc;">

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里插入下面的代码即可：

1.$（'#pp'）.pagination（options）;

下面来介绍Pagination的具体用法，首先来看属性：

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

1

pageSize

数字

每一页显示的数量

10

pageNumber

数字

当分页建立时，显示的页数

1

pageList

数组

用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.

[10,20,30,50]

loading

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮，每个按钮包含两个属性：

iconCls:

显示背景图像的CSS类

handler:

当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

of{pages}

displayMsg

字符串

显示一个页面的信息。

Displaying{from}to{to}of{total}items

事件

事件名

参数

描述

onSelectPage

pageNumber,pageSize

当用户选择一个新页时触发，回调函数包含两个参数：

pageNumber:

新页面的页数

pageSize:

新页面的大小

onBeforeRefresh

pageNumber,pageSize

刷新按钮被点击之前触发，如果返回false则取消刷新操作

onRefresh

pageNumber,pageSize

刷新以后触发

onChangePageSize

pageSize

当改变页面大小时触发

5.jQueryEasyUI对话框（Dialog）用法

jQueryEasyUI对话框（Dialog）用法与EasyUI的窗口用法极为相似，最终的效果图也只与窗口的效果图差几个按钮，下面看一下EasyUI的对话框效果图：

5.1.示例图片

5.2.示例代码

（很多属性可以和Window的用法依洋，在标记语言中定义，比如说:

icon,title等等）

1.

400px;height:

200px;">

2.   DialogContent.

3.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里插入下面的代码即可：

1.$（'#dd'）.dialog（options）;

Window需要依存于以下的三个组件：

*可拖放（Draggable）

*调整大小（Resizable）

*面板（panel）

*窗口（window）

*链接按钮（linkbutton）

下面来介绍Window的具体用法，首先来看属性大多数的属性和窗口（Window）的属性是相同的，下面列出一些Dialog私有的属性：

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

NewDialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条，每个工具条包括:

text,iconCls,disabled,handleretc.

null

buttons

数组

对话框底部的按钮，每个按钮包括:

text,iconCls,handleretc.

null

事件

Dialog的事件和窗口（Window）的事件相同，可以参考《jQueryEasyUI窗口（Window）用法》

方法

除了”header”和”body”以外，Dialog的函数方法和窗口（Window）的相同，同样也可以参考《jQueryEasyUI窗口（Window）用法》

6.jQueryEasyUI窗口（Window）用法

jQueryEasyUI窗口（Window）的主要用法和面板（panel）用法差不多，首先来看一下jQueryEasyUI窗口（Window）在页面里显示的效果是这样的：

6.1.样图

6.2.示例代码

（很多Window的属性可以在标记语言中定义，比如说:

icon,title等等）

1.

2. WindowContent

3.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里插入下面的代码即可：

生成一个Window：

1.$（'#win'）.window（options）;

打开一个Window：

1.$（'#win'）.window（'open'）;

Window需要依存于以下的三个组件：

*可拖放（Draggable）

*调整大小（Resizable）

*面板（panel）

下面来介绍Window的具体用法，首先来看属性大多数的属性和面板（panel）的属性是相同的，下面列出一些Window私有的属性：

属性名

类型

描述

默认值

zIndex

数字

窗口的z-index属性，可以通过这个属性来增加

9000

draggable

布尔

定义窗口是否可被拖动

true

resizable

布尔

定义窗口是否可以被改变大小

true

shadow

布尔

如果设置为true，窗口的阴影也将显示。

true

modal

布尔

定义窗口是否是一个模式窗口。

true

Window也重写了Panel里的一些属性

属性名

类型

描述

默认值

title

字符串

窗口的标题文本

NewWindow

collapsible

布尔

定义是否显示可折叠定义按钮

true

minimizable

布尔

定义是否显示最小化按钮

true

maximizable

布尔

定义是否显示最大化按钮

true

closable

布尔

定义是否显示关闭按钮

true

事件

Window的事件和面板（panel）的事件相同，可以参考《jQueryEasyUI面板（Panel）用法》

方法

除了”header”和”body”以外，Window的函数方法和面板（panel）的相同，同样也可以参考《jQueryEasyUI面板（Panel）用法》

7.jQueryEasyUI验证框（ValidateBox）用法

jQueryEasyUI验证框（ValidateBox）在表单的验证方面给我们提供了很方便的方法，下面来介绍一下验证框（ValidateBox）的详细用法：

7.1.样图

7.2.示例代码

1.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里插入下面的代码即可：

1.$（'#vv'）.validatebox（options）

下面介绍一下验证规则：

验证规则是通过使用属性“required”和”validType”来定义的，已经实施的规则如下：

∙email:

匹配电子邮件正则表达式规则

∙url:

匹配URL正则表达式规则

∙length[0,100]:

允许字符串长度的范围

当然也可以自定义验证规则，重写$.fn.validatebox.defaults.rules可以定义一个校验器的功能和无效的显示消息。

例如，要定义一个minLength有效的类型：

1.$.extend（$.fn.validatebox.defaults.rules,{

2.   minLength:

{

3.     validator:

function（value,param）{

4.       returnvalue.length>=param[0];

5.     },

6.     message:

'Pleaseenteratleast{0}characters.'

7.   }

8.}）;

定义好以后我们就可以使用了，下面的代码表示输入的最小长度是5个字符：

1.

下面来介绍更多的用法：

属性

属性名

类型

描述

默认值

required

布尔

定义文本域是否为必填项

false

validType

字符串

定义字段的验证类型，比如email,url,etc.

null

missingMessage

字符串

当文本框为空时提示的文本信息

Thisfieldisrequired.

invalidMessage

字符串

当文本框内容不合法时提示的文本信息

null

方法

方法名

参数

描述

destroy

none

删除并且销毁组件

validate

none

做验证以确定文本框的内容是否是有效的。

isValid

none

调用验证方法并返回验证结果，true或者false

8.jQueryEasyUI数字框（NumberBox）用法

jQueryEasyUI数字框（NumberBox）相对来说比较简单，就是控制一个输入只接受数字类型，其他所有的字符都不接受。

这在我们的应用中还是能起到很大作用的，比如说电话号码框获取金额框是只接受数字的。

下面来介绍数字框（NumberBox）用法的详细用法：

8.1.样图

8.

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

jqueryeasyui 中文 详细 说明 文档

  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。