第16章項目-知問前端選項卡

16--學(xué)習(xí)要點修改tabs樣式主講教師：合作一．使使用tabs比較簡單，但需要按照指定的規(guī)范即<div<li><a<li><a<li><a<divid="tabs1">tab1-<divid="tabs2">tab2-<divid="tabs3">tab3-二．修改tabs樣們tabs的樣式，根據(jù)樣式進(jìn)行修改。我們?yōu)榱撕头?，對tabs的標(biāo)題背//無須修改ui里的CSS，直接用style.css替代{}#tabs{}//#tabs1,#tabs2,#tabs3{top:-}三．tabs()方法的屬選項卡方法有兩種形式：1.tabs(options)，options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；2.tabs('actionparam)，action是操作選項卡方法的字符串，param則是options的某個選項。屬默認(rèn)值/類說false/布爾當(dāng)設(shè)置為true是，允許選項卡折疊對應(yīng)的內(nèi)容。默認(rèn)值為false，不會關(guān)閉對應(yīng)內(nèi)容無/數(shù)使用數(shù)組來指定禁用哪個選項卡的索引[0,1]來禁用前兩個選項卡click/字符觸發(fā)tab的事件類型，默認(rèn)click?？梢栽O(shè)置mouseover等其他鼠標(biāo)事件數(shù)組和布爾如果是數(shù)組，初始化時默認(rèn)顯示哪個tab，默認(rèn)0。如果是布爾值，那么默認(rèn)是否折疊。條件必須collapsibletrue。content/字符動根據(jù)最高的那個為基準(zhǔn)，fill則是填充一定的可用高度false/布爾切換選項卡時，默認(rèn)采用淡入效果切換選項卡時，默認(rèn)采用淡出效果collapsible:true,disabled:[0],event:'mouseover',active:false,heightStyle:hide:true,show:true,特效名說框從頂部顯示或框斷斷續(xù)續(xù)地顯示或，垂直運框從中心垂直地顯示或框從左邊顯示或框從左邊顯示或，有變框從左上角顯示或框顯示或，伴隨著和背景色的變框從中心開始縮放。顯示時“收縮”，時“生長框從中心開始縮放。顯示時“生長”，時“收縮框以閃爍形式顯示或三．tabs()方法的事除了屬性設(shè)置外，ab()方法也提供了大量的事件。這些事件可以給各種不同狀態(tài)時提供回調(diào)函數(shù)。說當(dāng)創(chuàng)建一個選項卡時激活此事件。該方法有兩個參數(shù)當(dāng)切換一個活動卡時，啟動此事件。該方法有兩個參數(shù)(event,ui)，ui參數(shù)有四個子屬性newTab、nenel、oldTab，oldPanel。分別得到的時候新tab對象、新內(nèi)容對象、舊tab對象和舊內(nèi)容對象數(shù)(event,ui)，ui參數(shù)有四個子屬性newTab、nenel、oldTab，oldPaneltab對象、新內(nèi)容對象、舊tab對象和舊內(nèi)容對象當(dāng)ajax加載一個文檔后激活此事件。該方法有兩個參數(shù)當(dāng)ajax加載一個文檔前激活此事件。該方法有兩個參數(shù)(event,ui)，ui參數(shù)有tabpanel以及jqXHR和ajaxSettings，前兩個得到當(dāng)前活動卡和內(nèi)容選項的對象，后兩個是ajax操作對象//當(dāng)選項卡創(chuàng)建時觸create:function(event,{//當(dāng)切換到一個活動卡時觸activate:function(event,alert($(ui.newTab.get()) //當(dāng)切換到一個活動卡之前觸beforeActivate:function(event,{alert($(ui.oldTab.get())alert($(ui.newTab.get())在使用load和beforeLoad事件之前，我們先要了解一下ajax調(diào)用的基本方法<li><a<li><a<li><atabs1.html、tabs2.htmltabs3html只要書寫即可，無須包含<div>。比如tabs1-而這個時候，我們的CSS需要做一定的修改，只要將之前的ID換成如下即可load:function(event,{}beforeLoad:function(event,{ui.ajaxSettings.url='tabs2html';ui.jqXHR.success(function(responseText){}tabs('action',param)方方說禁用選項啟用選項通過ajax獲取選項卡內(nèi)獲取選項卡的jQuery對刪除選項卡，直接阻斷了tabs更新選項卡，比如高獲取options屬性的設(shè)置options屬性的//禁用選項 //$('#tabs').tabs('disable',//啟用選項 //$('#tabs').tabs('enable',//獲取選項jQuery對//更新選項//重載指定選項卡內(nèi)$('#tabs').tabs('load',alert($('#tabs').tabs('option',五．tabs在tabs的事件中，提供了使用on()方法處理的事件方法on()方法觸發(fā)的選項卡特效名說選