jQuery框架和AJAX技术第七章.ppt

第七章
jQuery UI插件
回顾
AJAX基础
AJAX简单示例
jQuery中AJAX相关工具函数
通过jQuery完成AJAX操作
jQuery中的AJAX全局函数
目标
jQuery UI基础
jQuery交互组件
jQuery页面部件
jQuery UI基础
jQuery UI是构建于jQuery之上的一套用户界面开发库
其中包括许多交互操作功能和用户界面组件
下载jQuery UI库/download
搭建环境
将jQuery UI库中的js文件夹和css文件夹复制到网站根目录下
在文档首部通过<link>或<script>标记包含所需的支持文件
<script type="text/javascript" src="js/jquery-"></script>
<script type="text/javascript" src="js/jquery-ui-"></script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-"/>
拖动组件一
属性
类型
默认值
说明
axis
String
false
限制可拖动元素沿着一个轴移动,可接受字符串x和y或布尔值false
cancel
Selector
:input,option
阻止从指定的元素上开始拖动
containment
Selector Element String Array
false
阻止将可拖动对象拖出指定元素或区域的边界。可能的值包括:parent、document、window、[x1,y1,x2,y2]
cursor
String
auto
指定鼠标指针位于可拖动对象上时使用的CSS cursor属性
cursorAt
Object
false
指定一个默认的相对位置,拖动对象时光标将出现在这里。其类型为映射,可指定top、left、right和bottom中的一个或两个
delay
Integer
0
指定开始拖动时延时的毫秒数
draggable([options])
拖动组件二
属性
类型
默认值
说明
Distance
Integer
1
按下鼠标后开始拖动前必须移动鼠标的距离,以像素为单位。此选项用于防止单击一个元素时产生不必要的拖动
Grid
Array
false
使可拖动元素对齐页面上的一个虚拟网格。可接收数组[x,y],其中x和y分别为网格的宽度和高度
Handle
Element、Selector
false
在可拖动元素中指定用于放置拖动指针的特定区域
Helper
String
original
指定拖动显示的辅助元素。其值可为字符串original或clone
Opacity
Float
false
指定拖动过程中辅助元素的不透明度
Revert
Boolean,String
false
若设置为true,则当停止拖动时元素将返回其起始位置。若设置为字符串invalid,则仅在将元素未拖到可放置位置时才会返回,而字符串valid则和其相反
revertDuration
Integer
500
指定元素返回其起始位置所需要的毫秒数。若将revert设置为false,则忽略此选项
拖动组件相关命令
创建一个可拖动对象后,可调用disable命令来禁止其可拖动功能:
$("#myDiv").draggable("disable");
禁止可拖动功能后,通过调用enable命令来重新激活对象的可拖动功能:
$("#myDiv").draggable("enable");
若要获取或设置可拖动属性,可调用option命令:
$("#myDiv").draggable("option",optionName[,value])
如果要从一个对象中完全删除可拖动功能,则可以对其调用destroy命令:
$("#myDiv").draggable("destroy");
拖动事件
start事件:其类型为dragstart,当开始拖动时触发该事件
drag事件:其类型为drag,在拖动过程中移动鼠标时将触发该事件
stop事件,其类型为dragstop,当停止拖动时将触发该事件
拖动事件处理程序
eventType指定要绑定的事件名称
ui为包含附加信息的jQuery对象
helper:一个jQuery对象,表示可拖动助手(helper)元素
position:一个包含top属性和left属性的对