第16章項(xiàng)目-知問(wèn)前端選項(xiàng)卡

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