最准确齐全完善Easyui 教程.docx

上传人:b****4 文档编号:24348056 上传时间:2023-05-26 格式:DOCX 页数:77 大小:245.43KB
下载 相关 举报
最准确齐全完善Easyui 教程.docx_第1页
第1页 / 共77页
最准确齐全完善Easyui 教程.docx_第2页
第2页 / 共77页
最准确齐全完善Easyui 教程.docx_第3页
第3页 / 共77页
最准确齐全完善Easyui 教程.docx_第4页
第4页 / 共77页
最准确齐全完善Easyui 教程.docx_第5页
第5页 / 共77页
点击查看更多>>
下载资源
资源描述

最准确齐全完善Easyui 教程.docx

《最准确齐全完善Easyui 教程.docx》由会员分享,可在线阅读,更多相关《最准确齐全完善Easyui 教程.docx(77页珍藏版)》请在冰豆网上搜索。

最准确齐全完善Easyui 教程.docx

最准确齐全完善Easyui教程

最准确-齐全-完善-Easyui教程

目录

1Accordion(可折叠标签)2

1.1实例2

1.2参数3

2DateBox(日期框)4

2.1实例4

2.2参数6

2.3事件6

2.4方法6

3ComboBox(组合框)7

3.1实例7

3.2参数9

3.3事件9

3.4方法9

4Dialog(对话框)10

4.1实例10

4.2参数12

4.3事件12

4.4方法12

5Messager(提示框)12

5.1实例12

5.2方法15

5.3扩展16

6NumberBox(数字框)16

6.1实例16

6.2参数17

7ValidateBox(验证框)18

7.1实例18

7.2参数20

7.3方法20

7.4扩展20

8Pagination(分页)20

8.1实例20

8.2参数22

8.3事件23

9Window(窗口)23

9.1实例23

9.2参数25

9.3事件26

9.4方法26

10Panel(面板)26

10.1实例26

10.2参数28

10.3事件29

10.4方法29

11Tabs(标签)30

11.1实例30

11.2参数32

11.3事件32

11.4方法33

11.5标签面板属性33

12Tree(树)33

12.1实例33

12.2参数36

12.3事件37

12.4方法37

13Layout(布局)38

13.1实例38

13.2参数39

13.3方法39

14Datagrid(数据表)39

14.1实例39

14.2参数43

14.3Column参数44

14.4事件45

14.5方法46

1Accordion(可折叠标签)

1.1实例

1.1.1代码

jQueryEasyUI

$(function(){

$('#aa').accordion({

width:

400,

height:

200,

fit:

false

});

});

auto;padding:

10px;">

#0099FF;">AccordionforjQuery

AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.

style="padding:

10px;">content2

content3

1.1.2效果图

1.1.3扩展

实例html代码中

此行也可写成

300px;height:

200px;"fit="false"border="false">

,并且将js代码全部去掉,效果图是一样的。

1.2参数

1.2.1容器参数

参数名称

参数类型

描述

默认值

width

数字

可折叠标签的宽度。

auto

height

数字

可折叠标签的高度。

auto

fit

布尔

是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。

false

border

布尔

是否显示边界线。

true

1.2.2面板参数

可折叠标签面板继承自面板(panel),许多属性定义在

标签里,下面的属性就是如此:

参数名称

参数类型

描述

默认值

selected

布尔

设置可折叠标签中默认展开的标签页

false

2DateBox(日期框)

2.1实例

2.1.1代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/loose.dtd">

jQueryEasyUI

href="../themes/default/easyui.css">

DateBox

10px;">

disable();

>disable

enable();

>enable

2.1.2效果图

2.2参数

属性名

类型

描述

默认值

currentText

字符串

为当前日期按钮显示的文本

Today

closeText

字符串

关闭按钮显示的文本

Close

disabled

布尔

如果为true则禁用输入框

false

required

布尔

定义输入框是否为必添

false

missingMessage

字符串

当输入框为空时提示的文本

必填

formatter

function

格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串

——

parser

function

分析字符串的函数,这个函数以’date’为参数并返回一个日期

——

2.3事件

事件名

参数

描述

onSelect

date

当选择一个日期时触发

2.4方法

方法名

参数

描述

destroy

none

销毁组件

disable

none

禁用输入框.

enable

none

启用输入框

3ComboBox(组合框)

3.1实例

3.1.1代码

jQueryEasyUI

href="../themes/default/easyui.css">

ComboBox

10px;">loadData

setValue

onclick="getValue()">getValuedisable

enable

Options:

==请选择==

苹果

香蕉

鸭梨

西瓜

芒果

combobox_data.json内容:

[{

"id":

1,

"text":

"text1"

},{

"id":

2,

"text":

"text2"

},{

"id":

3,

"text":

"text3",

"selected":

true

},{

"id":

4,

"text":

"text4"

},{

"id":

5,

"text":

"text5"

}]

3.1.2效果图

3.2参数

属性名

类型

描述

默认值

width

数字

组件的宽度

auto

listWidth

数字

下拉列表的宽度

null

listHeight

数字

下拉列表的高度

null

valueField

字符串

基础数据值名称绑定到这个组合框

value

textField

字符串

基础数据的字段的名称绑定到这个组合框

text

editable

布尔

定义是否可以直接到文本域中键入文本

true

url

字符串

加载列表数据的远程URL

null

3.3事件

事件名

参数

描述

onLoadSuccess

none

当远程数据成功加载时触发

onLoadError

none

当远程数据加载失败时触发

onSelect

record

当用户选择了一个列表项时触发

onChange

newValue,oldValue

当文本域字段的值改变时触发

3.4方法

方法名

参数

描述

select

value

选择下拉列表中的一项

setValue

param

设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。

getValue

none

获取字段值

reload

url

请求远程列表数据.

4Dialog(对话框)

4.1实例

4.1.1代码

jQueryEasyUI

href="../themes/default/easyui.css">

Dialog

10px;">open1

close1

style="padding:

5px;width:

400px;height:

200px;">

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

4.1.2效果图

4.2参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

NewDialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

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

false

toolbar

数组

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

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

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

text,

iconCls,

handler

etc.

null

4.3事件

Dialog的事件和窗口(Window)的事件相同。

4.4方法

Dialog的函数方法和窗口(Window)的相同。

5Messager(提示框)

5.1实例

5.1.1代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/loose.dtd">

jQueryEasyUI

href="../themes/default/easyui.css">

相关资源
猜你喜欢
相关搜索

当前位置:首页 > 解决方案 > 学习计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1