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