jQuery UI

jQuery UI

界面主題庫

若須要更多的主題包，能夠下載主題包jquery-ui-themes-1.8.1.zip，

解壓後其中的每個文件夾表明一個主題。

Draggable拖動組件

須要導入如下ui文件：

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

屬性

屬性名	數據類型	默認值	說明
addClasses	Boolean	true	指示是否對可拖動元素添加 ui-draggable類
appendTo	Element Selector	"parent"	爲元素指定一個容器元素
axis	String	false	限制元素的拖動軌跡，可接受 "x"和"y"或false
cancel	Selector	":input"	指定非拖動手柄元素
connectToSortable	Selector	false	容許將元素拖至一個可排序列表上， 屬性值爲可排序列表的選擇符
containment	Selector Element String Array	false	指定拖動元素的元素拖動區域， 屬性值可能爲："parent"， "document"，"window" [x1,y1,x2,y2]等
cursor	String	"auto"	鼠標位於元素之上的cursor樣式
cursorAt	Object	false	指定拖動對象時，光標出現的位置。 能夠指定top、left、right、 Bottom的一個或兩個
delay	Integer	0	指定開始拖動時延遲的毫秒數
distance	Integer	1	指定開始拖動的延遲距離像素
grid	Array	false	使元素對齊頁面上的虛擬網格。
handle	Element Selector	false	指定拖動元素的拖動手柄
helper	String Function	"original"	指定拖動元素時顯示的輔助元素。 其值能夠爲"original"、"clone" 或函數，函數必須返回一個DOM元素
iframeFix	Boolean Selector	false	是否阻止iframe元素在拖動中捕獲 Mousemove事件，若爲選擇符， 則只阻止匹配元素的事件。
opacity	Float	false	指定輔助元素的不透明度
revert	Boolean String	false	若爲true則拖動中止時，將返回 起始位置。若爲"invalid"，則 僅當未拖到目標位置才返回。 "valid"則與"invalid"相反
revertDuration	Integer	500	指定返回起始位置的毫秒數
scope	String	"default"	指定拖放元素的目標集， 與droppable中的同名屬性使用
scroll	Boolean	true	拖動容器元素時，是否自動滾動
scrollSensitivity	Integer	20	指定元素在距離容器邊緣多少像素 時開始滾動。
scrollSpeed	Integer	20	指定容器元素滾動的速度
snap	Boolean Selector	false	指定拖動元素靠近選擇元素的邊緣 會自動對齊
snapMode	String	"both"	指定元素對齊目標元素的那條邊， 可選值："inner"、"outer"和 "both"
snapTolerance	Integer	20	指定元素距離目標元素多少像素 時，開始自動對齊
zIndex	Integer	false	設置輔助元素的zIndex

 

 

 

 

 

 

 

 

 

方法

$(selector).draggable("disable");  // 禁止其拖動功能

$(selector).draggable("enable"); // 激活其拖動功能

$(selector).draggable("destory"); // 徹底刪除拖動功能

$(selector).draggable("option", name[, value]); // 獲取/設置屬性值

事件

一、 start事件：類型：dragstart，當開始拖動時觸發

二、 drag事件：類型：drag，當拖動過程當中移動鼠標時觸發

三、 stop事件：類型：dragstop，當中止拖動時觸發

 

事件綁定：

$(select).draggable(

eventName:function(event, ui){

 

一、 event：表示事件對象

二、 ui：表示拖動元素對象，具備以下屬性：

a) helper：jQuery對象，表示輔助元素

b) position：包含top屬性和left屬性的對象，

表示輔助元素相對於起始位置點的位置

c) offset：包含top屬性和left屬性的對象，

表示輔助元素相對於頁面的絕對位置

 

}

);

Droppable投放組件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js

jquery.ui.droppable.js

屬性

屬性	數據類型	默認值	說明
accept	Selector Function	"*"	設置投放對象可接受的元素，若提供函數， 則把拖動元素做爲第一個參數傳給函數， 則使該函數返回true的元素皆可
activeClass	String	false	設置可接受的拖動元素處於拖動狀態時， 可投放對象的CSS樣式
addClass	Boolean	true	是否容許投放對象添加ui-droppable類
greedy	Boolean	false	是否在嵌套的投放對象中阻止事件傳播
hoverClass	String	false	設置拖動對象移動到投放對象上的CSS樣式
scope	String	"default"	定義拖動對象和投放對象的目標集
tolerance	String	"intersect"	設置可接受的拖放元素完成投放的觸發模式， 包括"fit"，"intersect"，"pointer" ，"touch"等

 

方法

$(selector).droppable("disable"); // 禁止投放功能

$(selector).droppable("enable"); // 激活投放功能

$(selector).droppable("destroy"); // 徹底刪除投放功能

$(selector).droppable("option", name[, value]); // 獲取/設置屬性值

事件

一、 activate事件：類型：dropactivate，當可接受對象開始拖動時觸發

二、 deactivate事件：類型：dropdeactivate，當可接受對象中止拖動時觸發

