收藏

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

第1页 / 共108页

第2页 / 共108页

第3页 / 共108页

第4页 / 共108页

第5页 / 共108页

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

2.    handle:

'#title'  

3.}）;  

属性

名称

类型

描述

默认值

proxy（替代）

string,function

拖动时的替代元素，当被设置为'clone'时，将使用该元素的一个复制元素来作为替代元素。

如果指定了一个函数,它将返回一个jquery对象。

null

revert（复原）

boolean（布尔型）

如果设置为true,当拖动停止时元素将返回它的初始位置。

false

cursor（指针）

string（字符串）

拖动时的CSS指针。

move

deltaX（水平增量，X轴）

number（数字）

被拖动元素对应于当前指针的水平位置。

null

deltaY（垂直增量，y轴）

number（数字）

被拖动元素对应于当前指针的垂直位置。

null

handle（句柄）

selector（选择器）

开始拖动的句柄。

null

disabled（停止拖动）

boolean（布尔型）

当设置为true时停止拖动。

false

edge（边缘）

number（数字）

可以在其中拖动的容器的宽度

0

axis（拖动轴）

string（字符串）

可用值为'v'或者'h',当设置为空时，元素可以同时在水平和垂直方法拖动。

null

事件

名称

参数

描述

onBeforeDrag

e

在拖动之前触发，返回false将取消拖动。

onStartDrag

e

当目标对象开始被拖动时触发。

onDrag

e

在拖动过程中触发，当不能再拖动时返回false。

onStopDrag

e

当拖动停止时触发。

方法

名称

参数

描述

options

none

返回属性对象。

proxy

none

如果替代元素被设置，返回将被用于拖动的替代元素。

enable

none

允许拖动。

disable

none

禁止拖动。

1.4拖动至容器

拖动至容器

使用$.fn.droppable.defaults重载默认值。

使用方法

1.

100px;height:

100px;">  

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

2.    accept:

'#d1,#d3'  

3.}）;  

属性

名称

类型

描述

默认值

accept

selector

决定哪个可拖动元素将会被接收。

null

事件

名称

参数

描述

onDragEnter

e,source

当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。

onDragOver

e,source

当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。

onDragLeave

e,source

当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。

onDrop

e,source

当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。

1.5缩放

缩放

使用$.fn.resizable.defaults重载默认值。

使用方法

1.

100px;height:

100px;border:

1px solid #ccc;">  

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

2.    maxWidth:

800,  

3.    maxHeight:

600  

4.}）;  

属性

名称

类型

描述

默认值

disabled（禁止缩放）

boolean（布尔型）

如果设置为true将禁止缩放。

false

handles（句柄）

string（字符串）

说明缩放的方向，'n'表示向上（北）,'e'表示向右（东）等。

n,e,s,w,ne,se,sw,nw,all

minWidth（最小宽度）

number（数字）

缩放时所允许的最小宽度。

10

minHeight（最小高度）

number（数字）

缩放时所允许的最小高度。

10

maxWidth（最大宽度）

number（数字）

缩放时所允许的最大宽度。

10000

maxHeight

number（数字）

缩放时所允许的最大高度。

10000

edge（边界）

number（数字）

将被缩放的边框的边界。

5

事件

名称

参数

描述

onStartResize

e

当开始缩放时触发。

onResize

e

在缩放过程中触发，当返回false时,DOM元素将不再缩放。

onStopResize

e

当缩放停止是触发。

1.6分页

分页

使用$.fn.pagination.defaults重载默认值。

依赖关系

∙链接按钮

使用指南

1.

#efefef;border:

1px solid #ccc;">  

1.$（'#pp'）.pagination（{  

2.    total:

2000,  

3.    pageSize:

10  

4.}）;  

属性

名称

类型

描述

默认值

total（总数）

number（数字）

总记录数，当创建分页时必须设置。

1

pageSize（每页记录数）

number（数字）

每页显示的记录数。

10

pageNumber（当前页码）

number（数字）

当分页创建完毕时显示当前页码。

1

pageList（可选择的每页记录数）

array（数组）

用户能够改变每页显示的记录数。

[10,20,30,50]

loading（是否正在载入）

boolean（布尔型）

定义数据是否正在载入。

false

buttons（按钮）

array（数组）

自定义按钮，每个按钮包含2个属性:

iconCls：

显示背景图片的CSS类

handler：

当按钮被点击时调用的一个句柄函数

null

showPageList（显示可选择的每页记录数）

boolean（布尔型）

定义是否显示可选择的每页记录数。

true

showRefresh（显示刷新）

boolean（布尔型）

定义是否显示刷新按钮。

true

beforePageText（输入框之前的文本）

string（字符串）

在输入框之前显示的符号。

Page

afterPageText（输入框之后的文本）

string（字符串）

在输入框之后显示的符号。

of{pages}

displayMsg（显示信息）

string（字符串）

在插件右上方显示分页信息。

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

事件

名称

参数

描述

onSelectPage

pageNumber,pageSize

当用户进行翻页时触发，回调函数包含2个参数:

pageNumber：

下一页的页码

pageSize：

下一页的显示记录数

onBeforeRefresh

pageNumber,pageSize

刷新之前触发,返回false将取消刷新。

onRefresh

pageNumber,pageSize

刷新之后触发。

onChangePageSize

