JQueryUI学习.docx
《JQueryUI学习.docx》由会员分享，可在线阅读，更多相关《JQueryUI学习.docx（25页珍藏版）》请在冰豆网上搜索。
JQueryUI学习
JQueryUI学习笔记——入门
--刘浪（liulanggood@）
目录
Position定位工具4
依赖的js库4
调用方法4
参数说明4
Animate颜色动态改变6
依赖的js库6
调用方法6
参数说明6
AddClass为匹配元素添加指定样式7
依赖的js库7
调用方法7
参数说明7
RemoveClass删除匹配元素的指定样式8
依赖的js库8
调用方法8
参数说明8
SwitchClass用第二个参数指定的class替换第一个参数指定的class9
依赖的js库9
调用方法9
参数说明9
ToggleClass切换元素样式10
依赖的js库10
调用方法10
参数说明10
Show增强显示功能，可接受高级效果11
依赖的js库11
调用方法11
参数说明11
Hide增强隐藏功能，可接受高级效果12
依赖的js库12
调用方法12
参数说明12
Toggle增强切换功能，可接受高级效果13
依赖的js库13
调用方法13
参数说明13
Effect在元素上使用一个具体的动画效果（非显示/隐藏逻辑）14
依赖的js库14
调用方法14
参数说明14
Button（按钮）15
依赖的js库15
调用方法15
参数说明15
事件16
方法16
Draggable（可拖动的）18
依赖的js库18
调用方法18
参数说明18
Droppable（可下降/可下沉的）19
依赖的js库19
调用方法19
参数说明19
Resizable（可改变大小的）20
依赖的js库20
调用方法20
参数说明20
Selectable（可被选择的）21
依赖的js库21
调用方法21
参数说明21
Sortable（可分类的）22
依赖的js库22
调用方法22
参数说明22
Tabs（页签）23
依赖的js库23
调用方法23
参数说明23
Slider（滑动器）24
依赖的js库24
调用方法24
参数说明24
Progressbar（进度）25
依赖的js库25
调用方法25
参数说明25
Dialog（弹出框）26
依赖的js库26
调用方法26
参数说明26
Accordion（折叠框）27
依赖的js库27
调用方法27
参数说明27
Position定位工具
通过设置【被定位元素的（水平、垂直）位置==目标元素的（水平、垂直）位置】定位ui构建相对于window/document/特定元素/光标/鼠标的位置。
依赖的js库
Jquery核心库
jquery.ui.position.js
调用方法
$（"#position3"）.position（{
my:
"rightcenter",
at:
"rightbottom",
of:
"#targetElement"
}）;
参数说明
参数名
类型
默认值
说明
my
String
定义被定位元素的（水平、垂直）位置。
参数（水平位置垂直位置），可取参数为"top","center","bottom","left","right"，例如：
"lefttop"or"centercenter"。
如果只一个参数时依据css的规则（"right"默认为"rightcenter","top"默认为"centertop"）。
at
String
定义目标元素的（水平、垂直）位置。
参数（水平位置垂直位置），可取参数为"top","center","bottom","left","right"，例如：
"lefttop"or"centercenter"。
如果只一个参数时依据css的规则（"right"默认为"rightcenter","top"默认为"centertop"）。
of
Selector/Element/jQuery/Event
目标元素。
如提供的是一个jquery选择器，第一个匹配元素被选用；如果提供一个jquery对象，第一个元素被选用；如果提供一个事件对象，pageX、pageY属性被选用；如果提供一个元素对象，该元素对象被选用。
offset
String
设置被定位元素在my=at确定位置后的偏移量，例如"5050"（lefttop），如果只提供一个值"50"默认等于"5050"。
collision
String
当被定位元素在窗口的某一边溢出时的冲突处理。
参数（左右边上下边），取值"flip"溢出时如果鼠标不在元素中心则边框不溢出，且鼠标调整到对边；"fit"溢出时检测，但是边框不能溢出；"none"不进行检测。
using
Function
回调函数，根据传递的参数设置位置。
例如：
using:
function（to）{
$（this）.css（
top:
to.top,
left:
to.left
}）
}
Animate颜色动态改变
扩展了JQuary核心库的animate功能，可以很好的动态改变颜色。
大量的使用了类迁移特性可以支持以下的属性的颜色动态改变（CSS样式）。
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（".selector"）.animate（styleObject,[duration]）
$（".selector"）.animate（{
backgroundColor:
"#DDDDDD",
borderBottomColor:
"rgb（66,89,198）",
color:
"green",
width:
500
},2000）;
参数说明
参数名
类型
默认值
说明
styleObject
Object
上面列举的可以用来改变的颜色属性以该对象的属性出现。
值可以用上面列出的任意一种方式进行设置。
同时，对于其他CSS样式的动态切换，也可以作为这个对象的属性的方式进行设置。
duration
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
AddClass为匹配元素添加指定样式
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.addClass（"selected",1000）;
参数说明
参数名
类型
默认值
说明
class
String
添加到元素上的css样式class
duration
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
RemoveClass删除匹配元素的指定样式
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.removeClass（"selected",1000）;
参数说明
参数名
类型
默认值
说明
class
String
添加到元素上的css样式class
duration
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
SwitchClass用第二个参数指定的class替换第一个参数指定的class
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.switchClass（"highlight","blue",1000）;
参数说明
参数名
类型
默认值
说明
remove
String
被替换的css样式class
add
String
更新的css样式class
duration
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
ToggleClass切换元素样式
如果指定的样式没有被应用则为选择的元素添加该样式，如果指定的样式已经被元素应用则删除该样式。
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.toggleClass（"selected",1000）;
参数说明
参数名
类型
默认值
说明
class
String
添加到元素上的css样式class
duration
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
Show增强显示功能，可接受高级效果
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.show（effect,[options],[speed],[callback]）;
参数说明
参数名
类型
默认值
说明
effect
String
要使用的效果。
可能的值：
'blind','clip','drop','explode','fold','puff','slide','scale','size','pulsate'（选择这些值时需要引入特点的js库）
options
Object/hash
一个对象/哈希包括效果的特定选项。
speed
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
callback
Function
效果完成后调用的方法
Hide增强隐藏功能，可接受高级效果
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.hide（effect,[options],[speed],[callback]）;
参数说明
参数名
类型
默认值
说明
effect
String
要使用的效果。
可能的值：
'blind','clip','drop','explode','fold','puff','slide','scale','size','pulsate'（选择这些值时需要引入特点的js库）
options
Object/hash
一个对象/哈希包括效果的特定选项。
speed
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
callback
Function
效果完成后调用的方法
Toggle增强切换功能，可接受高级效果
增强了jquery核心库的toggle功能，可以接受jqueryUI的高级效果，在切换元素上使用第一个参数指定的特殊效果。
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.toggle（effect,[options],[speed],[callback]）;
参数说明
参数名
类型
默认值
说明
effect
String
要使用的效果。
可能的值：
'blind','clip','drop','explode','fold','puff','slide','scale','size','pulsate'（选择这些值时需要引入特点的js库）
options
Object/hash
一个对象/哈希包括效果的特定选项。
speed
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
callback
Function
效果完成后调用的方法
Effect在元素上使用一个具体的动画效果（非显示/隐藏逻辑）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
$（selector）.effect（effect,[options],[speed],[callback]）;
参数说明
参数名
类型
默认值
说明
effect
String
要使用的效果。
可能的值：
'blind','clip','drop','explode','fold','puff','slide','scale','size','pulsate'（选择这些值时需要引入特点的js库）
options
Object/hash
一个对象/哈希包括效果的特定选项。
speed
String
normal
整个动态改变的切换过程持续的时间。
可以是slow，normal，fast，或指定具体的时间数值（单位是毫秒）。
callback
Function
效果完成后调用的方法
Button（按钮）
按钮组件将普通的按钮元素，input按钮，提交或重置按钮，radio，checkbox转换为统一风格和行为的元素，当使用input按钮，提交或重置按钮时仅支持文本不支持图标。
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.button.js
调用方法
$（"button"）.button（）;
$（"#radio"）.buttonset（）;radio/checkbox适用
参数说明
参数名
类型
默认值
说明
disabled
Boolean
false
设置/获取按钮的disables（true）或enables（false）状态，可以在初始化（创建）的时候进行设置。
例如：
$（".selector"）.button（{disabled:
true}）;
创建后设置如下：
//getter
vardisabled=$（".selector"）.button（"option","disabled"）;
//setter
$（".selector"）.button（"option","disabled",true）;
text
Boolean
true
是否显示任何文本，当设置为false（不显示文本），图标（见图标选项）必须启用，否则会被忽略。
可以在初始化时设置：
$（".selector"）.button（{text:
false}）;
创建后设置如下：
//getter
vartext=$（".selector"）.button（"option","text"）;
//setter
$（".selector"）.button（"option","text",false）;
icons
Object
{primary:
null,secondary:
null}
显示图标，或无文字（见文本选项）。
Primary（主要）图标默认显示在标签文本的左侧，secondary（次要）默认显示在标签文本的右侧。
Primary和secondary的值必须是一个类名（字符串），如“ui-icon-gear”。
只用一个图标：
{Primary：
'ui-icon-locked'}。
同时使用2个图标：
{Primary：
'ui-icon-gear”，secondary：
'ui-icon-triangle-1-s'}
$（".selector"）.button（{icons:
{primary:
'ui-icon-gear',secondary:
'ui-icon-triangle-1-s'}}）;
//getter
varicons=$（".selector"）.button（"option","icons"）;
//setter
$（".selector"）.button（"option","icons",{primary:
'ui-icon-gear',secondary:
'ui-icon-triangle-1-s'}）;
label
String
按钮的html内容或者其value值
按钮的现实文本。
如果没有指定（null），则使用元素的html内容，或者当其为input按钮/提交或重置按钮时使用其value值，当其为radio/checkbox时使用关联的label标签的html内容。
$（".selector"）.button（{label:
"customlabel"}）;
//getter
varlabel=$（".selector"）.button（"option","label"）;
//setter
$（".selector"）.button（"option","label","customlabel"）;
事件
事件名
类型
说明
create
buttoncreate
按钮创建时被触发。
提供一个回调函数，创建事件作为一个初始化参数，$（".selector"）.button（{
create:
function（event,ui）{...}}）;
$（".selector"）.bind（"buttoncreate",function（event,ui）{...}）;
方法
方法名
调用方式
说明
destroy
.button（"destroy"）
删除按钮的全部功能，使其返回到pre-init状态。
disable
.button（"disable"）
按钮禁用
enable
.button（"enable"）
按钮启用
option
.button（"option",optionName,[value]）
获取/设置按钮的任意属性，当不提供value时获取指定属性名的value值。
option
.button（"option",options）
提供一个属性对象设置按钮的多个属性
widget
.button（"widget"）
返回按钮对象
refresh
.button（"refresh"）
刷新按钮的视觉状态。
用于本地元素被选中或者禁用状态改变后更新按钮状态。
Draggable可拖动的
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
调用方法
$（selector）.draggable（options）;
参数说明
参数名
类型
默认值
说明
disabled
Boolean
false
设置/获取disables（true）或enables（false）状态，可以在初始化（创建）的时候进行设置。
例如：
$（".selector"）.button（{disabled:
true}）;
创建后设置如下：
//getter
vardisabled=$（".selector"）.button（"option","disabled"）;
//setter
$（".selector"）.button（"option","disabled",true）;
addClasses
Boolean
true
设置是否能通过ui-draggable样式装饰。
主要是为了通过.draggable（）初始化很多元素时的性能优化考虑的。
这个设置不会影响ui-draggable-dragging样式，true表示ui-draggable样式被添加到该元素；false反之。
Droppable（可下降/可下沉的）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Resizable（可改变大小的）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Selectable（可被选择的）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Sortable（可分类的）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Tabs（页签）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Slider（滑动器）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
Progressbar（进度）
依赖的js库
Jquery核心库
jquery.ui.core.js
jquery.effects.core.js
调用方法
参数说明
参数名
类型
默认值
说明
升级会员 