Dynamically add tabs

Tabs（选项卡） 使用$.fn.tabs.defaults重写默认值对象。 选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定

Tabs（选项卡）

使用$.fn.tabs.defaults重写默认值对象。

选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

依赖关系

• panel

• linkbutton

使用案例

Step 1: Create the tabs

<div style="margin-bottom:10px">    <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>    <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>    <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a></div><div id="tt" class="easyui-tabs" style="width:400px;height:250px;">    <div title="Home"></div></div>

The html code is simple, we create the tabs with one tab panel named 'Home'. Remember we don't need write any js code.

Step 2: Implement the 'addTab' function

function addTab(title, url){if ($('#tt').tabs('exists', title)){            $('#tt').tabs('select', title);} else { var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';        $('#tt').tabs('add',{            title:title,            content:content,            closable:true        });         }}

We use the 'exists' method to determine whether the tab is exists, if so active the tab. Calling the 'add' method to add a new tab panel.

创建面板

1. 通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div>标签进行创建，用法和panel(面板)相同。

选项卡面板

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名	属性值类型	描述	默认值
id	string	选项卡面板的ID属性。	null
title	string	选项卡面板的标题文本。
content	string	选项卡面板的内容。
href	string	从URL加载远程数据内容填充到选项卡面板。	null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。	true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题。	null
width	number	选项卡面板宽度。	auto
height	number	选项卡面板高度。	auto
collapsible	boolean	如果为true，则允许选项卡摺叠。	false

选项卡面板新增且独有的属性。

属性名	属性值类型	描述	默认值
closable	boolean	在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板。	false
selected	boolean	在设置为true的时候，选项卡面板会被选中。	false

实例

http://www.jeasyui.com/tutorial/layout/tabs2_demo.html

参考:API手册-中文版1.4