jQuery UI 主要组件使用中文文档参考

共计 20688 个字符，预计需要花费 52 分钟才能阅读完成。

jQuery UI 的 Draggable、Resizable、Droppable、Selectable、Sortable、Button、Dialog、Accordion、Tabs、Datepicker、Autocomplete、Progressbar、Slider等组件使用文档参考。

界面主题库

本中文文档基于 jquery-ui-themes-1.8.1.zip 进行解释说明。可以下载主题包jquery-ui-themes-1.8.1.zip，解压后其中的每一个文件夹代表一个主题。

Draggable拖动组件

需要导入以下ui文件：

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

属性

方法

$(selector).draggable(“disable”); // 禁止其拖动功能

$(selector).draggable(“enable”);       // 激活其拖动功能

$(selector).draggable(“destory”);      // 完全删除拖动功能

$(selector).draggable(“option”,name[, value]);  //获取/设置属性值

事件

1、 start事件：类型：dragstart，当开始拖动时触发

2、 drag事件：类型：drag，当拖动过程中移动鼠标时触发

3、 stop事件：类型：dragstop，当停止拖动时触发

事件绑定：

$(select).draggable(

    eventName:function(event,ui){

1、 event：表示事件对象

2、 ui：表示拖动元素对象，具有如下属性：

a)  helper：jQuery对象，表示辅助元素

b)  position：包含top属性和left属性的对象，

表示辅助元素相对于起始位置点的位置

c)  offset：包含top属性和left属性的对象，

           表示辅助元素相对于页面的绝对位置

}

);

Droppable投放组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

jquery.ui.droppable.js

属性

方法

$(selector).droppable(“disable”);      // 禁止投放功能

$(selector).droppable(“enable”);       // 激活投放功能

$(selector).droppable(“destroy”);      // 完全删除投放功能

$(selector).droppable(“option”,name[, value]);  //获取/设置属性值

事件

1、 activate事件：类型：dropactivate，当可接受对象开始拖动时触发

2、 deactivate事件：类型：dropdeactivate，当可接受对象停止拖动时触发

3、 over事件：类型：dropover，当可接受对象位于目标对象上方时触发

4、 out事件：类型：dropout，当可接受对象移出目标对象时触发

5、 drop事件：类型：drop，当可接受对象投放到目标对象时触发

事件绑定：

$(selector).droppable(

    eventName:function(event,ui){

1、 event：事件对象

2、 ui：包含附加信息的ui对象，具有以下属性：

a)  draggable：表示当前可拖动元素

b)  helper：表示当前可拖动元素的辅助元素

c)  position：一个包含top属性和left属性的对象，

表示辅助元素相对于起始点的位置

d)  offset：一个包含top属性和left属性的对象，

表示辅助元素相对于页面的绝对位置

}

);

Resizable缩放组件

需要添加样式表：ui.all.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.resizable.js

属性

方法

$(selector).resizable(“disable”);      // 禁用缩放功能

$(selector).resizable(“enable”);       // 激活缩放功能

$(selector).resizable(“destroy”)       // 完全删除缩放功能

$(selector).resizable(“option”,name[, value]);  //获取/设置属性

事件

1、 start事件：类型：resizestart，当开始缩放操作时触发

2、 resize事件：类型：resize，当通过缩放手柄操作时触发

3、 stop事件：类型：resizestop，当停止缩放操作时触发

事件绑定：

$(selector).resizable({

eventName:function(event,ui){

1、 event:事件对象

2、 ui:包含附加信息的ui对象，有以下属性：

a)   helper:一个包含helper元素的对象

b)   originalPosition:一个包含top属性和left属性的对象，

表示缩放前的位置

c)   position:一个包含top属性和left属性的对象，

表示当前位置

d)   size:一个包含width属性和height属性的对象，表示当前大小

}

});

Selectable选择组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.selectable.js

然后利用$(selector).selectable([option])函数，将目标元素（如<ol>）

包装成jQuery对象。

通过按<Ctrl>可以点击选择多项

CSS样式

.ui-selecting类：选择某个项目时添加该类

.ui-selected类：选定了某个项目时添加该类

.ui-selectee类：可选择的元素添加该类

属性

方法

