JQUERY外掛程式學習之jQuery UI

標籤：擴充性   3.3   隱藏視窗   4.4   發送   沒有   遠程   發音   rip   

jQuery UI:http://jqueryui.com/

jQuery UI介紹:

jQuery UI 是以 jQuery 為基礎的開源 JavaScript 網頁使用者介面程式碼程式庫。包含底層使用者互動、動畫、特效和可更換主題的可視控制項。我們可以直接用它來構建具有很好互動性的web應用程式。所有外掛程式測試能相容　　IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和 Google Chrome。

組件構成
　　jQuery UI 主要分為3個部分：互動、微件和效果庫。
互動
　　互動組件是一些與滑鼠互動相關的內容，包括Draggable,Droppable,Resizable,Selectable和Sortable等。
微件
　　主要是一些介面的擴充，包括Accordion,AutoComplete,ColorPicker,Dialog,Slider,Tabs,DatePicker,Magnifier,ProgressBar,Spinner等，新版本的UI將包含更多的微件。
效果庫
　　用於提供豐富的動畫效果，讓動畫不再局限於jQuery的animate()方法。
編輯本段其它
　　jQuery UI實際上是jQuery外掛程式，專指由jQuery官方維護的UI方向的外掛程式
　　jQuery UI 與 jquery 的主要區別是：
　　(1) jQuery是一個js庫，主要提供的功能是選取器，屬性修改和事件綁定等等。
　　(2) jQuery UI則是在jQuery的基礎上，利用jQuery的擴充性，設計的外掛程式。提供了一些常用的介面元素，諸如對話方塊、拖動行為、改變大小行為等等。
　　(3) jQuery本身注重於後台，沒有漂亮的介面，而jQuery UI則補充了前者的不足，他提供了華麗的展示介面，使人更容易接受。既有強大的後台，又有華麗的前台。

 

jQueryUI tab

 

1 屬性
1.11 ajaxOptions,當選項卡載入內容時，添加一個ajax選項。只有ajax時，添加的ajax選項才起作用。預設值為null。上面的例子中，添加了beforeSend和success兩個選項。ajax還有一些選項請參考jquery ajax，這裡不做詳解。。。
1.12 初始化設定例：請注意，$(‘.selector‘)是tabs 的類名，在本例中.selector=#tabs,以後不再說明。
$(‘.selector‘).tabs({ ajaxOptions: { async: false } });//這裡是將非同步改為了同步。
1.13 初始化後的參數擷取和設定：請注意：getter為擷取，發音：蓋特兒，setter為設定，發音：塞特兒，以後不再說明。
//getter
var ajaxOptions = $(‘.selector‘).tabs(‘option‘, ‘ajaxOptions‘);
//setter
$(‘.selector‘).tabs(‘option‘, ‘ajaxOptions‘, { async: false });

1.21 cache 預設為false，無緩衝。這個選項用於ajax調用，簡單的說無緩衝，就是每次發送請求都重新整理；有緩衝就是第一次請求重新整理，以後就不重新整理了，關閉頁面是另外一回事。ajaxOptions:{cache:false}應該和這個功能是一樣的吧。
1.22 初始化設定例：
$(‘.selector‘).tabs({ cache: true });
2.23 初始化後的參數擷取和設定：
//getter
var cache = $(‘.selector‘).tabs(‘option‘, ‘cache‘);
//setter
$(‘.selector‘).tabs(‘option‘, ‘cache‘, true);

1.31collapsible，意思是可摺疊的，預設選項是false，不可以摺疊。如果設定為true，允許使用者將已經選中的選項卡內容摺疊起來。這樣說吧：點擊一次選項卡2，選項卡2內容顯示出來了，這時候再次點擊選項卡2，選項卡的內容區就收了起來，再次點擊選項卡2，選項卡的內容區則又展開了。明白否？知道你不明白，不明白就用最上面的例子試試吧。
1.32 初始化設定例：
$(‘.selector‘).tabs({ collapsible: true });
1.33 初始化後的參數擷取和設定：請參考1.23...

1.41 cookie 預設值為null，需要cookie外掛程式。儲存最後一次選擇的選項卡到cookie 中。可使用的選項例：(example): { expires: 7, path: ‘/‘, domain: ‘jquery.com‘, secure: true }.
1.42 初始化設定例：$(‘.selector‘).tabs({ cookie: { expires: 30 } });
1.43 初始化後的參數擷取和設定：請參考1.23...

