jQuery EasyUI 中文API Layout(Tabs)

2019-11-21 00:32:26

字體：大中小

來源：轉載

供稿：網友

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