可选对象，也包含disable、enable、option、destroy方法。

$(selector).selectable(“refresh”);

// 手动刷新，重新计算每个元素的大小和位置

事件

start事件：类型：selectablestart，当开始选择操作时触发

selecting事件：类型：selectableselecting，当选定元素时触发

selected事件：类型：selectableselected，当结束选择时触发

unselecting事件：类型：selectableunselecting，从选中项中，移出元素时触发

unselected事件：类型：selectableunselected，从选中项移出元素，并结束操作

stop事件：类型：selectablestop，当结束选择操作时触发

事件绑定：

$(selector).selectable({

    eventName:function(event,ui){

1、 event:事件对象

2、 ui:包含附加信息的ui对象

}

});

Sortable排序组件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.sortable.js

使用$(selector).sortable([options])构造方法将目标元素（如<ul>）包装

成jQuery对象。

属性

方法

可排序元素有disable、enable、option、destroy方法

$(selector).sortable(“serialize”[,option]);

// 将排序条目的id序列化成可提交的表单数据

$(selector).sortable(“toArray”);   // 将排序的条目id序列化成字符串数组

$(selector).sortable(“refresh”);   // 刷新可排序条目

$(selector).sortable(“refreshPositions”); // 刷新排序条目的缓存位置

$(selector).sortable(“cancel”); // 取消当前条目的顺序改变

事件

1、 start事件：类型：sortablestart，当开始排序时触发

2、 sort事件：类型：sortablesort，当排序期间触发

3、 change事件：类型：sortablechange，当元素位置发生改变时触发

4、 beforeStop事件：类型：sortbeforestop，当停止排序，但辅助元素仍可用

5、 stop事件：类型：sortstop，当排序停止时触发

6、 update事件：类型：sortupdate，当停止排序，且元素位置发生变化时触发

7、 receive事件：类型：sortreceive，当连接的列表从另个列表接受条目时触发

8、 remove事件：类型：sortremove，当从列表中拖出条目，并放置到另个列表时触发

9、 over事件：类型：sortover，当条目被移除列表时触发

事件绑定：

$(selector).sortable({

    eventName:function(event,ui){

1、 event:事件对象

2、 ui：包含附件信息的ui对象，ui包含以下属性：

a)   helper:表示当前排序元素的jQuery对象

b)   position：表示相对与原始位置，包含top属性和left属性

c)   offset:表示相对于页面的绝对位置，包含top属性和left属性

d)   item：表示当前拖动元素的jQuery对象

e)   placeholder:表示占位符

f)   sender:当前条目所属的排序对象

}

});

Button按钮组件

样式表文件jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.button.js

单选框和复选框按钮：

1、 为控件添加ID

2、 为控件添加<label>标签

3、 将一组单选按钮或复选框放置到某个容器中（如<div>或<span>）

4、 将容器用$(selector).buttonset()方法转换成jQuery对象

CSS样式

.ui-button：按钮的样式

.ui-button-text：按钮上文本的样式

属性

方法

$(selector).button([options]);  // 普通按钮的构造方法

$(selector).buttonset();        // 单选按钮或复选按钮的构造方法

也包含disable、enable、option、destroy方法

Dialog对话框组件

CSS样式表：jquery-ui.css

jquery.bgiframe-2.1.1.js

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js（可选）

jquery.ui.position.js

jquery.ui.resizable.js（可选）

jquery.ui.dialog.js

CSS样式

ui-dialog:对话框样式

ui-dialog-titlebar:对话框标题栏样式

ui-dialog-title:对话框标题字体样式

ui-dialog-titlebar-close:对话框标题栏关闭样式

切换对话框样式不同的方式：通过设置<link>标签的href的属性来使得样式的改变

属性

方法

$(selector).dialog()函数也有destroy、disable、enable、option方法。

$(selector).dialog(“close”);       // 关闭对话框

$(selector).dialog(“isOpen”);      // 判断对话框是否打开，返回Boolean

$(selector).dialog(“moveToTop”);   // 将对话框置顶

$(selector).dialog(“open”);        // 打开对话框

事件

1、 focus事件：类型：dialogfocus，当对话框获得焦点时触发

2、 open事件：类型：dialogopen，当对话框打开时触发

