JQuery+UI+API

AJAX应用Ajax函数$(XXX).load(url[,data][,callback]);//用于加载HTML代码，并将其插入到XXXDOM文档中//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-若传入的为内容类型，则它将始终被发送到服务器。//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类型，表示是否执行传统的“浅”序列化jQueryUI界面主题库若需要更多的主题包，可以下载主题包jquery-ui-themes-1.8.1.zip，解压后其中的每一个文件夹代表一个主题。Draggable拖动组件需要导入以下ui文件：jquery.ui.core.jsjquery.ui.widget.jsjquery.ui.mouse.jsjquery.ui.draggable.js属性属性名数据类型默认值说明addClassesBooleantrue指示是否对可拖动元素添加ui-draggable类appendToElementSelectorparent为元素指定一个容器元素axisStringfalse限制元素的拖动轨迹，可接受x和y或falsecancelSelector:input指定非拖动手柄元素connectToSortableSelectorfalse允许将元素拖至一个可排序列表上，属性值为可排序列表的选择符containmentSelectorElementStringArrayfalse指定拖动元素的元素拖动区域，属性值可能为：parent，document，window[x1,y1,x2,y2]等cursorStringauto鼠标位于元素之上的cursor样式cursorAtObjectfalse指定拖动对象时，光标出现的位置。可以指定top、left、right、Bottom的一个或两个delayInteger0指定开始拖动时延迟的毫秒数distanceInteger1指定开始拖动的延迟距离像素gridArrayfalse使元素对齐页面上的虚拟网格。handleElementSelectorfalse指定拖动元素的拖动手柄helperStringFunctionoriginal指定拖动元素时显示的辅助元素。其值可以为original、clone或函数，函数必须返回一个DOM元素iframeFixBooleanSelectorfalse是否阻止iframe元素在拖动中捕获Mousemove事件，若为选择符，则只阻止匹配元素的事件。opacityFloatfalse指定辅助元素的不透明度revertBooleanStringfalse若为true则拖动停止时，将返回起始位置。若为invalid，则仅当未拖到目标位置才返回。valid则与invalid相反revertDurationInteger500指定返回起始位置的毫秒数scopeStringdefault指定拖放元素的目标集，与droppable中的同名属性使用scrollBooleantrue拖动容器元素时，是否自动滚动scrollSensitivityInteger20指定元素在距离容器边缘多少像素时开始滚动。scrollSpeedInteger20指定容器元素滚动的速度snapBooleanSelectorfalse指定拖动元素靠近选择元素的边缘会自动对齐snapModeStringboth指定元素对齐目标元素的那条边，可选值：inner、outer和bothsnapToleranceInteger20指定元素距离目标元素多少像素时，开始自动对齐zIndexIntegerfalse设置辅助元素的zIndex方法$(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属性属性数据类型默认值说明acceptSelectorFunction*设置投放对象可接受的元素，若提供函数，则把拖动元素作为第一个参数传给函数，则使该函数返回true的元素皆可activeClassStringfalse设置可接受的拖动元素处于拖动状态时，可投放对象的CSS样式addClassBooleantrue是否允许投放对象添加ui-droppable类greedyBooleanfalse是否在嵌套的投放对象中阻止事件传播hoverClassStringfalse设置拖动对象移动到投放对象上的CSS样式scopeStringdefault定义拖动对象和投放对象的目标集toleranceStringintersect设置可接受的拖放元素完成投放的触发模式，包括fit，intersect，pointer，touch等方法$(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属性属性数据类型默认值说明alsoResizeSelectorjQueryElementfalse当调整大小时，同步调整一组所选的元素的大小animateBooleanfa