1.51deselectable 預設為false，作用似乎和collapsible一樣。

1.61 disabled 設定哪些選項卡不可用，是一個數組例[0,1,2]，也就是第一個、第二個、第三個選項卡。預設為[]。
1.62 初始化設定例：$(‘.selector‘).tabs({ disabled: [1, 2] });
1.63 初始化後的參數擷取和設定：請參考1.23...

1.71 event ，切換選項卡的事件，預設為‘click‘，點擊切換選項卡。
1.72 初始化設定例：$(‘.selector‘).tabs({ event: ‘mouseover‘ }); //滑鼠滑過切換選項卡
1.73 初始化後的參數擷取和設定：請參考1.23...

1.81 fx，切換選項卡時的動畫效果，預設為：null，無動畫效果，
1.82 初始化設定：請參看最上面的例子。
1.83 初始化後的參數擷取和設定：請參考1.23...

1.91 idPrefix ，在使用ajax時，idPrefix選項可以為其添加一個唯一的id，預設為：‘ui-tabs-‘ 。
1.92 初始化設定例：$(‘.selector‘).tabs({ idPrefix: ‘ui-tabs-primary‘ });
1.93 初始化後的參數擷取和設定：請參考1.23...

1.101 selected，初始化時，哪個選項卡被選中，預設為0，就是第一個選項卡被選中。
1.102 初始化設定例：$(‘.selector‘).tabs({ selected: 3 });
1.103 初始化後的參數擷取和設定：請參考1.23...

1.111 spinner，當遠程內容載入的時候，（ajax），spinner字串的html內容將被顯示在選項卡的標題上。（我很奇怪，我自己試了，怎麼不起作用？）
1.112 初始化設定例：$(‘.selector‘).tabs({ spinner: ‘Retrieving data...‘ });
1.113 初始化後的參數擷取和設定：請參考1.23...

1.121 panelTemplate ,

1.131 tabTemplate ,

2 事件
先給出一個事件綁定的例子，請注意：
$(‘#example‘).bind(‘tabsselect‘, function(event, ui) {
    ui.tab     // 被選中（點擊後）的選項卡元素
    ui.panel   //這個元素包含被選中（點擊後）的選項卡的內容
    ui.index   //返回一個被選中（或點擊後）選項卡的索引值（從0開始）
});

2.11 select 類型：tabsselect ，點擊選項卡時觸發該事件。
2.12 初始化時綁定事件：
$(‘.selector‘).tabs({
   select: function(event, ui) { ... }
});
2.13 在初始化後使用事件綁定綁定該事件：
$(‘.selector‘).bind(‘tabsselect‘, function(event, ui) {
...
});

2.21 load，類型：tabsload 一個遠程（ajax）選項卡的內容被載入完成後觸發該事件。
2.22 參考2.12
2.23 參考2.13
2.31 show，類型：tabsshow 當選項卡顯示後觸發該事件。
2.41 add，類型：tabsadd ，當一個選項卡被添加後觸發。
2.51 remove ，類型tabsremove ，當一個選項卡被刪除後觸發。
2.61 enable ，類型tabsenable ，當一個選項卡可用時觸發。
2.71 disable，類型tabsdisable，當一個選項卡不可用時觸發。

