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