DIV CSS 佈局教程網

Tabs【標簽】

創建一個tab標簽

使用說明
使用到的頭文件：easyui.css、icon.css、jquery-1.4.2.min.js、jquery.easyui.min.js

html
代碼如下:
<div id="tt" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;">
tab3
</div>
</div>


JQuery代碼
代碼如下:
//創建一個標簽容器
$('#tt').tabs(options);

//增加一個tab面板
$('#tt').tabs('add',{
title:'New Tab',
content:'Tab Body',
closable:true
});

Tabs Container特性說明

名稱 類型 描述 默認值 width number 標簽容器寬度 auto height number 標簽容器高度 auto idSeed number 應該是生成標簽面板的基本id 0 plain boolean 設置true，標簽欄顯示背景 false fit boolean 設置true，自適應父集容器大小 false border boolean 標簽容器邊框 true scrollIncrement number 標簽卷按鈕被按下，滾動的像素 100 scrollDuration number 滾動動畫持續的毫秒 400

Tabs Container事件說明

名稱 參數 描述 onLoad arguments ajax面板加載完畢後觸發，參數調用跟jQuery.ajax調功能一樣 onSelect title 選中標簽面板觸發 onClose title 關閉標簽面板觸發

Tabs Container方法說明

名稱 參數 描述 resize none 調整容器的布局 add options 添加一個新的標簽面板,選擇一個配置對象參數,看標簽面板的特性說明 close title 關閉一個標簽面板,標題參數顯示的面板被關閉。 select title 選中一個標簽面板 exists title 指明特殊面板顯示存在。

Tab Panel特性說明

名稱 類型 描述 默認值 id string 標簽面板id null title string 標簽面板的title content string 標簽面板的content. href string 面板遠程加載進來數據的地址. null cache boolean 設置true，緩存標簽面板 true icon string 標簽面板標題上圖標css。 null closable boolean 設置true，標題上顯示一個關閉按鈕 false selected boolean 設置true，標簽面板被選中【默認那個顯示在前】 false width number 標簽面板寬度 auto height number 標簽面板高度 auto

有些覺得翻譯的牽強，肯定也有錯的地方，謝謝指出來。