三、 over事件：類型：dropover，當可接受對象位於目標對象上方時觸發

四、 out事件：類型：dropout，當可接受對象移出目標對象時觸發

五、 drop事件：類型：drop，當可接受對象投放到目標對象時觸發

 

事件綁定：

$(selector).droppable(

eventName:function(event, ui){

 

一、 event：事件對象

二、 ui：包含附加信息的ui對象，具備如下屬性：

a) draggable：表示當前可拖動元素

b) helper：表示當前可拖動元素的輔助元素

c) position：一個包含top屬性和left屬性的對象，

表示輔助元素相對於起始點的位置

d) offset：一個包含top屬性和left屬性的對象，

表示輔助元素相對於頁面的絕對位置

}

);

Resizable縮放組件

須要添加樣式表：ui.all.css

 

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.resizable.js

屬性

屬性	數據類型	默認值	說明
alsoResize	Selector jQuery Element	false	當調整大小時，同步調整一組所選的 元素的大小
animate	Boolean	false	是否爲縮放過程添加動畫效果
animateDuration	Integer String	"slow"	指定動畫持續的時間，能夠爲 "slow"、"normal"、"fast" 或者具體的毫秒數
animateEasing	String	"swing"	指定動畫的效果
aspectRatio	Boolean Float	false	是否調整大小時，保持原長寬比。 也能夠指定一個長寬比，如0.5
autoHide	Boolean	false	是否隱藏縮放手柄，直到鼠標位於 該手柄之上時。
cancel	Selector	":input"	阻止匹配的元素的尺寸發生變化
containment	String Element Selector	false	限制在指定元素的邊界範圍內， 調整大小尺寸，可選值："parent" 、"document"、DOM元素或選擇符
delay	Integer	0	指定縮放的延遲毫秒數
distance	Integer	1	指定縮放的延遲像素數
ghost	Boolean	false	是否顯示半透名的輔助元素
grid	Array	false	指定縮放時對齊的網格， 接受[x, y]分別爲網格寬度和高度
handles	String Object	"e,s,se"	定義縮放手柄，若提供字符串，則以 逗號分隔n、e、s、w、ne、se、 sw、nw以及all，若爲對象能夠 包含以上屬性的任意項
helper	String	false	設置輔助元素的CSS樣式
maxHeight	Integer	null	設置容許調整的最大高度
maxWidth	Integer	null	設置容許調整的最大寬度
minHeight	Integer	10	設置容許調整的最小高度
minWidth	Integer	10	設置容許調整的最小寬度

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

方法

 

$(selector).resizable("disable"); // 禁用縮放功能

$(selector).resizable("enable"); // 激活縮放功能

$(selector).resizable("destroy") // 徹底刪除縮放功能

$(selector).resizable("option", name[, value]); // 獲取/設置屬性

事件

一、 start事件：類型：resizestart，當開始縮放操做時觸發

二、 resize事件：類型：resize，當經過縮放手柄操做時觸發

三、 stop事件：類型：resizestop，當中止縮放操做時觸發

 

事件綁定：

$(selector).resizable({

eventName:function(event, ui){

 

一、 event:事件對象

二、 ui:包含附加信息的ui對象，有如下屬性：

a) helper:一個包含helper元素的對象

b) originalPosition:一個包含top屬性和left屬性的對象，

表示縮放前的位置

c) position:一個包含top屬性和left屬性的對象，

表示當前位置

d) size:一個包含width屬性和height屬性的對象，表示當前大小

}

});

Selectable選擇組件

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.selectable.js

 

而後利用$(selector).selectable([option])函數，將目標元素（如<ol>）

包裝成jQuery對象。

經過按<Ctrl>能夠點擊選擇多項

CSS樣式

.ui-selecting類：選擇某個項目時添加該類

.ui-selected類：選定了某個項目時添加該類

.ui-selectee類：可選擇的元素添加該類

屬性

屬性	數據類型	默認值	說明
autoRefresh	Boolean	true	是否在選擇操做以前，刷新（計算）每一個可選 的位置和大小，能夠設置爲false，而後 手動調用refresh方法
cancel	Selector	":input"	阻止匹配的元素進行選擇操做
delay	Integer	0	設置選擇延遲的毫秒數
distance	Integer	0	設置選擇延遲的像素數
filter	Selector	"*"	設置能都選擇的匹配的子元素
tolerance	String	"touch"	指定觸發選擇操做的條件，可選值："touch" 、"fit"分別表示徹底和部分覆蓋便可

 

方法

可選對象，也包含disable、enable、option、destroy方法。

 

$(selector).selectable("refresh");

// 手動刷新，從新計算每一個元素的大小和位置

事件

start事件：類型：selectablestart，當開始選擇操做時觸發

selecting事件：類型：selectableselecting，當選定元素時觸發

selected事件：類型：selectableselected，當結束選擇時觸發

unselecting事件：類型：selectableunselecting，從選中項中，移出元素時觸發

unselected事件：類型：selectableunselected，從選中項移出元素，並結束操做

