收藏

下载资源 加入VIP,免费下载

第1页 / 共57页

第2页 / 共57页

第3页 / 共57页

第4页 / 共57页

第5页 / 共57页

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码即可：

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

其中options是可选的参数，可以写，也可以不写，下面再举个写参数的例子，

1.$（'#dd'）.draggable（{

2.handle:

'#title',

3.disabled:

false,

4.edge:

1,

5.axis:

'h',

6.onStartDrag:

function（）{

7.

8.$（"

'+$（this）.css（'left'））;

9.}

10.}）;

下面介绍一下所有的参数和事件，如下：

参数

参数名

类型

描述

默认值

选择器

定义可以拖动的选择器对象

null

disabled

布尔

定义是否可以拖动，true为停止拖动

false

edge

数字

在距离边缘多少宽度的时候开始拖动，单位是px

0

axis

字符串

定义可以向哪个方向拖动，有v和h两种值

如果设为v就只能垂直拖动，如果设为h，则只能水平拖动

null

事件

事件名

参数

描述

onStartDrag

e

当目标对象开始拖动的时候触发此事件

onDrag

e

当目标对象被拖动的时候触发此事件

onStopDrag

e

当目标对象拖动结束的时候触发此事件

了解这个参数和事件的作用以后，就可以很灵活的使用jQueryEasyUI可拖放（Draggable）的功能了。

jQueryEasyUI可调整大小（Resizable）用法

发表于2010年3月31日由admin

