判斷數字
() | ||||
判斷一個數字是否為有限的 | ||||
[用法] | ||||
isFinite(n) | ||||
[參數] | ||||
| ||||
[傳回值] | ||||
|
判斷非數字
() | ||||
檢測非數字值 | ||||
[用法] | ||||
isNaN(x) | ||||
[參數] | ||||
| ||||
[傳回值] | ||||
|
isFinite() | ||||
判斷一個數字是否為有限的 | ||||
[用法] | ||||
isFinite(n) | ||||
[參數] | ||||
| ||||
[傳回值] | ||||
|
isNaN() | ||||
檢測非數字值 | ||||
[用法] | ||||
isNaN(x) | ||||
[參數] | ||||
| ||||
[傳回值] | ||||
|
disable | ||
| ||
禁用(true)或允許(false)物件droppable屬性。 可以在初始化的時候設定(第一次創建)draggable。 | ||
Code examples | ||
初始化droppable物件的 disabled選項 | ||
$( ".selector" ).droppable({ disabled: true }); | ||
在初始化之後取得或設定disabled選項 | ||
//獲取 var disabled = $( ".selector" ).droppable( "option", "disabled" ); //設定 $( ".selector" ).droppable( "option", "disabled", true ); |
accept | ||
| ||
droppable會接受所有selector選擇的draggable物件。 如果參數為Function,每一次draggable的時候都會呼叫這個指定的Function。 如果這個draggable動作是可以被接受的,那麼這個Function就要回傳true。 | ||
Code examples | ||
初始化droppable物件的accept選項 | ||
$( ".selector" ).droppable({ accept: '.special' }); | ||
在初始化之後取得或設定accept選項 | ||
//獲取 var accept = $( ".selector" ).droppable( "option", "accept" ); //設定 $( ".selector" ).droppable( "option", "accept", '.special' ); |
activeClass | ||
| ||
當draggable正在執行的時候,指定的activeClass會被加入。 | ||
Code examples | ||
初始化droppable物件的activeClass選項 | ||
$( ".selector" ).droppable({ activeClass: 'ui-state-highlight' }); | ||
在初始化之後取得或設定activeClass選項 | ||
//獲取 var activeClass = $( ".selector" ).droppable( "option", "activeClass" ); //設定 $( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' ); |
addClasses | ||
| ||
如果參數設定為false,就不會增加 ui-draggable 這個類別。 這是以效能最佳化作為目標 。draggable() 會對許多元素作初始化。 | ||
Code examples | ||
初始化droppable物件的addClasses選項 | ||
$( ".selector" ).droppable({ addClasses: false }); | ||
在初始化之後取得或設定addClasses選項 | ||
//獲取 var addClasses = $( ".selector" ).droppable( "option", "addClasses" ); //設定 $( ".selector" ).droppable( "option", "addClasses", false ); |
greedy | ||
| ||
如果參數設定為true,則不允許巢狀的droppable。 舉例來說,若有兩層div物件(都是droppable的),將一個draggable物件拖曳至內層div時, 參數設定為true則外層不會觸發dropped,若參數設定為false則外層會觸發dropped。 | ||
Code examples | ||
初始化droppable物件的greedy選項 | ||
$( ".selector" ).droppable({ greedy: true }); | ||
在初始化之後取得或設定greedy選項 | ||
//獲取 var greedy = $( ".selector" ).droppable( "option", "greedy" ); //設定 $( ".selector" ).droppable( "option", "greedy", true ); |
hoverClass | ||
| ||
如果指定了這個參數, 拖曳draggable物件經過至droppable物件上方的時候,指定的class會增加到droppable物件上。 | ||
Code examples | ||
初始化droppable物件的hoverClass選項 | ||
$( ".selector" ).droppable({ hoverClass: 'drophover' }); | ||
在初始化之後取得或設定hoverClass選項 | ||
//獲取 var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" ); //設定 $( ".selector" ).droppable( "option", "hoverClass", 'drophover' ); |
scope | ||
| ||
用於配對draggable物件和droppable物件。 除了droppable指定的accept物件以外, 和droppable擁有相同scope的draggable物件也同樣可以被droppable物件接受。 | ||
Code examples | ||
初始化droppable物件的scope選項 | ||
$( ".selector" ).droppable({ scope: 'tasks' }); | ||
在初始化之後取得或設定scope選項 | ||
//獲取 var scope = $( ".selector" ).droppable( "option", "scope" ); //設定 $( ".selector" ).droppable( "option", "scope", 'tasks' ); |
tolerance | ||
| ||
選擇一種模式,來判斷一個draggable物件是否有"經過"一個droppable物件。 可接受的參數:'fit', 'intersect', 'pointer', 'touch' fit :draggable物件和droppable完全重疊 intersect :draggable 和droppable至少重疊50% pointer :滑鼠指標重疊droppable touch :draggable和droppable有任何重疊 | ||
Code examples | ||
初始化droppable物件的tolerance選項 | ||
$( ".selector" ).droppable({ tolerance: 'fit' }); | ||
在初始化之後取得或設定tolerance選項 | ||
//獲取 var tolerance = $( ".selector" ).droppable( "option", "tolerance" ); //設定 $( ".selector" ).droppable( "option", "tolerance", 'fit' ); |
activate | |
| |
這個事件會在任何一個draggable物件開始拖曳的時候觸發。 例如在開始拖曳一個draggable物件的時候,我們可以讓可以接受的droppable物件亮起來。 | |
Code examples | |
初始化 activate 事件 | |
$( ".selector" ).droppable({ activate: function(event, ui) { ... } }); | |
綁定 activate 事件 | |
$( ".selector" ).bind( "dropactivate", function(event, ui) { ... }); |
deactivate | |
| |
這個事件會在可接受的draggable物件停止拖曳的時候觸發。 | |
Code examples | |
初始化 deactivate 事件 | |
$( ".selector" ).droppable({ deactivate: function(event, ui) { ... } }); | |
綁定 deactivate 事件 | |
$( ".selector" ).bind( "dropdeactivate", function(event, ui) { ... }); |
over | |
| |
這個事件會在draggable物件"經過"droppable物件的時候觸發(經過的定義參考tolerance屬性) | |
Code examples | |
初始化 over 事件 | |
$( ".selector" ).droppable({ over: function(event, ui) { ... } }); | |
綁定 over 事件 | |
$( ".selector" ).bind( "dropover", function(event, ui) { ... }); |
out | |
| |
這個事件會在一個draggable物件離開一個droppable的時候觸發 (離開的定義參考tolerance屬性) | |
Code examples | |
初始化 out 事件 | |
$( ".selector" ).droppable({ out: function(event, ui) { ... } }); | |
綁定 out 事件 | |
$( ".selector" ).bind( "dropout", function(event, ui) { ... }); |
drop | |
| |
這個事件會在draggable物件填入droppable物件的時候觸發。 在回調函數中,$(this)代表已經被draggable物件填充的droppable物件。 ui.draggable代表draggable物件。 | |
Code examples | |
初始化 drop 事件 | |
$( ".selector" ).droppable({ drop: function(event, ui) { ... } }); | |
綁定 drop 事件 | |
$( ".selector" ).bind( "drop", function(event, ui) { ... }); |
destroy | |
| |
完全移除droppable的功能。讓元素回到初始狀態。 |
disable | |
| |
禁止droppable的功能。 |
enable | |
| |
啟用droppable。 |
option | |
| |
獲取或設置任何droppable的選項。如果沒有指定值,將作為一個 getter。 |
option | |
| |
一次設定多個option,必須傳入一個option物件 |
widget | |
| |
回傳 .ui-droppable物件 |
jQuery UI 的插件Draggable使得滑鼠能夠拖動選定的元素。 可拖動的元素會有一個類別:ui-draggable。在拖動的元素也會有一個類別:ui-draggable-dragging。 如果你不只是想要有drop的功能,而是drag-and-drop,可以參考jQuery UI的Droppable插件,它提供了接收draggable的drop方法。 所有的回調(start,stop,drag)接受兩個參數:原始的瀏覽器事件(event),ui對象,參考以下的內容(假設你把第二個參數稱為'UI'):
disable | ||
| ||
禁用(true)或允許(false)物件可拖動。可以在初始化的時候設定(第一次創建)draggable。 | ||
Code examples | ||
初始化draggable物件的 disabled選項 | ||
$( ".selector" ).draggable({ disabled: true }); | ||
在初始化之後取得或設定disabled選項 | ||
/ / 取得 var disabled = $( ".selector" ).draggable("option", "disabled" ); //設定 $( ".selector" ).draggable( "option","disabled", true ); |
addClasses | ||
| ||
如果設置為false,就不會增加ui-draggable這個類別。這是以效能最佳化作為目標。draggable() 會對許多元素作初始化。 | ||
Code examples | ||
初始化draggable物件的addClasses選項 | ||
$( ".selector" ).draggable({ addClasses: false }); | ||
在初始化之後取得或設定addClasses選項 | ||
//取得 var addClasses = $( ".selector" ).draggable("option", "addClasses" ); //設定 $( ".selector" ).draggable( "option", "addClasses",false ); |
appendTo | ||
| ||
傳入 appendTo 的元素或是由 appendTo選擇的元素在移動的時候會作為裝helper的容器預設情況下,helper拖曳會被附加在同一個容器。 | ||
Code examples | ||
初始化draggable物件的appendTo選項 | ||
$( ".selector" ).draggable({ appendTo: 'body' }); | ||
在初始化之後取得或設定appendTo選項 | ||
//獲取 var appendTo = $( ".selector" ).draggable("option", "appendTo" ); //設定 $( ".selector" ).draggable( "option", "appendTo",'body' ); |
axis | ||
| ||
限制拖曳按照橫向(X)或垂直(Y)軸。可接受的值:'×','y'。 | ||
Code examples | ||
初始化draggable物件的axis選項 | ||
$( ".selector" ).draggable({ axis: 'x' }); | ||
在初始化之後取得或設定axis選項 | ||
//獲取 var axis = $( ".selector" ).draggable("option", "axis" ); //設定 $( ".selector" ).draggable( "option","axis", 'x' ); |
cancel | ||
| ||
防止在指定的元素上拖曳 | ||
Code examples | ||
初始化draggable物件的cancel選項 | ||
$( ".selector" ).draggable({ cancel: 'button' }); | ||
在初始化之後取得或設定cancel選項 | ||
//獲取 var cancel = $( ".selector" ).draggable("option", "cancel" ); //設定 $( ".selector" ).draggable( "option","cancel", 'button' ); |
connectToSortable | ||
| ||
允許在拖曳到指定的sortables放開。 如果使用此選項( helper 必須設定為'clone',以正常的運作),一個可拖動可以被丟棄到一個可排序的列表(sortables),然後成為它的一部分。 | ||
Code examples | ||
初始化draggable物件的connectToSortable選項 | ||
$( ".selector" ).draggable({ connectToSortable: 'ul#myList' }); | ||
在初始化之後取得或設定connectToSortable選項 | ||
//獲取 var connectToSortable = $( ".selector" ).draggable("option","connectToSortable" ); //設定 $( ".selector" ).draggable("option","connectToSortable",'ul#myList' ); |
containment | ||
| ||
限制可拖曳的範圍。合法的參數:'parent', 'document', 'window', [x1, y1, x2, y2] | ||
Code examples | ||
初始化draggable物件的containment選項 | ||
$( ".selector" ).draggable({ containment: 'parent' }); | ||
在初始化之後取得或設定containment選項 | ||
//獲取 var containment = $( ".selector" ).draggable("option", "containment" ); //設定 $( ".selector" ).draggable( "option","containment", 'parent' ); |
cursor | ||
| ||
指定draggable時的滑鼠指標型式。 | ||
Code examples | ||
初始化draggable物件的cursor選項 | ||
$( ".selector" ).draggable({ cursor: 'crosshair' }); | ||
在初始化之後取得或設定cursor選項 | ||
//獲取 var containment = $( ".selector" ).draggable("option", "containment" ); //設定 $( ".selector" ).draggable( "option","containment", 'parent' ); |
cursor | ||
| ||
指定draggable時的滑鼠指標型式。 | ||
Code examples | ||
初始化draggable物件的cursor選項 | ||
$( ".selector" ).draggable({ cursor: 'crosshair' }); | ||
在初始化之後取得或設定cursor選項 | ||
//獲取 var cursor = $( ".selector" ).draggable("option", "cursor" ); //設定 $( ".selector" ).draggable( "option","cursor", 'crosshair' ); |
cursorAt | ||
| ||
開始拖曳的時候,滑鼠指標會定位在某一個位置上。 座標最多能包含2個參數: { top, left, right, bottom }。 | ||
Code examples | ||
初始化draggable物件的cursorAt選項 | ||
$( ".selector" ).draggable({ cursorAt: { left: 5 } }); | ||
在初始化之後取得或設定cursorAt選項 | ||
//獲取 var cursorAt = $( ".selector" ).draggable("option", "cursorAt" ); //設定 $( ".selector" ).draggable( "option", "cursorAt",{ left: 5 } ); |
dealy | ||
| ||
滑鼠點下之後,延遲指定的時間之後才會啟動拖曳的動作(時間以毫秒為單位)。 這個選項可用來防止不小心的點擊。 | ||
Code examples | ||
初始化draggable物件的dealy選項 | ||
$( ".selector" ).draggable({ delay: 500 }); | ||
在初始化之後取得或設定dealy選項 | ||
//獲取 var delay = $( ".selector" ).draggable("option", "delay" ); //設定 $( ".selector" ).draggable( "option","delay", 500 ); |
distance | ||
| ||
滑鼠要移動一段指定的距離(以像素為單位)之後,才會開始拖曳的動作。 這個選項是用來防止不小心的拖曳或誤點。 | ||
Code examples | ||
初始化draggable物件的distance選項 | ||
$( ".selector" ).draggable({ distance: 30 }); | ||
在初始化之後取得或設定distance選項 | ||
//獲取 var distance = $( ".selector" ).draggable("option", "distance" ); //設定 $( ".selector" ).draggable( "option","distance", 30 ); |
grid | ||
| ||
拖曳元素的時候,按照指定的格子大小像素移動。array的值:[x,y] | ||
Code examples | ||
初始化draggable物件的grid選項 | ||
$( ".selector" ).draggable({ grid: [50, 20] }); | ||
在初始化之後取得或設定grid選項 | ||
//獲取 var grid = $( ".selector" ).draggable("option", "grid" ); //設定 $( ".selector" ).draggable( "option","grid", [50, 20] ); |
handle | ||
| ||
限制只能在拖曳元素內的指定元素開始拖曳 | ||
Code examples | ||
初始化draggable物件的handle選項 | ||
$( ".selector" ).draggable({ handle: 'h2' }); | ||
在初始化之後取得或設定handle選項 | ||
//獲取 var handle = $( ".selector" ).draggable("option", "handle" ); //設定 $( ".selector" ).draggable( "option","handle", 'h2' ); |
helper | ||
| ||
拖曳元素時的顯示樣式。 允許的參數:'original', 'clone', Function 如果指定Function,這個Function必須要回傳一個DOM元素 | ||
Code examples | ||
初始化draggable物件的helper選項 | ||
$( ".selector" ).draggable({ helper: 'clone' }); | ||
在初始化之後取得或設定helper選項 | ||
//獲取 var helper = $( ".selector" ).draggable("option", "helper" ); //設定 $( ".selector" ).draggable( "option","helper", 'clone' ); |
iframeFix | ||
| ||
防止在拖曳的時候,iframe內部事件捕捉到滑鼠移過的事件(mosemove)。 實用的時候會結合cursorAt,或是滑鼠指標沒有超過helper。 如果設置為true,會在iframe的範圍產生一層屏蔽。 如果指定了Selector,屏蔽就會覆蓋在對應的iframe上 | ||
Code examples | ||
初始化draggable物件的iframeFix選項 | ||
$( ".selector" ).draggable({ iframeFix: true }); | ||
在初始化之後取得或設定iframeFix選項 | ||
//獲取 var iframeFix = $( ".selector" ).draggable("option", "iframeFix" ); //設定 $( ".selector" ).draggable( "option","iframeFix", true ); |
opacity | ||
| ||
定義被拖曳的時候的透明度。 | ||
Code examples | ||
初始化draggable物件的opacity選項 | ||
$( ".selector" ).draggable({ opacity: 0.35 }); | ||
在初始化之後取得或設定opacity選項 | ||
//獲取 var opacity = $( ".selector" ).draggable("option", "opacity" ); //設定 $( ".selector" ).draggable( "option","opacity", 0.35 ); |
refreshPositions | ||
| ||
如果設置為 true,每次滑鼠移動的位置都會被記錄。 注意:此功能會大大降低性能。 | ||
Code examples | ||
初始化draggable物件的refreshPositions選項 | ||
$( ".selector" ).draggable({ refreshPositions: true }); | ||
在初始化之後取得或設定refreshPositions選項 | ||
//獲取 var refreshPositions = $( ".selector" ).draggable("option", "refreshPositions" ); //設定 $( ".selector" ).draggable( "option","refreshPositions", true ); |
revert | ||
| ||
如果設置為 true,當拖曳結束時,元素會回到起始的位置。 有效的參數: 'valid', 'invalid'。 如果設置為invalid,只會在無效droppable的時候回到起始位置。 | ||
Code examples | ||
初始化draggable物件的revert選項 | ||
$( ".selector" ).draggable({ revert: true }); | ||
在初始化之後取得或設定revert選項 | ||
//獲取 var revert = $( ".selector" ).draggable("option", "revert" ); //設定 $( ".selector" ).draggable( "option","revert", true ); |
revertDuration | ||
| ||
當拖曳結束後,回到起始位置的時間(以毫秒為單位)。 若revert設定為false則無效。 | ||
Code examples | ||
初始化draggable物件的revertDuration選項 | ||
$( ".selector" ).draggable({ revertDuration: 1000 }); | ||
在初始化之後取得或設定revertDuration選項 | ||
//獲取 var revertDuration = $( ".selector" ).draggable("option", "revertDuration" ); //設定 $( ".selector" ).draggable( "option","revertDuration", 1000 ); |
scope | ||
| ||
用於設定draggable和droppable物件的配套關係。 一個draggable物件和droppable的scope值相同就能接受droppable的動作。 | ||
Code examples | ||
初始化draggable物件的scope選項 | ||
$( ".selector" ).draggable({ scope: 'tasks' }); | ||
在初始化之後取得或設定scope選項 | ||
//獲取 var scope = $( ".selector" ).draggable("option", "scope" ); //設定 $( ".selector" ).draggable( "option","scope", 'tasks' ); |
scroll | ||
| ||
如果設定為 true,在拖曳到容器邊緣的時候,容器會自動捲動。 | ||
Code examples | ||
初始化draggable物件的scroll選項 | ||
$( ".selector" ).draggable({ scroll: false }); | ||
在初始化之後取得或設定scroll選項 | ||
//獲取 var scroll = $( ".selector" ).draggable("option", "scroll" ); //設定 $( ".selector" ).draggable( "option","scroll", false ); |
scrollSensitivity | ||
| ||
拖曳到邊緣的時候一次滾動的像素。 | ||
Code examples | ||
初始化draggable物件的scrollSensitivity選項 | ||
$( ".selector" ).draggable({ scrollSensitivity: 40 }); | ||
在初始化之後取得或設定scrollSensitivity選項 | ||
//獲取 var scrollSensitivity = $( ".selector" ).draggable("option", "scrollSensitivity" ); //設定 $( ".selector" ).draggable( "option","scrollSensitivity", 40 ); |
scrollSpeed | ||
| ||
拖曳到邊緣時,自動滾動的速度 | ||
Code examples | ||
初始化draggable物件的scrollSpeed選項 | ||
$( ".selector" ).draggable({ scrollSpeed: 40 }); | ||
在初始化之後取得或設定scrollSpeed選項 | ||
//獲取 var scrollSpeed = $( ".selector" ).draggable("option", "scrollSpeed" ); //設定 $( ".selector" ).draggable( "option","scrollSpeed", 40 ); |
snap | ||
| ||
如果設定為Selector,或設定為true(相當於'.ui-draggable'),當拖曳到元素邊緣時會被吸附到該元素。 | ||
Code examples | ||
初始化draggable物件的snap選項 | ||
$( ".selector" ).draggable({ snap: true }); | ||
在初始化之後取得或設定snap選項 | ||
//獲取 var snap = $( ".selector" ).draggable("option", "snap" ); //設定 $( ".selector" ).draggable( "option","snap", true ); |
snapMode | ||
| ||
定義元素吸附的模式。 若snap設定為false時無效。 有效的參數:'inner', 'outer', 'both' | ||
Code examples | ||
初始化draggable物件的snapMode選項 | ||
$( ".selector" ).draggable({ snapMode: 'outer' }); | ||
在初始化之後取得或設定snapMode選項 | ||
//獲取 var snapMode = $( ".selector" ).draggable("option", "snapMode" ); //設定 $( ".selector" ).draggable( "option","snapMode", 'outer' ); |
snapTolerance | ||
| ||
拖曳至靠近距離元素指定距離(像素)時產生吸附的作用。若snap設定為false時無效。 | ||
Code examples | ||
初始化draggable物件的snapTolerance選項 | ||
$( ".selector" ).draggable({ snapTolerance: 40 }); | ||
在初始化之後取得或設定snapTolerance選項 | ||
//獲取 var snapTolerance = $( ".selector" ).draggable("option", "snapTolerance" ); //設定 $( ".selector" ).draggable( "option","snapTolerance", 40 ); |
stack | ||
| ||
控制物件的z-index值,會把拖曳的物件放在最前面。例如在window managers就很常用到。 | ||
Code examples | ||
初始化draggable物件的stack選項 | ||
$( ".selector" ).draggable({ stack:".products" }); | ||
在初始化之後取得或設定stack選項 | ||
//獲取 var stack = $( ".selector" ).draggable("option", "stack" ); //設定 $( ".selector" ).draggable( "option","stack", ".products" ); |
zIndex | ||
| ||
在拖曳時的z-index值。 | ||
Code examples | ||
初始化draggable物件的zIndex選項 | ||
$( ".selector" ).draggable({ zIndex: 2700 }); | ||
在初始化之後取得或設定zIndex選項 | ||
//獲取 var zIndex = $( ".selector" ).draggable("option", "zIndex" ); //設定 $( ".selector" ).draggable( "option","zIndex", 2700 ); |
start | |
| |
當滑鼠拖曳開始時觸發這個事件。 | |
Code examples | |
初始化draggable物件的start事件 | |
$( ".selector" ).draggable({ start: function(event, ui) { ... }) )); | |
由dragstart綁定start事件 | |
$( ".selector" ).bind( "dragstart",function(event, ui) { ... )); |
drag | |
| |
當滑鼠拖曳開始時觸發這個事件。 | |
Code examples | |
初始化draggable物件的drag事件 | |
$( ".selector" ).draggable({ drag: function(event, ui) { ... }) )); | |
綁定drag事件 | |
$( ".selector" ).bind( "drag",function(event, ui) { ... )); |
stop | |
| |
當滑鼠拖曳時觸發這個事件。 | |
Code examples | |
初始化draggable物件的stop事件 | |
$( ".selector" ).draggable({ stop: function(event, ui) { ... }) )); | |
綁定stop事件 | |
$( ".selector" ).bind( "dragstop",function(event, ui) { ... )); |
destroy | |
| |
移除draggable的功能。把元素返回原始的初始狀態。 |
disable | |
| |
禁止draggable功能。 |
enable | |
| |
啟用draggable功能。 |
option | |
| |
獲取或設置option。如果沒有指定值,將作為一個 getter。 |
option | |
| |
一次設定多個oprion,必須傳入一個option物件。 |
widget | |
| |
返回.ui-draggable元素。 |
// 取得background-position屬性
$('.element').css('background-position');
background-position-y
(function($) {
$.fn.backgroundPosition = function() {
var pos= $(this).css('background-position');
if(typeof(pos) === ‘undefined’)
return $(this).css(‘background-position-x’) + ‘ ‘ + $(this).css(‘background-position-y’);
else
return pos;
};
})(jQuery);
// 取得background-poisition屬性
$(‘.element’).backgroundPosition();
// 把物件disable $('.element').attr('disabled', 'disabled');
// 把物件enable (移除disabled屬性) $('.element').removeAttr('disabled'); // 或是可以把屬性設定為"" $('.element').attr('disabled', '');