AJAX應用
Ajax函數
$("XXX").load(url [, data][, callback]);
// 用於加載HTML代碼，並將其插入到XXX DOM文檔中
// 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-www-form-urlencoded
若傳入的爲內容類型，則它將始終被髮送到服務器。
// 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類型，表示是否執行傳統的“淺”序列化
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]);// 獲取/設置屬性值
事件
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.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]);// 獲取/設置屬性值
事件
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.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]);// 獲取/設置屬性
事件
1、 start事件：類型：resizestart，當開始縮放操作時觸發
2、 resize事件：類型：resize，當通過縮放手柄操作時觸發
3、 stop事件：類型：resizestop，當停止縮放操作時觸發
事件綁定：
$(selector).resizable({
eventName:function(event, ui){
1、 event:事件對象
2、 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){
1、 event:事件對象
2、 ui:包含附加信息的ui對象
}
});
Sortable排序組件
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.sortable.js
使用$(selector).sortable([options])構造方法將目標元素（如<ul>）包裝
成jQuery對象。
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
appendTo |
String |
"parent" |
指定在拖動過程中將輔助元素追加到何處 |
|
axis |
String |
false |
指定條目的拖動方向，可選擇有"x"和"y" |
|
cancel |
Selector |
":input" |
指定禁止排序的元素 |
|
connectWith |
Selector |
false |
允許排序列表連接另一個排序列表， 將條目拖動至另一個列表中去 |
|
containment |
Element String Selector |
false |
指定條目拖動的範圍，可選值："parent"、 "document"、"window"、DOM元素或者 jQuery選擇符 |
|
cursor |
String |
"auto" |
指定排序時鼠標的CSS樣式 |
|
cursorAt |
Object |
false |
指定拖動條目時，光標出現的位置，取值是 對象，可以包含top、left、right、 Bottom屬性中的一個或兩個 |
|
delay |
Integer |
0 |
指定拖動條目的延遲毫秒數 |
|
distance |
Integer |
1 |
指定拖動條目的延遲像素數 |
|
dropOnEmpty |
Boolean |
true |
是否可以將條目拖放至空的列表中 |
|
forceHelperSize |
Boolean |
false |
是否強制輔助元素具有尺寸 |
|
forcePlaceholdersize |
Boolean |
false |
是否強制佔有符具有尺寸 |
|
grid |
Array |
false |
使條目或輔助元素對齊網格，取值爲數組 [x, y]分別表示網格的寬度和高度 |
|
handle |
Selector Element |
false |
指定條目的拖動手柄 |
|
helper |
String Function |
"original" |
指定顯示的輔助元素，可選值： "original"或"clone"，若爲函數 則函數返回一個DOM元素 |
|
items |
Selector |
">*" |
指定列表中可以排序的條目 |
|
opacity |
Float |
false |
指定輔助元素的不透明度0.01~1 |
|
placeholder |
String |
false |
指定排序時，空白佔位的CSS樣式 |
|
revert |
Boolean Integer |
false |
是否支持動畫效果，或指定動畫毫秒數 |
|
scroll |
Boolean |
true |
是否元素拖動到邊緣時自動滾動 |
|
scrollSensitivity |
Integer |
20 |
指定元素拖動到距離邊緣多少像素時 開始滾動 |
|
scrollSpeed |
Integer |
20 |
指定滾動的速度 |
|
tolerance |
String |
"intersect" |
設置拖動元素拖動多少距離時開始排序， 可選值："intersect"和"pointer"， 前者表示重疊50%，後者表示重疊。 |
|
z-Index |
Integer |
1000 |
指定輔助元素的z-Index值 |
方法
可排序元素有disable、enable、option、destroy方法
$(selector).sortable("serialize"[, option]);
// 將排序條目的id序列化成可提交的表單數據
$(selector).sortable("toArray"); // 將排序的條目id序列化成字符串數組
$(selector).sortable("refresh"); // 刷新可排序條目
$(selector).sortable("refreshPositions");// 刷新排序條目的緩存位置
$(selector).sortable("cancel"); // 取消當前條目的順序改變
事件
1、 start事件：類型：sortablestart，當開始排序時觸發
2、 sort事件：類型：sortablesort，當排序期間觸發
3、 change事件：類型：sortablechange，當元素位置發生改變時觸發
4、 beforeStop事件：類型：sortbeforestop，當停止排序，但輔助元素仍可用
5、 stop事件：類型：sortstop，當排序停止時觸發
6、 update事件：類型：sortupdate，當停止排序，且元素位置發生變化時觸發
7、 receive事件：類型：sortreceive，當連接的列表從另個列表接受條目時觸發
8、 remove事件：類型：sortremove，當從列表中拖出條目，並放置到另個列表時觸發
9、 over事件：類型：sortover，當條目被移除列表時觸發
事件綁定：
$(selector).sortable({
eventName:function(event, ui){
1、 event:事件對象
2、 ui：包含附件信息的ui對象，ui包含以下屬性：
a) helper:表示當前排序元素的jQuery對象
b) position：表示相對與原始位置，包含top屬性和left屬性
c) offset:表示相對於頁面的絕對位置，包含top屬性和left屬性
d) item：表示當前拖動元素的jQuery對象
e) placeholder:表示佔位符
f) sender:當前條目所屬的排序對象
}
});
Button按鈕組件
樣式表文件jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.button.js
單選框和複選框按鈕：
1、 爲控件添加ID
2、 爲控件添加<label>標籤
3、 將一組單選按鈕或複選框放置到某個容器中（如<div>或<span>）
4、 將容器用$(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"); // 打開對話框
事件
1、 focus事件：類型：dialogfocus，當對話框獲得焦點時觸發
2、 open事件：類型：dialogopen，當對話框打開時觸發
3、 dragStart事件：類型：dialogdragstop，當開始拖動對話框時觸發
4、 drag事件：類型：dialogdrag，當拖動對話框時觸發
5、 dragStop事件：類型：dialogdragstop，當停止拖動對話框時觸發
6、 resizeStart事件：類型：dialogresizestart，當開始調整大小時觸發
7、 resize事件：類型：dialogresize，當調整大小時觸發
8、 resizeStop事件：類型：dialogresizestop，當結束調整大小時觸發
9、 beforeclose事件：類型：dialogbeforeclose，
當試圖關閉時觸發，如果要阻止關閉，則在函數中返回false
10、 close事件：類型：dialogclose，當關閉對話框時觸發
事件綁定：
$(selector).dialog({
eventName:function(e, ui){
1、 e:事件對象
2、 ui:封裝對象
3、 this:表示對話框元素
}
});
Accordion摺疊面板組件
樣式表文件：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.accordion.js
創建容器元素（如<div>），用來初始化，添加每個面板的標題（如<h3>），
和麪板的內容（如<div>）；
例如：
<div id="accordion">
<h3><a href="#">第一個面板的標題</a></h3>
<div>第一個面板的內容</div>
<h3><a href="#">第二個面板的標題</a></h3>
<div>第二個面板的內容</div>
</div>
CSS樣式
ui-accordion:摺疊面板樣式
ui-accordion-header:摺疊面板標題樣式
ui-accordion-content:摺疊面板內容樣式
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
active |
Selector Element jQuery Boolean Number |
0 |
用於激活的面板內容面板，若設置爲false 則在開始時，不顯示任何面板 |
|
animated |
Boolean String |
"slide" |
選擇要應用的動畫效果，false則禁用 |
|
autoHeight |
Boolean String |
true |
是否將內容部分最高的高度應用到其他部分 |
|
clearStyle |
Boolean |
false |
是否在動畫完成後，清除height和 Overflow屬性，不能與autoHeight 一起使用 |
|
collapsible |
Boolean |
false |
是否所有部分允許click時來關閉。 |
|
event |
String |
"click" |
指定觸發打開面板的事件 |
|
fillSpace |
Boolean |
false |
是否完全填充父元素的高度，將會重寫 autoHeight |
|
header |
Selector jQuery |
見說明 |
標題元素的選擇器，默認爲li |
|
icons |
Object |
見說明 |
標題所使用的圖標，可以通過"header"、 "headerSelected"來指定，默認爲 {"header":"ui-icon-triangle-1-e", "headerSelected":"ui-icon-triangle -1-s"} |
|
navigation |
Boolean |
false |
是否使用navigationFilter屬性來實現 自定義匹配 |
|
navigationFilter |
Function |
重寫默認的location.href，實現自定義 匹配 |
方法
摺疊面板部件也有destroy、disable、enable和option方法
$(selector).accordion("activate", index|selector);
// 用於激活指定的面板，index是從0開始的數字，也可以設置爲選擇器表達式，
若設置爲false，則關閉所有面板，需要將collapsible設置爲true
事件
1、 changestart事件：類型：accordionchangestart，當開始變化時觸發
2、 change事件：類型：accordionchange，當變化時觸發
事件綁定：
$(selector).accordion({
eventName:function(event, ui){
1、 event：事件對象
2、 ui:包含附件信息的封裝對象，具有以下屬性：
a) newHeader：表示當前激活的標題的jQuery對象
b) oldHeader：表示上一個標題的jQeruy對象
c) newContent：表示當前激活的內容的jQuery對象
d) oldContent：表示上一個內容的jQuery對象
}
});
排序功能
設置步驟：
1、 將每個面板的標題和內容，分別放在各自的容器中。
例如：
<div id="accordion">
<div>
<h3><a href="#">第一個面板的標題</a></h3>
<div>第一個面板的內容</div>
</div>
<div>
<h3><a href="#">第二個面板的標題</a></h3>
<div>第二個面板的內容</div>
</div>
</div>
2、 將整個摺疊面板，通過accordion()方法構造面板元素
3、 對構造好的面板元素，通過sortable()方法構造可排序元素（見Sortablez組件）
4、 對標題綁定click事件，並在停止操作之後立即阻止事件傳播
Tabs選項卡組件
CSS樣式表文件：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.tabs.js
創建選項卡容器（如<div>），在容器中創建每個面板的標題（如一個<ul>、
一組<li>和<a>），再爲每個選項卡添加內容（如一組<div>），
標題的<a>通過herf連接到<div>的id屬性，例如：href="#tabs-1"
如果選項卡的內容爲遠程文件，則應將href屬性設置爲URL，此時自動生成內容面板。
CSS樣式
ui-tabs:選項卡容器樣式
ui-tabs-nav:選項卡標題欄樣式
ui-tabs-panel:選項卡內容面板樣式
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
ajaxOptions |
Options |
null |
設置遠程選項卡的ajax選項內容 |
|
cache |
Boolean |
false |
設置是否對遠程選項卡內容進行緩存 |
|
collapsible |
Boolean |
false |
是否允許將選定的選項卡內容摺疊起來 |
|
cookie |
Object |
null |
將最後選中的選項卡內容保存到cookie 中，需要使用cookie插件。 |
|
disabled |
Array<Number> |
[] |
包含選項卡位置的數組（從0開始） 用於設置初始化時禁用哪些選項卡 |
|
event |
String |
"click" |
指定選擇選項卡時，需要出發什麼事件 |
|
fx |
Options Array<Options> |
null |
指定切換選項卡時的動畫效果 |
|
idPrefix |
String |
"ui-tabs-" |
指定遠程選項卡的id屬性的前綴， 後綴爲，選項卡的index 錨元素無title屬性時使用 若錨元素有title屬性則使用此屬性 作爲選項卡的id屬性 |
|
panelTemplate |
String |
"<div> </div>" |
指定使用add方法創建並添加選項卡 或動態創建遠程選項卡的面板，所使用 的HTML模板 |
|
selected |
Number |
0 |
指定初始化時，所選中的選項卡，若爲 -1則都不選中 |
|
spinner |
String |
見說明 |
指定加載遠程內容時，選項卡標題上的 HTML的內容，若爲空，則停用該行爲。 必須在標題的<a></a>標記之間，添加 <span>元素，以便內容可以看到 |
|
TabTemplate |
String |
見說明 |
指定創建並添加新的選項卡時，使用的 HTML模板，默認值爲"<li><a href= '#{href}'><span>#{label} </span></a></li>"。#{href}和 #{label}是佔位符，他們將被 Add方法的url和選項卡標題所取代 |
方法
選項卡也有destroy、disable、enable、option方法
$(selector).tabs("add", url, label[, index]);
// url爲新選項卡的內容面板，label選項卡的標題，
index爲插入位置的索引，默認末尾
$(selector).tabs("remove", index); // 移出選項卡，index從0開始
$(selector).tabs("enable", index); // 激活選項卡
$(selector).tabs("disable", index); // 禁用選項卡
$(selector).tabs("select", index); // 選定一個選項卡，index可以選擇符
$(selector).tabs("load", index);
// 用編程方式重新加載一個Ajax選項卡，即使cache=true
$(selector).tabs("url", index, url);// 改變Ajax選項卡加載的內容url
$(selector).tabs("length"); // 獲取選項卡面板的選項卡數目
$(selector).tabs("abort"); // 終止所有正在運行的ajax請求和動畫
$(selector).tabs("rotate", ms, [continuing]);
// 設置自動切換選項卡，ms爲切換的時間，若爲0或null則停止切換，continuing
設置當用戶選擇了一個選項卡後，是否繼續切換，默認爲false
事件
1、 select事件：類型：tabsselect，當單擊選項卡時觸發
2、 load事件：類型：tabsload，當加載遠程選項卡內容時觸發
3、 show事件：類型：tabsshow，當顯示一個選項卡時觸發
4、 add事件：類型：tabsadd，當添加一個選項卡時觸發
5、 remove事件：類型：tabsremove，當移出一個選項卡時觸發
6、 enable事件：類型：tabenable，當激活一個選項卡時觸發
7、 disable事件：類型：tabsdisable，當禁用一個選項卡時觸發
事件綁定：
$(selector).tabs({
eventName:function(event, ui){
1、 event：事件對象
2、 ui：包含額外事件信息的封裝對象，包含了以下屬性：
a) tab:當前選定的選項卡的錨元素
b) panel:當前選定的選項卡的內容面板元素
c) index：當前選定的選項卡的索引值，從0開始
}
});
Datepicker日期選擇器組件
CSS樣式表：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
jquery.ui.datepicker-zh-CN.js（可選，位於ui/i18n文件夾中，用於實現中文）
CSS樣式
ui-datepicker
ui-datepicker-header
ui-datepicker-prev
ui-datepicker-next
ui-datepicker-title
ui-datepicker-month
ui-datepicker-year
ui-datepicker-calendar
ui-datepicker-week-end
ui-datepicker-week-end
ui-datepicker-other-month
ui-datepicker-buttonpanel
ui-datepicker-current
ui-datepicker-close
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
altField |
String |
"" |
使用備用的輸出字段，即將選擇的日期 以另一種格式，輸出到另一個控件中， 值爲選擇符，即要輸出的控件 |
|
altFormat |
String |
"" |
altField輸出的格式， 詳細格式見formatDate方法 |
|
appendText |
String |
"" |
指定每個日期字段後面顯示的文本 |
|
autoSize |
Boolean |
false |
是否自動調整控件大小， 以適應當前的日期格式的輸入 |
|
buttonImage |
String |
"" |
指定彈出按鈕圖像的URL，若設置則 buttonText將成爲alt值 |
|
buttonImageOnly |
Boolean |
false |
是否將圖像放在控件後面，作爲觸發器 |
|
buttonText |
String |
"..." |
指定觸發按鈕上顯示的文本，showOn 屬性應設置爲button或both |
|
changeMonth |
Boolean |
false |
是否使用下拉列表選擇月份 |
|
changeYear |
Boolean |
false |
是否使用下拉列表選擇年份 |
|
closeText |
String |
"Done" |
指定關閉鏈接顯示的文本 |
|
dateFormat |
String |
"mm/dd/yy" |
指定顯示日期的格式 |
|
defaultDate |
Date String Number |
null |
首次打開顯示的日期，可以用Date對象 指定一個實際日期，或指定距離今天 的天數（如+7）、字符串（y表示年 、m表示月、w表示周、d表示天，如 "+1m+7d"）默認爲null，表示今天 |
|
duration |
Number String |
"normal" |
日期選擇器呈現的速度，可以爲毫秒數 |
|
firstDay |
Number |
0 |
設置每週的第一天，0表示星期日， 1表示星期一等 |
|
maxDate |
Date Number String |
null |
可以選擇的最大日期。null表示無限制 格式見defaultDate |
|
minDate |
Date Number String |
null |
可以選擇的最小日期，null表示無限制 格式見defaultDate |
|
numberOfMonths |
Number Array |
1 |
設置一次要顯示幾個月。可以爲包含兩個 數字的數組，表示顯示的行數和列數 |
|
selectOtherMonths |
Boolean |
false |
是否可以選擇非當前月的日期， showOtherMonths屬性必須爲true |
|
shortYearCutoff |
String Number |
"+10" |
設置截止的年份的值，若爲數字（0~99） 則直接使用其值，若是字符串，則轉化爲 數字並與當前年份相加。當超過截止 年份時，則被認爲是上個世紀 |
|
showAnim |
String |
"show" |
設置顯示或隱藏的動畫名 |
|
showButtonPanel |
Boolean |
false |
是否顯示按鈕面板 |
|
showCurrentAtPos |
Number |
0 |
指定在多月份顯示時，當前月份位於 何處，從左上方0算起 |
|
showMonthAfterYear |
Boolean |
false |
是否在標題中的年份後顯示月份 |
|
showOn |
String |
"focus" |
設置觸發選擇器的事件名稱 |
|
showOtherMonths |
Boolean |
false |
是否顯示其他月份 |
|
stepMonths |
Number |
1 |
指定單擊上月下月鏈接時，移動幾個月 |
|
yearRange |
String |
c-10:c+10 |
設置下拉列表框中顯示的年份範圍， 可以是相對今年（-nn:+nn）或相對於 選擇的年份（c-nn:c+nn）或絕對年份 （nnnn:nnnn） |
方法
實例方法：
日期選擇器也有destroy、disable、enable和option方法
$(selector).datepicker("isDisabled"); // 是否被禁用
$(selector).datepicker("hide", [speed]);// 關閉選擇器，speed爲速度
$(selector).datepicker("show"); // 調用先前的選擇器
$(selector).datepicker("getDate"); // 獲取選擇器中的當前日期
$(selector).datepicker("setDate", date);
// 設置當前日期可以爲：02/26/2011 或 +1m+7d等
全局方法：
$.datepicker.setDefaults(Options); // 設置所有選擇器的默認屬性
$.datepicker.formatDate(format, date, setting);
// format爲字符串，日期格式
Date爲要顯示的日期值
Setting爲可選項，其值是對象，
format可以使用的組合：d天數、dd天數（2位數字）、o年中的天數、
oo年中的天數、D日期短名稱、DD日期長名稱、m月份、mm月份
M月份短名稱、MM月份長名稱、y年份（兩位數字）、yy年份（4位數字）
@自01/01/1970以來的毫秒數
$.datepicker.parseDate(format, value, setting);
// value爲字符串，包含待提取的日期值
例如：
var date =
$.datepicker.parseDate("yy年mm月dd日", "2020年01月26日");
事件
beforeShowDay事件：當選擇器上的每一天顯示之前，將觸發此事件
事件綁定：
$(selector).datepicker({
beforeShowDay:function(date){
1、 date：表示一個日期，
2、 該函數必須返回一個數組：
a) [0]：true或false表示是否可選
b) [1]：表示此日期的CSS類名，默認爲""
c) [2]：表示元素是此日期的一個彈出提示（可選）
}
});
onChangeMonthYear事件：當選擇器移動到新的年份或月份時觸發
事件綁定：
$(selector).datepicker({
onChangeMonthYear:function(year, month, inst){
1、 year:表示所選的年份
2、 month：表示所選的月份（1~12）
3、 inst：表示日期選擇器，它指向所關聯的輸入控件
}
});
onClose事件：當選擇器關閉時觸發
事件綁定：
$(selector).datepicker({
onClose:function(dateText, inst){
1、 dateText：表示所選擇的日期，爲文本字符串，如未選擇，則爲""
2、 inst：表示日期選擇器實例
}
});
onSelect事件：當選擇一個日期時觸發
事件綁定：
$(selector).datepicker({
onSelect:function(dateText, inst){
// 參數同上
}
});
Autocomplete自動完成組件
CSS樣式表文件：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.position.js
jquery.ui.autocomplete.js
在Firefox中運行包含自動完成組件的網頁時，如果在文本框中輸入了中文，
則有可能不會正常彈出自動完成菜單，爲了修復這個BUG，可以對
jquery.ui.autocomplete.js修改，在第97行添加以下代碼：
.bind("input.autocomplete", function(){
self.search(self.item);
})
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
delay |
Integer |
300 |
當用戶按鍵後，激活組件延遲的毫秒數 |
|
minLength |
Integer |
1 |
激活組件必須輸入最小的字符數 |
|
source |
String Array Function |
none |
指定的數據源，必須設置此屬性 可以是一個包含字符串的數組 或包含對象的數組，每個對象應 包含label和value，若只包含 一項，則被同時當做label和value |
source屬性：
若請求的資源位於同一個Web應用程序上，則應返回JSON數據，
可以用source指定一個字符串URL，例如：source: "search.asp"
還能夠將source設置成一個回調函數：
source:function(request, response){
1、 request：表示請求的對象，request.item表示文本框中的值
2、 response：表示響應的回調函數，並返回字符串的數組或對象的數組：
a) response(function(item){
return Array|Object
1、item：表示提供的item屬性進行篩選
});
}
方法
自動完成組件也有destroy、disable、enable、option方法
$(selector).autocomplete("search"[, value]);
// 當數據可用時，顯示建議數據，value爲要搜索的數據，如果不指定該參數，
則使用當前的輸入值，如果提供一個字符串，且minLength爲0，則顯示所有項
$(selector).autocomplete("close"); // 關閉已打開的菜單
事件
1、 search事件：類型：autocompletesearch，
對數據的請求前觸發，若函數返回false則取消請求，不會顯示建議條目
2、 open事件：類型：autocompleteopen，顯示之前觸發
3、 focus事件：類型：autocompletefocus，
焦點移至一個條目之前觸發，此時ui.item指向獲得焦點的條目，
此事件的默認操作是將文本框的字段，替換成獲得焦點條目的值
4、 select事件：類型：autocompleteselect，
當選擇條目時觸發，ui.item指向所選項，item表示包含label
和value屬性的對象，此事件的默認操作是將文本框的字段，替換成選中條目的值
5、 close事件：類型：autocompleteclose，隱藏菜單時觸發
6、 change事件：類型：autocompletechange，在close事件之後觸發
事件綁定：
$(selector).autocomplete({
eventName:function(event, ui){
1、 event：表示事件對象
2、 ui：表示包含附加信息的對象
}
});
Progressbar進度條組件
CSS樣式表文件：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.progressbar.js
在頁面上創建相應的HTML元素（如<div>），然後用構造函數初始化。
CSS樣式
ui-progressbar:進度條容器的樣式
ui-progressbar-value:進度條的樣式
方法
進度條組件也有destroy、disable、enable、option方法
$(selector).progressbar([{value:number}]);// 構造函數
$(selector).progressbar("value"[, value]);// 獲取/設置進度條的值
事件
1、 change事件：類型：當進度條值發生變化時觸發
事件綁定：
$(selector).progressbar({
change:function(event, ui){
1、 event：事件對象
2、 ui：進度條對象
}
});
Slider滑塊組件
CSS樣式表文件：jquery-ui.css
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.slider.js
在頁面創建相應的HTML元素（如<div>），再用構造方法包裝該元素
CSS樣式
ui-slider-horizontal:滑塊軌道
ui-slider-handle:滑塊手柄
ui-slider-range:滑塊範圍
屬性
|
屬性 |
數據類型 |
默認值 |
說明 |
|
animate |
Boolean String Number |
false |
是否添加動畫效果，可接受"slow"、 "normal"、"fast"或毫秒數 |
|
max |
Number |
100 |
設置滑塊的最大值 |
|
min |
Number |
0 |
設置滑塊的最小值 |
|
orientation |
String |
"horizontal" |
設置滑塊的方向，"horizontal"、 "vertical"分別表示橫向和縱向 |
|
range |
Boolean String |
false |
是否存在兩個拖動手柄， |
|
step |
Number |
1 |
設置步長，必須能被範圍大小整除 |
|
value |
Number |
0 |
若只有一個手柄，則指定其值， 若有兩個手柄，則指定第一個手柄的值 |
|
values |
Array |
null |
用於指定多個手柄，若range爲true 則values的長度應該爲2 |
方法
滑塊也有destroy、disable、enable、option方法
$(selector).slider("value"[, value]); // 獲取/設定單手柄滑塊的值
$(selector).slider("values", index[, value]);
// 獲取/設定多手柄滑塊的值
事件
1、 start事件：類型：slidestart，當開始滑動時觸發
2、 slide事件：類型：slide，當拖動滑塊時觸發
3、 change事件：類型：slidechange，當停止滑動或使用編程方法改變值時觸發
4、 stop事件：類型：slidestop，當停止滑動時觸發
事件綁定：
$(selector).slider({
eventName:function(event, ui){
1、 event：事件對象
2、 ui：封裝了屬性的對象，有以下屬性：
a) value：獲取當前手柄的值（單手柄）
b) value[0]：獲取當前手柄的值（多手柄）
}
});