[ad#content]上一篇给大家介绍了jQueryEasyUI可拖动（Draggable）的具体用法，这一篇介绍一下课调整大小（Resizable）的用法以及参数的极少，同样我们来通过一个小例子来学习一下这些参数：

（查看演示）

HTML代码如下：

1.

100px;height:

100px;border:

1pxsolid#ccc;">

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码即可：

1.$（'#rr'）.resizable（options）;

其中options是可选的参数，可以写，也可以不写，下面再举个写参数的例子，

1.$（'#rr'）.resizable（{

2.minWidth:

50,

3.maxWidth:

150,

4.minHeight:

100,

5.maxHeight:

200,

6.onStartResize:

function（e）{

7.$（'#info'）.html（'start'+$（this）.css（'width'））;

8.},

9.onResize:

function（e）{

10.$（'#info'）.html（$（this）.css（'width'））;

11.},

12.onStopResize:

function（e）{

13.$（'#info'）.html（'stop:

'+$（this）.css（'width'））;

14.}

15.}）;

下面介绍一下所有的参数和事件，如下：

参数

参数名

类型

描述

默认值

disabled

布尔

如果为true则禁用可调整大小

false

handles

字符串

指明可调整的方向，’n'为北，’e'为东，’s'为南，’w'为西

n,e,s,w,

ne,se,sw,

nw,all

minWidth

数字

调整大小时的最小宽度

10

minHeight

数字

调整大小时的最小高度

10

maxWidth

数字

调整大小时的最大宽度

10000

maxHeight

数字

调整大小时的最大高度

10000

edge

数字

调整大小时距离边框的宽度

5

事件

事件名

参数

描述

onStartResize

e

当开始调整大小时触发此事件

onResize

e

调整大小的时候触发此事件

onStopResize

e

当调整大小结束的时候触发此事件

jQueryEasyUI面板（Panel）用法

发表于2010年4月9日由admin

[ad#content]这篇文章介绍一下面板（Panel）用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。

（查看演示）

同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：

1.

10px;">

2.PanelContent

3.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码来生成面板：

1.$（'#p'）.panel（options）;

也可以给面板函数添加一些参数：

1.$（'#p'）.panel（{

2.title:

'MyPanel',

3.tools:

[{

4.iconCls:

'icon-new',

5.handler:

function（）{alert（'new'）}

6.},{

7.iconCls:

'icon-save'

8.handler:

function（）{alert（'save'）}

9.}]

10.}）;

也可以把面板移动到其他位置：

1.$（'#p'）.panel（'move',{

2.left:

100,

3.top:

100

4.}）;

上面只是一些例子，下面我们来看一下具体的属性和事件方法：

属性

名字

类型

描述

默认值

Title

字符串

在面板头部显示的标题文本

null

iconCls

字符串

一个CSS类来显示在面板中的16x16图标

null

Width

数字

设置面板的宽度

auto

Height

数字

设置面板的高度

auto

left

数字

设置面板左侧位置

null

top

数字

设置面板的顶部位置

null

cls

字符串

给面板添加一个CSS类

null

headerCls

字符串

给面板头部添加一个CSS类

null

bodyCls

字符串

给面板主体添加一个CSS类

null

style

对象

给面板自定义样式

{}

fit

布尔

当设置为true，面板尺寸将适合它的父容器。

false

border

布尔

定义面板的边框

true

doSize

布尔

当设置为true，面板载创建的时候将被调整和重新布局

true

collapsible

布尔

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

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

closable

布尔

定义是否显示关闭按钮

false

tools

数组

自定义工具，每个工具可以包含两个属性：

iconClsandhandler

[]

collapsed

布尔

定义在初始化的时候折叠面板

False

minimized

布尔

定义在初始化的时候最小化面板

False

maximized

布尔

定义在初始化的时候最大化面板

False

closed

布尔

定义在初始化的时候关闭面板

False

href

字符串

一个远程的URL加载数据，然后显示在面板中

Null

loadingMessage

字符串

当加载远程数据时，在面板中显示的信息

Loading…

事件

名字

参数

描述

onLoad

none

当远程数据加载时触发

onBeforeOpen

none

当面板打开之前触发

onOpen

none

当面板打开之后触发

onBeforeClose

none

当面板关闭之前触发

onClose

none

当面板关闭之后触发

onBeforeDestroy

none

当面板销毁之前触发

onDestroy

none

当面板关闭之后触发

onBeforeCollpase

none

当面板折叠之前触发

onCollapse

none

当面板折叠之后触发

onBeforeExpand

none

当面板展开之前触发

onExpand

none

当面板展开之后触发

onResize

width,height

当面板调整大小之后触发

width:

新的宽度

height:

新的高度

onMove

left,top

当面板移动之后触发

left:

新的左侧位置

top:

新的顶部位置

onMaximize

none

当窗口最大化的时候被触发

onRestore

none

当窗口恢复到原来的大小时被触发

onMinimize

none

当窗口最小化的时候被触发

方法

名字

参数

描述

Options

none

返回设置的属性值

Panel

none

返回面板对象

Header

none

返回面板头部对象

Body

none

返回面板主体对象

setTitle

title

设置面板头部标题

Open

forceOpen

当forceOpen设置为true，面板被打开的时候忽略onBeforeOpen回调函数

Close

forceClose

当forceClose设置为true，面板被关闭的时候忽略onBeforeClose回调函数

Destroy

forceDestroy

当forceDestroy设置为true，面板被销毁的时候忽略onBeforeDestroy回调函数

Refresh

none

当设置了href值时，刷新面板来加载远程数据

Resize

options

设置面板的大小和布局，这些选项包含以下的属性：

width:

新面板的宽度

height:

新面板的高度

left:

新面板的左侧位置

top:

新面板的顶部位置

Move

options

移动面板到一个新的位置，这些选项包含以下属性:

left:

新面板的左侧位置

top:

新面板的顶部位置

jQueryEasyUI标签（Tabs）用法

发表于2010年4月17日由admin

[ad#content]这里介绍一下标签（Tabs）用法以及参数，首先我们可以先看一下面板功能可以做什么，下图就是一个面板的实例。

（查看演示）

同样我们来通过一个小例子来学习一下这些参数，HTML代码如下：

1.

500px;height:

250px;">

2.

20px;display:

none;">

3.tab1

4.

5.

auto;padding:

20px;display:

none;">

6.tab2

7.

8.

20px;display:

none;">

9.tab3

10.

11.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码来生成面板：

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

也可以给面板函数添加一些参数:

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

2.title:

'NewTab',

3.content:

'TabBody',

4.closable:

true

5.}）;

参数

参数名

参数

描述

默认值

Width

数字

标签容器的宽度

auto

Height

数字

标签容器的高度

auto

idSeed

数字

Thebaseidseedtogeneratetabpanel’sDOMidattribute.

0

Plain

布尔

如果为ture标签没有背景图片

false

Fit

布尔

如果为ture则设置标签的大小以适应它的容器的父容器

false

Border

布尔

如果为true则显示标签容器的边框

true

scrollIncrement

数字

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

100

scrollDuration

数字

每次滚动持续的毫秒数

400

事件

事件名

参数

描述

onLoad

arguments

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

onSelect

title

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

onClose

title

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

方法

方法名

参数

描述

Resize

none

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

Add

options

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

Close

title

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

Select

title

选择一个标签面板

Exists

title

指示特定的标签是否存在

标签面板属性

属性名

类型

描述

默认值

Id

字符串

标签面板的ID属性

null

Title

字符串

标签面板的文本标题

Content

字符串

标签面板的主体内容

Href

字符串

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

null

Cache

布尔

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

true

Icon

字符串

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

null

closable

布尔

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

false

selected

布尔

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

false

Width

数字

标签面板的宽度

auto

Height

数字

标签面板的高度

auto

jQueryEasyUI可折叠标签（Accordion）用法

发表于2010年4月20日由admin

[ad#content]

（查看演示）

HTMLCode

1.

300px;height:

200px;">

2.

auto;padding:

10px;">

3.

#0099FF;">AccordionforjQuery

4.

AccordionisapartofeasyuiframeworkforjQuery.Itletsyoudefineyouraccordioncomponentonwebpagemoreeasily.

5.

6.

10px;">

7.content2

8.

9.

10.content3

11.

12.

JSCode

1.$（'#aa'）.accordion（options）;

ContainerOptions

Name

Type

Description

Default

width

number

Thewidthofaccordioncontainer.

auto

height

number

Theheightofaccordioncontainer.

auto

fit

boolean

Settotruetosettheaccordioncontainersizefitit’sparentcontainer.

false

border

boolean

Definesiftoshowtheborder.

true

PanelOptions

Theaccordionpaneloptionsisinhiritedfrompanel,manypropertiesisdefinedin

3.

100px;">

4.

100px;">

5.

100px;">

6.

5px;background:

#eee;">

7.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码来生成面板：

1.$（'#cc'）.layout（）;

布局面板的选项

所有属性都必须定义在布局面板创建的

11.Save

12.

13.

14.

然后按照《jQueryEasyUI框架使用文档》包含必要文件后，只要在$（function（）{}）;里添加一行代码来生成面板：

1.$（'#mm'）.menu（'show',{

2.left:

200,

3.top:

100

4.}）;

属性

属性名

类型

描述

默认值

zIndex

数字

增加它，可以改变菜单的z-index值

110000

left

数字

菜单左边的位置

0

top

数字

菜单上边的位置

0

href

字符串

指出一个不同的页面地址，当点击菜单项时本页面跳转到此地址

null

jQueryEasyUI链接按钮（LinkButton）用法

发表于2010年4月30日由admin

这篇介绍一下链接按钮（LinkButton