侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

Dynamically add tabs

2023-12-01 星期五 / 0 评论 / 0 点赞 / 43 阅读 / 5018 字

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

广告 广告

评论区