3、 dragStart事件：类型：dialogdragstop，当开始拖动对话框时触发

4、 drag事件：类型：dialogdrag，当拖动对话框时触发

5、 dragStop事件：类型：dialogdragstop，当停止拖动对话框时触发

6、 resizeStart事件：类型：dialogresizestart，当开始调整大小时触发

7、 resize事件：类型：dialogresize，当调整大小时触发

8、 resizeStop事件：类型：dialogresizestop，当结束调整大小时触发

9、 beforeclose事件：类型：dialogbeforeclose，

当试图关闭时触发，如果要阻止关闭，则在函数中返回false

10、     close事件：类型：dialogclose，当关闭对话框时触发

事件绑定：

$(selector).dialog({

    eventName:function(e,ui){

1、 e:事件对象

2、 ui:封装对象

3、 this:表示对话框元素

}

});

Accordion折叠面板组件

样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.accordion.js

创建容器元素（如<div>），用来初始化，添加每个面板的标题（如<h3>），

和面板的内容（如<div>）；

例如：

<divid=”accordion”>

    <h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow“>第一个面板的标题</a></h3>

    <div>第一个面板的内容</div>

<h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第二个面板的标题</a></h3>

    <div>第二个面板的内容</div>

</div>

CSS样式

ui-accordion:折叠面板样式

ui-accordion-header:折叠面板标题样式

ui-accordion-content:折叠面板内容样式

属性

方法

折叠面板部件也有destroy、disable、enable和option方法

$(selector).accordion(“activate”,index|selector);

//  用于激活指定的面板，index是从0开始的数字，也可以设置为选择器表达式，

若设置为false，则关闭所有面板，需要将collapsible设置为true

事件

1、 changestart事件：类型：accordionchangestart，当开始变化时触发

2、 change事件：类型：accordionchange，当变化时触发

事件绑定：

$(selector).accordion({

    eventName:function(event,ui){

1、 event：事件对象

2、 ui:包含附件信息的封装对象，具有以下属性：

a)   newHeader：表示当前激活的标题的jQuery对象

b)   oldHeader：表示上一个标题的jQeruy对象

c)   newContent：表示当前激活的内容的jQuery对象

d)   oldContent：表示上一个内容的jQuery对象

}

});

排序功能

设置步骤：

1、 将每个面板的标题和内容，分别放在各自的容器中。

例如：

<div id=”accordion”>

    <div>

           <h3><ahref=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第一个面板的标题</a></h3>

           <div>第一个面板的内容</div>

       </div>

       <div>

<h3><a href=”http://m.cnblogs.com/107742/2980845.html?full=1#” target=”_blank” rel=”nofollow”>第二个面板的标题</a></h3>

           <div>第二个面板的内容</div>

       </div>

</div>

2、 将整个折叠面板，通过accordion()方法构造面板元素

3、 对构造好的面板元素，通过sortable()方法构造可排序元素（见Sortablez组件）

4、 对标题绑定click事件，并在停止操作之后立即阻止事件传播

Tabs选项卡组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.tabs.js

创建选项卡容器（如<div>），在容器中创建每个面板的标题（如一个<ul>、

一组<li>和<a>），再为每个选项卡添加内容（如一组<div>），

标题的<a>通过herf连接到<div>的id属性，例如：href=”http://m.cnblogs.com/107742/2980845.html?full=1#tabs-1″ target=”_blank” rel=”nofollow”>

如果选项卡的内容为远程文件，则应将href属性设置为URL，此时自动生成内容面板。

CSS样式

ui-tabs:选项卡容器样式

ui-tabs-nav:选项卡标题栏样式

ui-tabs-panel:选项卡内容面板样式

属性

方法

选项卡也有destroy、disable、enable、option方法

$(selector).tabs(“add”, url,label[, index]);

// url为新选项卡的内容面板，label选项卡的标题，

index为插入位置的索引，默认末尾

$(selector).tabs(“remove”,index); // 移出选项卡，index从0开始

$(selector).tabs(“enable”,index); // 激活选项卡

$(selector).tabs(“disable”,index);    // 禁用选项卡

$(selector).tabs(“select”,index); // 选定一个选项卡，index可以选择符

$(selector).tabs(“load”,index);