3 方法
3.11 destroy，哈哈，又到了我最喜歡的摧毀地球時間。例：.tabs( ‘destroy‘ ) 
3.21 disable，整個選項卡不可用。
3.31 enable，整個選項卡可用。.tabs( ‘enable‘ ) 
3.41 option，設定屬性。例：.tabs( ‘option‘ , optionName , [value])
3.51 add，remove，添加、刪除選項卡。例：.tabs( ‘add‘ , url , label , [index]) ，.tabs( ‘remove‘ , index )
3.61 enable，設定某個選項卡標籤可用。例：.tabs( ‘enable‘ , index ) 
3.71 disable，設定某個選項卡標籤不可用。例：.tabs( ‘disable‘ , index ) 
3.81 select，選擇一個選項卡標籤。例：.tabs( ‘select‘ , index ) ，index從0開始。
3.91 load，重載一個ajax選項卡的內容，這個一直載入遠程內容，即使cache設定為true，第二個參數是要重載選項卡的索引值。例：.tabs( ‘load‘ , index )
3.101 url，當一個ajax選項卡將要載入時，改變url。.tabs( ‘url‘ , index , url ) 
3.111 abort，中止所有運行在tab標籤上的ajax請求或動畫。.tabs( ‘abort‘ ) 
3.121 rotate， 自動翻滾選項卡標籤。.tabs(‘rotate‘,ms,[countinue]),第二個參數是毫秒，是兩個標籤自動翻滾所需要的時間，設為0或null為停止翻滾。第三個參數是設定當使用者選擇一個選項卡標籤後是否繼續翻滾，預設為：false，不繼續。
真累，歇歇再說吧。。。
4 技巧
4.1 如何接收已選中選項卡標籤的索引值？
例：var $tabs = $(‘#example‘).tabs();
var selected = $tabs.tabs(‘option‘, ‘selected‘); // => 0
4.2 如何用一個其它元素代替選項卡單擊事件來切換選項卡？
例：var $tabs = $(‘#example‘).tabs(); // 第一個標籤被選中
$(‘#my-text-link‘).click(function() { // 綁定單擊事件
    $tabs.tabs(‘select‘, 2); // 切換到第三個選項卡標籤
    return false;
});
4.3 如何立刻選擇剛添加的選項卡標籤？
例：var $tabs = $(‘#example‘).tabs({
    add: function(event, ui) {
        $tabs.tabs(‘select‘, ‘#‘ + ui.panel.id);
    }
});
4.4 如何在一個新視窗中開啟選項卡標籤？
例：$(‘#example‘).tabs({
    select: function(event, ui) {
        location.href = $.data(ui.tab, ‘load.tabs‘);
        return false;
    }
});

 

jQuery UI dialog

 

1 屬性

1.11 autoOpen ，這個屬性為true的時候dialog被調用的時候自動開啟dialog視窗。當屬性為false的時候，一開始隱藏視窗，知道.dialog("open")的時候才彈出dialog視窗。預設為：true。

1.12 初始化例：請注意，$(‘.selector‘)是dialog 的類名，在本例中.selector=#dialoag,以後不再說明。

$(‘.selector‘).dialog({ autoOpen: false });

1.13 初始化後，得到和設定此屬性例：

//獲得

var autoOpen = $(‘.selector‘).dialog(‘option‘, ‘autoOpen‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘autoOpen‘, false);

 

1.21 bgiframe 預設為false ，When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.

在IE6下，讓後面那個灰屏蓋住select。

1.22 初始化例：

$(‘.selector‘).dialog({ bgiframe: true });

1.23 初始化後，得到和設定：

//擷取

var bgiframe = $(‘.selector‘).dialog(‘option‘, ‘bgiframe‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘bgiframe‘, true);

 

1.31 buttons 顯示一個按鈕，並寫上按鈕的文本，設定按鈕點擊函數。預設為{}，沒有按鈕。

最上面的例子中已經有buttons屬性的用法，請注意。

1.32 初始化例：

$(‘.selector‘).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });

1.33 初始化後，得到和設定：

//擷取

var buttons = $(‘.selector‘).dialog(‘option‘, ‘buttons‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘buttons‘, { "Ok": function() { $(this).dialog("close"); } });

 

1.41 closeOnEscape 為true的時候，點擊鍵盤ESC鍵關閉dialog，預設為true；

1.42 初始化例：

$(‘.selector‘).dialog({ closeOnEscape: false });

1.43 初始化後，得到和設定：

//擷取

var closeOnEscape = $(‘.selector‘).dialog(‘option‘, ‘closeOnEscape‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘closeOnEscape‘, false);

 

1.51 dialogClass 類型將被添加到dialog，預設為空白

1.52 初始化例：

$(‘.selector‘).dialog({ dialogClass: ‘alert‘ });

1.53 初始化後，得到和設定：

//擷取

var dialogClass = $(‘.selector‘).dialog(‘option‘, ‘dialogClass‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘dialogClass‘, ‘alert‘);

 

1.61 draggable、resizable : draggable是否可以使用標題頭進行拖動，預設為true，可以拖動;resizable是否可以改變dialog的大小，預設為true，可以改變大小。

1.62 初始化例：

$(‘.selector‘).dialog({ draggable: false,resizable:false });

1.63 初始化後，得到和設定：

//擷取

var draggable = $(‘.selector‘).dialog(‘option‘, ‘draggable‘);

//設定

$(‘.selector‘).dialog(‘option‘, ‘draggable‘, false);

 

