jQuery UI 总结.doc

JQuery UI 总结Draggable 拖放:组件： jQuery-1.3.2.js ui.core.js ui.draggable.js例子：$(“#draggable”).draggable( );属性：addClass : true/false 阻止拖放元素的时候添加样式，默认trueappendTo: Element,Selector 拖放元素拖放去处.默认 parentaxia:String 空间上沿 X 轴，还是 Y轴拖放 默认false 只能选 x, y 一个cancel: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, andCusorAtObjectDefault:false设置拖动时候鼠标一直会所在的位置.top ,left ,right,bottom$(“.selector”).draggable(cursorAt: left: 5 );DelayIntegerDefault:0停顿多少毫秒后按住鼠标才能拖动元素.$(“.selector”).draggable ( delay:500)Distance IntegerDefault:1,鼠标移动元素之前必须要动多少的距离，也就是鼠标上来必须移动200px，元素才能动$(“.selector”).draggable(distance,200);Grid ArrayDefault:false网格坐标形状的移动.等于说每次移动 left:50, top:20;$(.d5).draggable( grid:50,20);HandleElement,SelectorDefault:false严格限制拖拽的对象为元素$(.selector).draggable(hande:h2)HelperString,FunctionDefault:original拖动的时候可以看见对象的一个副本,而不是拖动本身. original不出现副本.$(.selector).draggable(helper:clone) iframeFix Boolean,SelectorDefault:false位置属性，不过是用在框架上的.OpacityFloat Default:false当拖动的时候透明度改变$(.selector).draggable(opacity:0.25);refreshPositionBooleanDefautl:false未知应用属性RevertBoolean,StringDefault:false如果设置为true,当拖动的时候这个元素将会返回它的原始位置，string类型valid,invalid如果设置成 invalid ,如果拖放元素落在droppable上revert将会出现, 若为 valid ,其他方式$(“.selector”).draggable(revert:true)ReverDurationIntergerDefault:500/*返回原来的单位所花的时间,要和revert:true 合用.*/$(.d5).draggable( revertDuration:100 ,revert:true)ScopeStringDefault:true用来设置拖放和投放元素组,拖放元素和投放元素间相互转换.也不知道是干啥的.*/未知应用属性,ScrollBooleanDefault:true; /* 如果设置为true,容器在拖放的时候自动滚动, 汗.*/scrollSensitivityIntergerDefault:20/*搞不懂Scroll 属性是干什么的.*/scrollSpeedIntegerDefault:20/*未知*/SnapBoolean,SelectorDefault:false跟目标元素贴边,设为true 目标元素和所有元素都会贴边.$(“.selector”) . draggable ( snap:true ) snapModeStringDefault:both设置和其他元素贴边的方式.”outer”,inner,both.$(.selector).draggable(snapMode:over)snapToleranceIntegerDefault:20,鼠标移动元素和贴边的元素距离多少的时候，自动贴边.$(.selector).draggable(snapTolerance:40)zIndexIntegerDefault设置拖放元素的绝对拖放层数.$(“.selector”).draggable( zIndex:2700 )StackObjectDefault设置某些层的绝对层数，以至于其他的拖放元素不会在他上面，只能在他下面因为拖放元素的层数默认设置的是谁最先调用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 ”) 使对象无用.draggable (“ enable ” ) 是对象有用.draggable (option, optionName, value )2.droppable 抛下区域组件： jQuery-1.3.2.js ui.core.js ui.droppable.js例子：$(“#draggable”).draggable( );属性：Acceptselector,FunctionDefault:”*”放置区域只接受那些贴有标签的元素$(“.selector”).droppable( accept: .special )activeClassStringDefault:false当draggable元素被拖动的时候，droppable元素添加class样式$(“.selector”).droppable( activeClass : .ui-state-highlight ) addClassesBooleanDefault:trueaddClass : true/false 阻止抛下区域在其他元素拖放的时候添加样式，默认true$(.selector).droppable( addClasses:false );GreedyBooleanDefault:falseGreedy ，比如在一个div中嵌套一个 p的时候，把拖放元素放到p上，一般会也会触发div的函数，所以当greedy:设置为true 的时候，div函数就出发.实用属性ScopeStringDefault:default未知.ToleranceString Default:intersect做测试用 fit, intersect ,pointer, touch事件Activate 这个事件只要拖放draggable开始时候就会触发,如果你想使droppable在拖动的时候高亮就会有用$(.selector).droppable( active: function(event ,ui ) )Deactivate停止拖动的时候就会触发.$(.selector).droppable( deactivate:function(event, ui) Over hover 自己理解Out 溢出droppable 元素的时候触发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( );属性alsoResizeselector,jQuery,ElementDefault:false当改变大小的时候同时改变通属性的元素$( .selector ).resizeable( alsoResize : .other )AnimateBooleanDefault动态改变元素对象大小，很漂亮$(“.selector”).resizable( animate : true )animateDuration Integer,StringDefault:slow和animate合用，用来设置改变元素大小的时间,slow, normal,fast, 三档，还可以设置数值$(“.selector”).resizable (animate:true , animateDuration:500 )animateEasingStringDefault:”swing”直接怀疑是不是有这个改变效果aspectRatioBoolean,FloatDefault:false按你设置的比例值进行拖放改变$(.selector) .resizable( aspectRatio:.75 ) 9/16 宽高设置autoHideBooleanDefault:false可以隐藏显示拖拉小箭头的东西,设置为true的时候，小箭头隐藏.CancelSelectorDefault: input ,option阻止拖放某些元素 默认 input ,option$(.selector).resizable( cancel: button );Containment: Selector, Element, String,Array Default:false把拖放的对象固定在一个区域中改变大小，如parent,document.window,x1,y1,x2,y2,重要属性$( .selector).resizable ( containment: parent );DelayIntegerDefault:0停顿多少毫秒后按住鼠标才能改变元素大小.$(“.selector”).resizable ( delay:500)Distance IntegerDefault:1,鼠标移动元素之前必须要改变多少的距离，也就是鼠标必须拖拉移动200px，元素才改变大小$(“.selector”).resizable(distance,200);GhostBooleanDefault:false很奇特的一个属性.$(.selector).resizable( ghost : true );Grid ArrayDefault:false网格坐标形状的改变大小，.等于说每次改变大小 left:50, top:20;$(.d5).resizable( grid:50,20);HandlesString,Object Default: ”e, s, se”$(“.selector”).resizable ( handles: n, e, s, w )；一旦设置，前后左右均能拖放，但不能斜角拖放*/HelperStringDefault: false/拖放的时候可以增加的css效果.很难用上.另：$(#resizable).resizable(maxHeight: 250,maxWidth: 350,minHeight: 150,minWidth: 200/很有用的四个控制属性.);事件：Start Type: resizestartResizeType:resizeResizeType:resizeStopType:resizestop方法:.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( );属性：autoRefreshBooleanDefault:true未知属性.CancelSelectorDefault: input ,option阻止可以点击某些元素 默认 input ,option$(.selector).resizable( c