pageSize

当用户修改每页显示记录数时触发。

方法

名称

参数

描述

options

none

返回分页属性对象。

loading

none

提醒分页插件正在载入。

loaded

none

提醒分页插件已经载入。

1.7搜索框

搜索框

使用$.fn.searchbox.defaults重载默认值。

依赖关系

∙菜单按钮

使用方法

创建搜索框

1.使用标签创建。

对input标签引用'easyui-searchbox'类。

1.  

2.    function qq（value,name）{  

3.        alert（value+":

"+name）  

4.    }  

5.  

6.

7.        searcher="qq"  

8.        prompt="Please Input Value" menu="#mm" style="width:

300px">  

9.

120px">  

10.    All News  

11.    Sports News  

12.  

2.使用脚本创建。

1.  

2.

120px">  

3.    All News  

4.    Sports News  

5.  

6.$（'#ss'）.searchbox（{  

7.    width:

200,  

8.    searcher:

function（value,name）{  

9.        alert（value + "," + name）  

10.    },  

11.    menu:

'#mm',  

12.    prompt:

'Please Input Value'  

13.}）;  

属性

名称

类型

描述

默认值

width（宽度）

number（数字）

设置组建的宽度。

auto

propmt（提醒）

string（字符串）

显示在搜索框的提醒信息。

''

value（值）

string（字符串）

搜索框的默认值。

''

menu（菜单）

selector（选择器）

搜索类型下拉菜单。

null

searcher（搜索器）

function（value,name）

当用户点击搜索按钮或者按下ENTER键的时候搜索函数将被调用。

null

方法

名称

参数

描述

options

none

返回搜索框属性对象。

menu

none

返回搜索类型菜单对象。

textbox

none

返回文本框对象。

getValue

none

返回当前搜索关键字。

setValue

value

设置新的搜索关键字。

getName

none

返回当前搜索类型。

destroy

none

清除搜索框组件

resize

width

重置搜索框组建的宽度。



1.8进度条

进度条

使用$.fn.progressbar.defaults重载默认值。

依赖关系

∙无

使用方法

创建进度条

进度条组件可以通过html标签或脚本两种方法创建。

使用html标签创建更容易，只需要对

获取/设置进度值

为进度条获取当前进度值并且设置一个新的进度值。

1.var value = $（'#p'）.progressbar（'getValue'）;  

2.if （value < 100）{  

3.    value += Math.floor（Math.random（） * 10）;  

4.    $（'#p'）.progressbar（'setValue', value）;  

5.}  

属性

名称

类型

描述

默认值

width（宽度）

string（字符串）

设置进度条的宽度。

auto

value（值）

number（数字）

当前进度，百分比数值。

0

text（文本）

string（字符串）

显示在组件中的文本模板。

{value}%

事件

名称

参数

描述

onChange

newValue,oldValue

当进度发生改变时触发。

方法

名称

参数

描述

options

none

返回进度条属性对象。

resize

width

重置进度条。

getValue

none

返回当前进度值。

setValue

value

设置一个新的进度值。



2.布局管理器

2.1控制面板

使用$.fn.panel.defaults重载默认值。

使用方法

创建控制面板

1.使用标签创建控制面板

使用标签创建控制面板十分简单，只须要对

2.使用脚本创建控制面板

下面的代码将创建一个工具栏在右上方的控制面板。

1.

10px;">  

2.    

panel content.

3.    

panel content.

4.  

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

6.  width:

500,  

7.  height:

150,  

8.  title:

 'My Panel',  

9.  tools:

 [{  

10.    iconCls:

'icon-add',  

11.    handler:

function（）{alert（'new'）}  

12.  },{  

13.    iconCls:

'icon-save'  

14.    handler:

function（）{alert（'save'）}  

15.  }]  

16.}）;   

移动控制面板

调用'move'方法可以将控制面板移动到一个新的位置。

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

2.  left:

100,  

3.  top:

100  

4.}）;   

载入内容

下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。

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

2.    href:

'content_url.php',  

3.    onLoad:

function（）{  

4.        alert（'loaded successfully'）;  

5.    }  

6.}）;  

属性

名称

类型

描述

默认值

title（标题）

string（字符串）

显示在控制面板顶部的标题文本。

null

iconCls（图标CSS类）

string（字符串）

在控制面板标题前显示一个16x16大小图标的CSS类。

null

width（宽度）

number（数字）

设置控制面板的宽度。

auto

height（高度）

number（数字）

设置控制面板的高度。

auto

left（左边距）

number（数字）

设置控制面板的左边距。

null

top（顶边距）

number（数字）

设置控制面板的顶边距。

null

cls（类）

string（字符串）

对控制面板引用一个CSS类。

null

headerCls（头部css类）

string（字符串）

对控制面板头部引用一个CSS类。

null

bodyCls（主体类）

string（字符串）

对控制面板主体引用一个CSS类。

null

style（样式）

object（对象）

给控制面板添加一个自定义的样式。

{}

fit（铺满浏览器）

boolean（布尔型）

设置为true时，控制面板的大小将铺满它所在的容器（浏览器）。

false

border（边框）

boolean（布尔型）

定义是否显示控制面板边框。

true

doSize（调整大小）

boolean（布尔型）

如果设置为true，在控制面板被创建时将被重置大小并且自动布局。

true

noh