1.71 width、height ，dialog的寬和高，預設為auto，自動。

1.72 初始化例：

$(‘.selector‘).dialog({ height: 530,width:200 });

1.73 初始化後，得到和設定：請參考1.63

 

1.81 maxWidth、maxHeight、minWidth、minHeight ，dialog可改變的最大寬度、最大高度、最小寬度、最小高度。maxWidth、maxHeight的預設為false，為不限。minWidth、minHeight的預設為150。要使用這些屬性需要ui.resizable.js 的支援。

1.82 初始化例：

$(‘.selector‘).dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });

1.83 初始化後，得到和設定：請參考1.63

 

1.91 hide、show ，當dialog關閉和開啟時候的效果。預設為null，無效果

1.92 初始化例：最上面的執行個體中用到，請自己看吧。

1.93 初始化後，得到和設定：請參考1.63

 

1.101 modal,是否使用強制回應視窗，強制回應視窗開啟後，頁面其他元素將不能點擊，直到關閉強制回應視窗。預設為false不是強制回應視窗。

1.102 初始化例：$(‘.selector‘).dialog({ modal: true });

1.103 初始化後，得到和設定：請參考1.63

 

1.111 title，dialog的標題文字，預設為空白。

1.112 初始化例：見最上面的執行個體。1.113 初始化後，得到和設定：請參考1.63

 

1.121 position ，dialog的顯示位置：可以是‘center‘, ‘left‘, ‘right‘, ‘top‘, ‘bottom‘,也可以是top和left的位移量也可以是一個字串數組例如[‘right‘,‘top‘]。

1.122 初始化例：$(‘.selector‘).dialog({ position: [‘top‘,‘right‘] }); 1.123 初始化後，得到和設定：請參考1.63

 

1.131 zIndex, dialog的zindex值，預設值為1000.

1.132 初始化例：$(‘.selector‘).dialog({ zIndex: 3999 }); 1.133 初始化後，得到和設定：請參考1.63

 

1.141 stack 預設值為true，當dialog獲得焦點是，dialog將在最上面。

1.142 初始化例：$(‘.selector‘).dialog({ stack: false }); 1.143 初始化後，得到和設定：請參考1.63

 

2 事件 

2.11 beforeclose 類型dialogbeforeclose ， 當dialog嘗試關閉的時候此事件將被觸發，如果返回false，那麼關閉將被阻止。

2.12 初始化例：$(‘.selector‘).dialog({

   beforeclose: function(event, ui) { ... }

});

2.13 使用類型綁定此事件例：$(‘.selector‘).bind(‘dialogbeforeclose‘, function(event, ui) {

...

});

 

2.21 close 類型：dialogclose ，當dialog被關閉後觸發此事件。

2.22 初始化例：$(‘.selector‘).dialog({

   close: function(event, ui) { ... }

});

2.23 使用類型綁定此事件例：$(‘.selector‘).bind(‘dialogclose‘, function(event, ui) {

...

});

 

2.3 open 類型：dialogopen ，當dialog開啟時觸發。（篇幅有限，該省略的就省略了啊，初始化例和使用類型綁定事件可以向上參考。）

2.4 focus 類型：dialogfocus ，當dialog獲得焦點時觸發。

2.5 dragStart 類型：dragStart，當dialog拖動開始時觸發。

2.6 drag 類型：drag ，當dialog被拖動時觸發。

2.7 dragStop 類型：dragStop ，當dialog拖動完成時觸發。

2.8 resizeStart 類型：resizeStart ，當dialog開始改變表單大小時觸發。

2.9 resize 類型：resize，當dialog被改變大小時觸發。

2.10 resizeStop 類型：resizeStop，當改變完大小時觸發。

 

3 方法

3.1 destroy ，我喜歡這個哦，摧毀地球。。。 例：.dialog( ‘destroy‘ ) 

3.2 disable，dialog不可用，例：.dialog(‘disable‘);

3.3 enable,dialog可用，例，如3.2

3.4 close，open，關閉、開啟dialog

3.5 option ，設定和擷取dialog屬性，例如：.dialog( ‘option‘ , optionName , [value] ) ，如果沒有value，將是擷取。

3.6 isOpen ，如果dialog開啟則返回true，例如：.dialog(‘isOpen‘)

3.7 moveToTop ,將dialog移到最上層，例如：.dialog( ‘moveToTop‘ )

 

