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编码方式的字符串数据// 一般选择的元素为<form>标签$("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.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.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.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.draggable.jsjquery.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.cssjquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.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.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.selectable.js然后利用$(selector).selectable([option])函数，将目标元素（如<ol>）包装成jQuery对象。

通过按<Ctrl>可以点击选择多项CSS样式.ui-selecting类：选择某个项目时添加该类.ui-selected类：选定了某个项目时添加该类.ui-selectee类：可选择的元素添加该类属性方法可选对象，也包含disable、enable、option、destroy方法。