当前位置:文档之家› JQuery+UI+API

JQuery+UI+API

AJAX应用

Ajax函数

$("XXX").load(url [, data][, callback]);

// 用于加载HTML代码,并将其插入到XXX DOM文档中

// data为参数,为字符串或映射(键值对)例如:key1=value1&key2=value2 // 若参数data为字符串或无,则发送的请求类型为get,否则为post

// callback为回调函数,callback可以接受三个参数,例如:

// function (responseText, textStatus, XMLHttpRequest){ // responseText为响应文本

// textStatus为响应状态文本

}

$.getJSON(url [, data][, callback(data, textStatus)]);

// 用于加载JSON数据

// callback为回调函数:

// function (data, textStatus){

// data为服务器返回的数据

// textStatus为响应状态文本

}

$.getScript(url [, callback(data, textStatus)]);

// 用于动态加载JavaScript脚本文件

// function (data, textStatus){

// data为服务器响应的数据,即JavaScript文件包含的源代码}

$.get(url [, data][, callback][, dataType]);

// 用于加载更多类型的数据

// dataType为字符串,用于指定服务器返回的数据类型

// 可选值有:“xml”、“html”、“script”、“json”、“jsonp”、“text”

// callback为回调函数:

// function (data, textStatus, XMLHttpRequest){

// data为服务器返回的数据

}

$.post(url [, data][, callback][, dataType]);

// 参数用法同$.get();

// 使用post请求永远都不会缓存

$.ajax(settings);

// 使用ajax请求访问服务器

// settings为json类型的对象,用于设置参数的属性,例如:{url:"test.html"} // settings的选项:

// async:指定是否以异步请求方式发送;默认为true

// cache:指定是否进行缓存;

默认为true,当dataType为script或jsonp时,则默认为false;

// contentType:发送的数据类型;

默认为application/x-www-form-urlencoded

若传入的为内容类型,则它将始终被发送到服务器。

// data:发送到服务器的参数;

必须为键值对或序列化的字符串。

// dataType:请求的数据类型的字符串表示形式;

可选值有:xml、html、script、json、jsonp、text

// username:指定用于响应HTTP访问认证的用户名

// password:指定用于响应HTTP访问认证的密码

// timeout:指定请求超时时间

// type:指定请求的类型;可以为post、get等

// url:指定请求的服务器地址

// beforeSend(XMLHttpRequest):用于设置请求之前的回调函数,并传入XMLHttpRequest作参数

// error(XMLHttpRequest, textStatus, errorThrown):

用于设置请求失败的回调函数,并传入XMLHttpRequest、

一个表示错误类型的字符串和异常对话作为参数

// success(data, textStatus, XMLHttpRequest):

用于设置请求成功时的回调函数,并传入返回的数据、一个包含成功

代码的字符串和XMLHttpRequest作为参数

// complete(XMLHttpRequest, textStatus):

用于设置请求完成时的回调函数(无论成功还是失败)

传入XMLHttpRequest对象和一个包含成功或失败代码的字符串

数据处理

$("XXX").serialize();

// 将DOM元素的数据,序列化成标准的URL编码方式的字符串数据

// 一般选择的元素为

标签

$("XXX").serializeArray();

// 将DOM元素的数据,序列化成JSON类型的数组

$.param(object [, traditional]);

// 将指定数据序列化成标准的URL编码方式的字符串数据

// object为要进行序列化的对象或数组

// traditional为Boolean类型,表示是否执行传统的“浅”序列化jQuery UI

界面主题库

若需要更多的主题包,可以下载主题包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])函数,将目标元素(如

    )包装成jQuery对象。

    通过按可以点击选择多项

    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])构造方法将目标元素(如