jQuery UI accordion

1 選項：
1.1 active 這個參數是設定預設選項的，預設情況下是0，也就是第一個哦。哈哈。
初始化設定例：$(‘#accordion‘).accordion({ active: 2 });
在初始化之後的擷取和設定例：
//擷取 var active = $(‘#accordion‘).accordion(‘option‘, ‘active‘); //設定 $(‘#accordion‘).accordion(‘option‘, ‘active‘, 2);
1.2 animated 這個參數是設定動畫效果 預設選項是‘slide’
可以設定你喜歡的動畫效果，或不使用動畫效果（設定false），除了預設設定，使用‘bounceslide‘和‘easeslide‘需要UI Effects Core 。。。嘿嘿。。。
初始化設定例： $(‘#accordion‘).accordion({ animated: ‘easeslide‘ });
在初始化之後的擷取和設定例：
//擷取
var animated = $(‘#accordion‘).accordion(‘option‘, ‘animated‘);
//設定
$(‘#accordion‘).accordion(‘option‘, ‘animated‘, ‘easeslide‘);
1.3 autoHeight 預設是true，如果設定，所有內容部分的高被設定為其中最高內容的高。 初始化設定：$(‘#accordion‘).accordion({ autoHeight: false })；
初始化以後的擷取或設定
//擷取
var autoHeight = $(‘#accordion‘).accordion(‘option‘, ‘autoHeight‘);
//設定
$(‘#accordion‘).accordion(‘option‘, ‘autoHeight‘, false);
1.4 clearStyle 預設是false，似乎是清除style，哈哈~~~
初始化設定 $(‘#accordion‘).accordion({ clearStyle: true });
初始化後的擷取和設定和上面的差不多。。。省略。。。
1.5 event 預設是‘click‘ 如何展開選項。可以設定長雙擊、滑鼠滑過等。。。
初始化設定例：$(‘#accordion‘).accordion(event:"mouseover")；
初始化後的設定請參考上面的 ，此處省略。。。
1.6 fillSpace ，充滿父元素的高，預設為false ，使用此項,autoHeight無效。
初始化設定例：$(‘#accordion‘).accordion({ fillSpace: true });
初始化後的擷取和設定請參考上面的 ，此處省略。。。
1.7 header，設定頭元素（見上面執行個體)，預設值為：‘> li > :first-child,> :not(li):even‘
此處省略，自己理解。。。
1.8 icon，設定小表徵圖，預設值為： { ‘header‘: ‘ui-icon-triangle-1-e‘, ‘headerSelected‘: ‘ui-icon-triangle-1-s‘ }
另外，請看下面的英國字兒~~~只可意會不可言傳。。。
Icons to use for headers. Icons may be specified for ‘header‘ and ‘headerSelected‘, and we recommend using the icons native to the jQuery UI CSS Framework manipulated byjQuery UI ThemeRoller

初始化設定例：$(‘#accordion‘).accordion({ icons: { ‘header‘: ‘ui-icon-plus‘, ‘headerSelected‘: ‘ui-icon-minus‘ } });
初始化後的擷取和設定省略。。。
1.9 navigation 和navigationFilter暫時不知道到底是做什麼用的，回頭再說吧。。。

2 事件
2.1 change事件 accordion改變時觸發的事件，有兩種Binder 方法
第一種：
$(‘#accordion‘).bind(‘accordionchange‘, function(event, ui) {
ui.newHeader // jQuery 對象, 啟用 header
ui.oldHeader // jQuery 對象, 之前 header
ui.newContent // jQuery 對象, 啟用 content
ui.oldContent // jQuery 對象, 之前 content
});這種方法在前面的例子中已經都有嘍~~
第二種：
$(‘#accordion‘).accordion({
   change: function(event, ui) { ... }
}); 看清楚了吧。哈哈。

3 方法
3.1 destroy ：毀滅地球...
使用方法：.accordion( ‘destroy‘ ) 
3.2 disable：accordion不可用，使之無效。
使用方法：.accordion(‘disable‘)
3.3 enable： 可用，使之有效，使用方法：略...
3.4 option：參數，使用方法：前面都已經用過了，例：.accordion( ‘option‘ , optionName ,[value]) 
3.5 activate：也是設定預設選項，和參數active 作用一樣。例：.accordion( ‘activate‘ , index )

JQUERY外掛程式學習之jQuery UI