// 用编程方式重新加载一个Ajax选项卡，即使cache=true

$(selector).tabs(“url”,index, url);   //改变Ajax选项卡加载的内容url

$(selector).tabs(“length”);     // 获取选项卡面板的选项卡数目

$(selector).tabs(“abort”);         // 终止所有正在运行的ajax请求和动画

$(selector).tabs(“rotate”,ms, [continuing]);

// 设置自动切换选项卡，ms为切换的时间，若为0或null则停止切换，continuing

    设置当用户选择了一个选项卡后，是否继续切换，默认为false

事件

1、 select事件：类型：tabsselect，当单击选项卡时触发

2、 load事件：类型：tabsload，当加载远程选项卡内容时触发

3、 show事件：类型：tabsshow，当显示一个选项卡时触发

4、 add事件：类型：tabsadd，当添加一个选项卡时触发

5、 remove事件：类型：tabsremove，当移出一个选项卡时触发

6、 enable事件：类型：tabenable，当激活一个选项卡时触发

7、 disable事件：类型：tabsdisable，当禁用一个选项卡时触发

事件绑定：

$(selector).tabs({

    eventName:function(event,ui){

1、 event：事件对象

2、 ui：包含额外事件信息的封装对象，包含了以下属性：

a)   tab:当前选定的选项卡的锚元素

b)   panel:当前选定的选项卡的内容面板元素

c)   index：当前选定的选项卡的索引值，从0开始

}

});

Datepicker日期选择器组件

CSS样式表：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.datepicker.js

jquery.ui.datepicker-zh-CN.js（可选，位于ui/i18n文件夹中，用于实现中文）

CSS样式

ui-datepicker

ui-datepicker-header

ui-datepicker-prev

ui-datepicker-next

ui-datepicker-title

ui-datepicker-month

ui-datepicker-year

ui-datepicker-calendar

ui-datepicker-week-end

ui-datepicker-week-end

ui-datepicker-other-month

ui-datepicker-buttonpanel

ui-datepicker-current

ui-datepicker-close

属性

方法

实例方法：

日期选择器也有destroy、disable、enable和option方法

$(selector).datepicker(“isDisabled”); // 是否被禁用

$(selector).datepicker(“hide”,[speed]);  // 关闭选择器，speed为速度

$(selector).datepicker(“show”);    // 调用先前的选择器

$(selector).datepicker(“getDate”); // 获取选择器中的当前日期

$(selector).datepicker(“setDate”,date);

// 设置当前日期可以为：02/26/2011 或 +1m+7d等

全局方法：

$.datepicker.setDefaults(Options); // 设置所有选择器的默认属性

$.datepicker.formatDate(format, date,setting);

// format为字符串，日期格式

    Date为要显示的日期值

    Setting为可选项，其值是对象，

    format可以使用的组合：d天数、dd天数（2位数字）、o年中的天数、

oo年中的天数、D日期短名称、DD日期长名称、m月份、mm月份

M月份短名称、MM月份长名称、y年份（两位数字）、yy年份（4位数字）

@自01/01/1970以来的毫秒数

$.datepicker.parseDate(format, value,setting);

// value为字符串，包含待提取的日期值

    例如：

    var date =

$.datepicker.parseDate(“yy年mm月dd日“, “2020年01月26日”);

事件

beforeShowDay事件：当选择器上的每一天显示之前，将触发此事件

事件绑定：

$(selector).datepicker({

    beforeShowDay:function(date){

1、 date：表示一个日期，

2、 该函数必须返回一个数组：

a)   [0]：true或false表示是否可选

b)   [1]：表示此日期的CSS类名，默认为“”

c)   [2]：表示元素是此日期的一个弹出提示（可选）

}

});

onChangeMonthYear事件：当选择器移动到新的年份或月份时触发

事件绑定：

$(selector).datepicker({

    onChangeMonthYear:function(year,month, inst){

1、 year:表示所选的年份

2、 month：表示所选的月份（1~12）

3、 inst：表示日期选择器，它指向所关联的输入控件

}

});

onClose事件：当选择器关闭时触发

事件绑定：

$(selector).datepicker({

    onClose:function(dateText,inst){

1、 dateText：表示所选择的日期，为文本字符串，如未选择，则为“”

2、 inst：表示日期选择器实例

}

});