stop事件：類型：selectablestop，當結束選擇操做時觸發

 

事件綁定：

$(selector).selectable({

eventName:function(event, ui){

 

一、 event:事件對象

二、 ui:包含附加信息的ui對象

}

});

 

 

Button按鈕組件

 

樣式表文件jquery-ui.css

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.button.js

單選框和複選框按鈕：

一、 爲控件添加ID

二、 爲控件添加<label>標籤

三、 將一組單選按鈕或複選框放置到某個容器中（如<div>或<span>）

四、 將容器用$(selector).buttonset()方法轉換成jQuery對象

CSS樣式

.ui-button：按鈕的樣式

.ui-button-text：按鈕上文本的樣式

屬性

屬性	數據類型	默認值	說明
text	Boolean	true	是否顯示文本，若爲false，必須啓用圖標
icons	Option	{primary:null secondary:null}	指定顯示的圖標，屬性值爲字符串類名， 分別爲左邊的圖標和右邊的圖標
label	String	按鈕的value屬性	按鈕上顯示的文本

方法

$(selector).button([options]); // 普通按鈕的構造方法

$(selector).buttonset();// 單選按鈕或複選按鈕的構造方法

也包含disable、enable、option、destroy方法

Dialog對話框組件

CSS樣式表：jquery-ui.css

jquery.bgiframe-2.1.1.js

jquery.ui.core.js

jquery.ui.widget.js

jquery.ui.mouse.js

jquery.ui.draggable.js（可選）

jquery.ui.position.js

jquery.ui.resizable.js（可選）

jquery.ui.dialog.js

CSS樣式

ui-dialog:對話框樣式

ui-dialog-titlebar:對話框標題欄樣式

ui-dialog-title:對話框標題字體樣式

ui-dialog-titlebar-close:對話框標題欄關閉樣式

切換對話框樣式不一樣的方式：經過設置<link>標籤的href的屬性來使得樣式的改變

屬性

屬性	數據類型	默認值	說明
autoOpen	Boolean	true	是否調用dialog()方法時自動打開， 若爲false，則保持隱藏，直到調用 dialog("open")方法
bgiframe	Boolean	false	若設置爲true，則使用bgiframe插件， 以解決IE6中的bug，1.8.1版本
buttons	Object	{}	指定在對話框中顯示的按鈕，key值爲 按鈕的文本，value值則爲對應的回調函數。 回調函數中的上下文指代，當前對話框
closeOnEscape	Boolean	true	是否在得到焦點而且用戶按<ESC>關閉
closeText	String	"close"	指定關閉按鈕的文本
dialogClass	String	""	指定添加到對話框的類名
draggable	Boolean	true	是否可拖動對話框
height	Number	"auto"	指定對話框的高度，"auto"爲適應內容
hide	String	null	指定關閉對話框的動畫效果
maxHeight	Number	false	指定對話框的最大高度
maxWidth	Number	false	指定對話框的最大寬度
minHeight	Number	150	指定對話框的最小高度
minWidth	Number	150	指定對話框的最小寬度
modal	Boolean	false	是否爲模式窗口
position	String Array	"center"	指定對話款的初始位置，可選值："center"、 "left"、"right"、"top"、"bottom"， 也能夠是包含[top, left]的數組
resizable	Boolean	true	是否可調整對話框大小
show	String	null	指定打開對話框的動畫效果
stack	Boolean	true	是否將對話框疊放到其餘對話框頂部
title	String	""	指定對話框的標題，也能夠經過元素的 title屬性來指定
width	Number	300	對話框的寬度
zIndex	Integer	1000	設置對話框起始的z-Index屬性

方法

$(selector).dialog()函數也有destroy、disable、enable、option方法。

$(selector).dialog("close"); // 關閉對話框

$(selector).dialog("isOpen"); // 判斷對話框是否打開，返回Boolean

$(selector).dialog("moveToTop"); // 將對話框置頂

$(selector).dialog("open");  // 打開對話框

事件

一、 focus事件：類型：dialogfocus，當對話框得到焦點時觸發

二、 open事件：類型：dialogopen，當對話框打開時觸發

三、 dragStart事件：類型：dialogdragstop，當開始拖動對話框時觸發

四、 drag事件：類型：dialogdrag，當拖動對話框時觸發

五、 dragStop事件：類型：dialogdragstop，當中止拖動對話框時觸發

六、 resizeStart事件：類型：dialogresizestart，當開始調整大小時觸發

七、 resize事件：類型：dialogresize，當調整大小時觸發

八、 resizeStop事件：類型：dialogresizestop，當結束調整大小時觸發

九、 beforeclose事件：類型：dialogbeforeclose，

當試圖關閉時觸發，若是要阻止關閉，則在函數中返回false

十、 close事件：類型：dialogclose，當關閉對話框時觸發

事件綁定：

$(selector).dialog({

eventName:function(e, ui){

 

一、 e:事件對象

二、 ui:封裝對象

三、 this:表示對話框元素

}

});