JQuery UI - tabs 收藏 html
·概述 jquery
標籤頁插件一般用於將內容分解成多個部分,可交換查看,節省空間。有點相似於手風琴插件。 ajax
官方示例地址:http://jqueryui.com/demos/tabs/ 數組
·豐富的事件支持: 緩存
tabsselect, tabsload, tabsshow cookie
tabsadd, tabsremove ssh
tabsenable, tabsdisable async
事件綁定示例: ide
$('#example').bind('tabsselect', function(event, ui) { 函數
// 在事件函數的上下文中可以使用:
ui.tab // 錨元素選中的標籤頁
ui.panel // 錨元素選中的標籤頁的內容
ui.index // 錨元素選中的標籤頁的索引(從0開始)
});
注意:一個tabsselect事件若是返回false,那麼新的標籤頁將不會被激活。(可用於驗證表單內容)
·Ajax模式:
標籤頁插件支持經過ajax動態加載一個標籤的內容。
你須要的僅是一個帶有連接的HTML列表,告訴插件須要到哪獲取內容。
<div id="example">
<ul>
<li><a href="ahah_1.html" mce_href="ahah_1.html"><span>Content 1</span></a></li>
<li><a href="ahah_2.html" mce_href="ahah_2.html"><span>Content 2</span></a></li>
<li><a href="ahah_3.html" mce_href="ahah_3.html"><span>Content 3</span></a></li>
</ul>
</div>
顯然,這將會減緩內容加載的速度。
注意:若是你要重用一個標籤頁容器,你能夠試着匹配其title屬性和容器的id,
例如: <li><a href="hello/world.html" mce_href="hello/world.html" title="Todo Overview"> ... </a></li>
容器: <div id="Todo_Overview"> ... </div>
·關於後退按鈕和書籤
Tabs 2 已經支持此功能(不支持Safari 3)
·How to...
·檢索選中標籤的索引
var $tabs = $('#example').tabs();
var selected = $tabs.tabs('option', 'selected'); // => 0
·在當前標籤中打開連接,而不是跳轉頁面
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
·點擊連接跳轉到指定的標籤頁(非標籤頭連接)
var $tabs = $('#example').tabs(); // 選中第一個標籤
$('#my-text-link').click(function() { // 綁定點擊事件
$tabs.tabs('select', 2); // 激活第三個標籤
return false;
});
·選中表單前驗證
$('#example').tabs({
select: function(event, ui) {
var isValid = ... // 表單驗證返回結果true或false
return isValid;
}
});
·添加一個標籤並選中
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
·follow a tab's URL instead of loading its content via ajax
Note that opening a tab in a new window is unexpected, e.g. inconsistent behaviour exposing a usablity problem (http://www.useit.com/alertbox/tabs.html).
$('#example').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
if( url ) {
location.href = url;
return false;
}
return true;
}
});
·prevent a FOUC (Flash of Unstyled Content) before tabs are initialized
Add the necessary classes to hide an inactive tab panel to the HTML right away - note that this will not degrade gracefully with JavaScript being disabled:
<div id="example" class="ui-tabs">
...
<div id="a-tab-panel" class="ui-tabs-hide"> </div>
...
</div>
·參數(參數名 : 參數類型 : 默認名稱)
ajaxOptions : Options : null
Ajax加載標籤內容時,附加的參數 (詳見 $.ajax)。
初始:$('.selector').tabs({ ajaxOptions: { async: false } });
獲取:var ajaxOptions = $('.selector').tabs('option', 'ajaxOptions');
設置:$('.selector').tabs('option', 'ajaxOptions', { async: false });
cache : Boolean : false
是否緩存Ajax加載的標籤內容,若是緩存則只在第一次加載時獲取。
初始:$('.selector').tabs({ cache: true });
獲取:var cache = $('.selector').tabs('option', 'cache');
設置:$('.selector').tabs('option', 'cache', true);
collapsible : Boolean : false
設置爲true,則容許一個已選中的標籤變成未選中狀態。
初始:$('.selector').tabs({ collapsible: true });
獲取:var collapsible = $('.selector').tabs('option', 'collapsible');
設置:$('.selector').tabs('option', 'collapsible', true);
cookie : Object : null
利用cookie記錄最後選中的標籤,須要cookie插件支持。
初始:$('.selector').tabs({ cookie: { expires: 30 } });
獲取:var cookie = $('.selector').tabs('option', 'cookie');
設置:$('.selector').tabs('option', 'cookie', { expires: 30 });
deselectable : Boolean : false
設置標籤插件爲不可選中的。(不推薦使用在1.7版本,應使用collapsible)
初始:$('.selector').tabs({ deselectable: true });
獲取:var deselectable = $('.selector').tabs('option', 'deselectable');
設置:$('.selector').tabs('option', 'deselectable', true);
disabled : Array : []
在加載時,禁用哪些標籤頁,填寫標籤頁的索引。
初始:$('.selector').tabs({ disabled: [1, 2] });
獲取:var disabled = $('.selector').tabs('option', 'disabled');
設置:$('.selector').tabs('option', 'disabled', [1, 2]);
event : String : 'click'
設置什麼事件將觸發選中一個標籤頁。
初始:$('.selector').tabs({ event: 'mouseover' });
獲取:var event = $('.selector').tabs('option', 'event');
設置:$('.selector').tabs('option', 'event', 'mouseover');
fx : Options, Array : null
啓用動畫效果當標籤頁顯示和隱藏。
初始:$('.selector').tabs({ fx: { opacity: 'toggle' } });
獲取:var fx = $('.selector').tabs('option', 'fx');
設置:$('.selector').tabs('option', 'fx', { opacity: 'toggle' });
idPrefix : String : 'ui-tabs-'
If the remote tab, its anchor element that is, has no title attribute to generate an id from, an id/fragment identifier is created from this prefix and a unique id returned by $.data(el), for example "ui-tabs-54".
初始:$('.selector').tabs({ idPrefix: 'ui-tabs-primary' });
獲取:var idPrefix = $('.selector').tabs('option', 'idPrefix');
設置:$('.selector').tabs('option', 'idPrefix', 'ui-tabs-primary');
panelTemplate : String : '<div></div>'
當動態添加一個標籤容器時,它的容器的HTML元素。
初始:$('.selector').tabs({ panelTemplate: '<li></li>' });
獲取:var panelTemplate = $('.selector').tabs('option', 'panelTemplate');
設置:$('.selector').tabs('option', 'panelTemplate', '<li></li>');
selected : Number : 0
設置初始化時,選中的標籤頁的索引(從0開始)。若是所有未選中,則使用-1
初始:$('.selector').tabs({ selected: 3 });
獲取:var selected = $('.selector').tabs('option', 'selected');
設置:$('.selector').tabs('option', 'selected', 3);
spinner : String : '<em>Loading…</em>'
設置當從遠程加載內容時,標籤的標題顯示的文本內容,若是設置爲空則停用此行爲。
初始:$('.selector').tabs({ spinner: 'Retrieving data...' });
獲取:var spinner = $('.selector').tabs('option', 'spinner');
設置:$('.selector').tabs('option', 'spinner', 'Retrieving data...');
tabTemplate : String : '<li><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></li>'
當動態添加一個標籤頁時,它的標籤樣式,#{href}和#{label}是用於替換add時的參數。
初始:$('.selector').tabs({ tabTemplate: '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>' });
獲取:var tabTemplate = $('.selector').tabs('option', 'tabTemplate');
設置:$('.selector').tabs('option', 'tabTemplate', '<div><a href="#{href}" mce_href="#{href}"><span>#{label}</span></a></div>');
·事件
select : tabsselect
當點擊一個標籤標題時,觸發此事件。
初始:$('.selector').tabs({ select: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsselect', function(event, ui) { ... });
load : tabsload
當遠程加載一個標籤頁內容完成後,觸發此事件。
初始:$('.selector').tabs({ load: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsload', function(event, ui) { ... });
show : tabsshow
當一個標籤頁內容顯示出來後,觸發此事件。
初始:$('.selector').tabs({ show: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsshow', function(event, ui) { ... });
add : tabsadd
當添加一個標籤頁後,觸發此事件。
初始:$('.selector').tabs({ add: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsadd', function(event, ui) { ... });
remove : tabsremove
當移除一個標籤頁後,觸發此事件。
初始:$('.selector').tabs({ remove: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsremove', function(event, ui) { ... });
enable : tabsenable
當一個標籤頁被設置成啓用後,觸發此事件。
初始:$('.selector').tabs({ enable: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsenable', function(event, ui) { ... });
disable : tabsdisable
當一個標籤頁被設置成禁用後,觸發此事件。
初始:$('.selector').tabs({ disable: function(event, ui) { ... } });
綁定:$('.selector').bind('tabsdisable', function(event, ui) { ... });
·屬性
destroy
銷燬一個標籤插件對象。
用法:.tabs( 'destroy' )
disable
禁用標籤插件。
用法:.tabs( 'disable' )
enable
啓用標籤插件。
用法:.tabs( 'enable' )
option
獲取或設置標籤插件的參數。
用法:.tabs( 'option' , optionName , [value] )
add
添加一個標籤頁。
用法:.tabs( 'add' , url , label , [index] )
remove
移除一個標籤頁。
用法:.tabs( 'remove' , index )
enable
啓用一組標籤頁。
用法:.tabs( 'enable' , index ) //index是數組
disable
禁用一組標籤頁。
用法:.tabs( 'disable' , index ) //index是數組
select
選中一個標籤頁。
用法:.tabs( 'select' , index )
load
從新加載一個ajax標籤頁的內容。
用法:.tabs( 'load' , index )
url
改變一個Ajax標籤頁的URL。
用法:.tabs( 'url' , index , url )
length
獲取標籤頁的數量。
用法:.tabs( 'length' )
abort
終止正在進行Ajax請求的的標籤頁的加載和動畫。
用法:.tabs( 'abort' )
rotate
自動滾動顯示標籤頁。
用法:.tabs( 'rotate' , ms , [continuing] ) //第二個參數是停留時間,第三個參數是當用戶選中一個標籤頁後是否繼續執行