onSelect事件：当选择一个日期时触发

事件绑定：

$(selector).datepicker({

    onSelect:function(dateText,inst){

// 参数同上

}

});

Autocomplete自动完成组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.position.js

jquery.ui.autocomplete.js

在Firefox中运行包含自动完成组件的网页时，如果在文本框中输入了中文，

则有可能不会正常弹出自动完成菜单，为了修复这个BUG，可以对

jquery.ui.autocomplete.js修改，在第97行添加以下代码：

.bind(“input.autocomplete”,function(){

    self.search(self.item);

})

属性

source属性：

若请求的资源位于同一个Web应用程序上，则应返回JSON数据，

可以用source指定一个字符串URL，例如：source:”search.asp”

还能够将source设置成一个回调函数：

source:function(request, response){

1、 request：表示请求的对象，request.item表示文本框中的值

2、 response：表示响应的回调函数，并返回字符串的数组或对象的数组：

a)  response(function(item){

returnArray|Object

1、item：表示提供的item属性进行筛选

});

}

方法

自动完成组件也有destroy、disable、enable、option方法

$(selector).autocomplete(“search”[,value]);

//  当数据可用时，显示建议数据，value为要搜索的数据，如果不指定该参数，

    则使用当前的输入值，如果提供一个字符串，且minLength为0，则显示所有项

$(selector).autocomplete(“close”); // 关闭已打开的菜单

事件

1、 search事件：类型：autocompletesearch，

对数据的请求前触发，若函数返回false则取消请求，不会显示建议条目

2、 open事件：类型：autocompleteopen，显示之前触发

3、 focus事件：类型：autocompletefocus，

焦点移至一个条目之前触发，此时ui.item指向获得焦点的条目，

此事件的默认操作是将文本框的字段，替换成获得焦点条目的值

4、 select事件：类型：autocompleteselect，

当选择条目时触发，ui.item指向所选项，item表示包含label

和value属性的对象，此事件的默认操作是将文本框的字段，替换成选中条目的值

5、 close事件：类型：autocompleteclose，隐藏菜单时触发

6、 change事件：类型：autocompletechange，在close事件之后触发

事件绑定：

$(selector).autocomplete({

    eventName:function(event,ui){

1、 event：表示事件对象

2、 ui：表示包含附加信息的对象

}

});

Progressbar进度条组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.progressbar.js

在页面上创建相应的HTML元素（如<div>），然后用构造函数初始化。

CSS样式

ui-progressbar:进度条容器的样式

ui-progressbar-value:进度条的样式

方法

进度条组件也有destroy、disable、enable、option方法

$(selector).progressbar([{value:number}]);    // 构造函数

$(selector).progressbar(“value”[,value]);    //获取/设置进度条的值

事件

1、 change事件：类型：当进度条值发生变化时触发

事件绑定：

$(selector).progressbar({

    change:function(event,ui){

1、 event：事件对象

2、 ui：进度条对象

}

});

Slider滑块组件

CSS样式表文件：jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.slider.js

在页面创建相应的HTML元素（如<div>），再用构造方法包装该元素

CSS样式

ui-slider-horizontal:滑块轨道

ui-slider-handle:滑块手柄

ui-slider-range:滑块范围

属性

方法

滑块也有destroy、disable、enable、option方法

$(selector).slider(“value”[,value]);  // 获取/设定单手柄滑块的值

$(selector).slider(“values”,index[, value]);

// 获取/设定多手柄滑块的值

事件

1、 start事件：类型：slidestart，当开始滑动时触发

2、 slide事件：类型：slide，当拖动滑块时触发

3、 change事件：类型：slidechange，当停止滑动或使用编程方法改变值时触发

4、 stop事件：类型：slidestop，当停止滑动时触发

事件绑定：

$(selector).slider({

    eventName:function(event,ui){

1、 event：事件对象

2、 ui：封装了属性的对象，有以下属性：

a)   value：获取当前手柄的值（单手柄）

b)   value[0]：获取当前手柄的值（多手柄）

}

});

摘录于：http://www.cnblogs.com/DaiMaDi/archive/2013/03/25/2980845.html