jQuery UI 总结

Draggable 拖放:

组件：

jQuery-1.3.2.js ui.core.js ui.draggable.js 例子：

$(“#draggable”).draggable( ); 属性： addClass : true/false 阻止拖放元素的时候添加样式，默认true

appendTo: Element,Selector 拖放元素拖放去处.默认 „parent axia

cancel

:String 空间上沿 X 轴，还是 Y轴拖放 默认‟false‟ 只能选 „x‟, „y‟ 一个 :Selector 阻止拖放某些元素 默认 „input ,option‟

$('.selector').draggable({ cancel: 'button' });

connectToSortable: Selector可以把复制后的对象元素直接动态添加到ul#myList上去.. 默认 false

$('.selector').draggable({ connectToSortable: 'ul#myList' });

Containment: Selector, Element, String,Array Default:false 把拖放的对象固定在一个区域中拖放，如parent,document.window,[x1,y1,x2,y2],重要属性.

$('.d7').draggable({ containment:'#myList'})

Cusor: string Default:‟auto‟

改变拖放时候的鼠标样式,样式详见 CSS cursor:属性,常用 crosshair, and…

CusorAt Object Default:false

设置拖动时候鼠标一直会所在的位置..top ,left ,right,bottom $(“.selector”).draggable({cursorAt: {left: 5} });

QQ 121914336 作者 JS basic

Delay Integer Default:0

停顿多少毫秒后按住鼠标才能拖动元素..

$(“.selector”).draggable ({ delay:500}) Distance Integer Default:1

,鼠标移动元素之前必须要动多少的距离，也就是鼠标上来必须移动200px，元素才能动

$(“.selector”).draggable(„distance‟,‟200‟);

Grid Array Default:false 网格坐标形状的移动.等于说每次移动 left:50, top:20;

$('.d5').draggable({ grid:[50,20]});

Handle Element,Selector Default:false 严格拖拽的对象为

元素 $(„.selector‟).draggable({hande:‟h2‟})

Helper String,Function Default:‟original‟

拖动的时候可以看见对象的一个副本,而不是拖动本身.. original不出现副本..

$(„.selector‟).draggable({helper:‟clone‟})

Default:false

iframeFix Boolean,Selector 位置属性，不过是用在框架上的.. Opacity Float 当拖动的时候透明度改变…

refreshPosition 未知应用属性

Default:false

$(„.selector‟).draggable({opacity:0.25});

Boolean

Defautl:false

Revert Boolean,String Default:false

如果设置为true,当拖动的时候这个元素将会返回它的原始位置，string类型‟valid‟,‟invalid‟ 如果设置成 invalid ,如果拖放元素落在droppable上revert将会出现, 若为 valid ,其他方式…

$(“.selector”).draggable({revert::true})

ReverDuration Interger Default:500 /*返回原来的单位所花的时间,要和revert:true 合用..*/

$('.d5').draggable({ revertDuration:100 ,revert:true})

Scope String Default:true

用来设置拖放和投放元素组,拖放元素和投放元素间相互转换...也不知道是干啥的...*/未知应用属性,

Scroll Boolean Default:true; /* 如果设置为true,容器在拖放的时候自动滚动, 汗...*/

QQ 121914336 作者 JS basic

scrollSensitivity Interger /*搞不懂Scroll 属性是干什么的….*/ scrollSpeed /*未知*/

Snap Boolean,Selector Default:false 跟目标元素贴边,设为true 目标元素和所有元素都会贴边..

$(“.selector”) . draggable ({ snap:true })

snapMode String Default:‟both‟ 设置和其他元素贴边的方式…..”outer”,‟inner‟,‟both‟..

$(„.selector‟).draggable({snapMode:‟over‟})

Integer

Default:20 Default:20

snapTolerance Integer Default:20 ,鼠标移动元素和贴边的元素距离多少的时候，自动贴边..

$(„.selector‟).draggable({snapTolerance:40})

zIndex Integer Default 设置拖放元素的绝对拖放层数…..

$(“.selector”).draggable({ zIndex:2700 })

Stack Object Default

设置某些层的绝对层数，以至于其他的拖放元素不会在他上面，只能在他下面…

因为拖放元素的层数默认设置的是谁最先调用draggable,这个元素就会在最下面..而stack可以改变这个默认行为

$(“.selector”).draggable({stack:{group:”#set div”,min: 1}})

事件

Start 拖放开始时候触发事件 $(“.selector”).draggable( { Start:function( event, ui ){ } } ) Drag

拖放的时候触发事件

$(“.selector”).draggable( { Drag:function( event , ui){ } })

Stop 拖放停止的时候触发事件 $(“.selector”).draggable( {

Stop:function (event, ui){ }

}) 方法

.draggable (“ destroy ”) 销毁对象 .draggable (“ disable ”) 使对象无用

QQ 121914336 作者 JS basic

.draggable (“ enable ” ) 是对象有用 .draggable („option‟, optionName, [value] )

2.droppable 抛下区域

组件：

jQuery-1.3.2.js ui.core.js ui.droppable.js 例子：

$(“#draggable”).draggable( ); 属性：

Accept selector,Function 放置区域只接受那些贴有标签的元素

Default:”*”

$(“.selector”).droppable({ accept: „.special‟ })

activeClass String Default:false

当draggable元素被拖动的时候，droppable元素添加class样式

addClasses

Boolean

Default:true

addClass : true/false 阻止抛下区域在其他元素拖放的时候添加样式，默认true $(„.selector‟).droppable( { addClasses:false } );

Greedy Boolean Default:false

Greedy ，比如在一个div中嵌套一个 p的时候，把拖放元素放到p上，一般会也会触发div的函数，所以当greedy:设置为true 的时候，div函数就出发..实用属性 Scope 未知..

Tolerance String 做测试用… fit, intersect ,pointer, touch

事件

Activate 这个事件只要拖放draggable开始时候就会触发,如果你想使droppable在拖动的时候高亮就会有用

$(“.selector”).droppable( { activeClass : ‟ .ui-state-highlight ‟ } )

String Default:‟default‟

Default:‟intersect‟

$(„.selector‟).droppable( { active: function(event ,ui )} )

Deactivate

停止拖动的时候就会触发.

$(„.selector‟).droppable( { deactivate:function(event, ui) { }} Over hover 自己理解

Out 溢出droppable 元素的时候触发…

QQ 121914336 作者 JS basic

Drop 把draggable放到droppable 区域中区。 方法： 方法

.draggable (“ destroy ”) 销毁对象 .draggable (“ disable ”) 使对象无用

.draggable (“ enable ” ) 使对象有用 .draggable („option‟, optionName, [value] )

3，Resizable 设置大小

组件：

jQuery-1.3.2.js ui.core.js ui.resizable.js 例子：

$(“#resizable”).resizable( );

属性

alsoResize selector,jQuery,Element 当改变大小的时候同时改变通属性的元素

Animate Boolean 动态改变元素对象大小，很漂亮

Default

Default:false

$( „.selector‟ ).resizeable( {alsoResize : „.other‟ } )

$(“.selector”).resizable({ animate : true })

animateDuration Integer,String Default:‟slow‟

和animate合用，用来设置改变元素大小的时间,slow, normal,fast, 三档，还可以设置数值 $(“.selector”).resizable ({animate:true , animateDuration:500 }) animateEasing String 直接怀疑是不是有这个改变效果…

Default:”swing”

aspectRatio Boolean,Float Default:false 按你设置的比例值进行拖放改变 $(„.selector‟) .resizable( { aspectRatio:.75} ) 9/16 宽高设置 autoHide Boolean Default:false

可以隐藏显示拖拉小箭头的东西,设置为true的时候，小箭头隐藏..

Cancel Selector Default:‟ input ,option‟ 阻止拖放某些元素 默认 „input ,option‟

$('.selector').resizable({ cancel: 'button' });

QQ 121914336 作者 JS basic

Containment: Selector, Element, String,Array Default:false 把拖放的对象固定在一个区域中改变大小，如parent,document.window,[x1,y1,x2,y2],重要属性…

Delay Integer Default:0

停顿多少毫秒后按住鼠标才能改变元素大小..

$(“.selector”).resizable ({ delay:500})

Distance Integer Default:1

,鼠标移动元素之前必须要改变多少的距离，也就是鼠标必须拖拉移动200px，元素才改变大小

$(“.selector”).resizable(„distance‟,‟200‟);

Default:false

$( „.selector‟).resizable ({ containment: „parent ‟} );

Ghost Boolean 很奇特的一个属性..

$(„.selector‟).resizable({ ghost : true } );

Grid Array Default:false

网格坐标形状的改变大小，.等于说每次改变大小 left:50, top:20;

$('.d5').resizable({ grid:[50,20]});

Handles String,Object Default: ”e, s, se” $(“.selector”).resizable ({ handles: „ n, e, s, w ‟ })； 一旦设置，前后左右均能拖放，但不能斜角拖放*/

Helper String Default: false //拖放的时候可以增加的css效果..很难用上..

另：$(\"#resizable\").resizable({

maxHeight: 250, maxWidth: 350,

minHeight: 150, minWidth: 200 //很有用的四个控制属性....

});

事件：

Start Resize Resize Stop

Type: resizestart Type:resize Type:resize Type:resizestop

QQ 121914336 作者 JS basic

方法:

.resizable (“ destroy ”) 销毁对象 . resizable (“ disable ”) 使对象无用

. resizable (“ enable ” ) 使对象有用 . resizable („option‟, optionName, [value] )

4.selectable ol,ul列表选择

组件：

jQuery-1.3.2.js ui.core.js ui.selectable.js 例子：

$(“#selectable”).selectable( ); 属性：

autoRefresh 未知属性..

Cancel Selector Default:‟ input ,option‟ 阻止可以点击某些元素 默认 „input ,option‟

Distance integer Default:0

/* distance:20 在像素上,selecting将会触发..可是..在那里的像素？*/难用元素 Filter Selector /*过滤那点元素..*/

Default: “*”

$('.selector').resizable({ cancel: 'button' }); Delay Integer Default:0

延迟点击效果,不过效果好像出不来…建议弃用,因为如果按照鼠标出现多选框的时候，

Boolean

Default:true

这个东西是没有用的...

Tolerance String Default:”touch” tolerance:touch.. fit 不允许用鼠标弄多选框的,重要项... 事件：

Selected Selecting Start Stop Unselected

Type:selected Type:selecting

Type:selectablestart Type:selectablestop Type:unselected

Unselecting Type:unselecting

这几个事件触发情况具体到项目的时候理解最好。

方法:

.selectable (“ destroy ”) 销毁对象 . selectable (“ disable ”) 使对象无用

QQ 121914336 作者 JS basic

不过怎么用不知道

QQ 121914336 作者 JS basic

. selectable (“ enable ” ) 使对象有用

. selectable („option‟, optionName, [value] )

. selectable („refresh‟) 能够刷新每个改变size的元素..