JQUERY插件学习之jQuery UI
?
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改變時觸發的事件，有兩種綁定方法
第一種：
$('#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 )
轉載于:https://www.cnblogs.com/jason819/archive/2013/06/06/3120599.html
總結
以上是生活随笔為你收集整理的JQUERY插件学习之jQuery UI的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql之mysqldump命令
- 下一篇： 特定视图呈现时发生的事件顺序