@author YHC
当使用jQuery EasyUI 容易的添加tabs,你就应该调用'add'方法.
在这个示例中我们将动态的添加tabs使用iframe显示在一个页面上,当点击add按钮一个新的tab将被添加,如果tab已经存在,它将被激活.
查看Demo
步骤1:创建 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>
这个html代码非常简单,我们创建
tabs 和一个tab panel命名叫Home,记得我们不需要写任何的js代码.
步骤 2:实现 'addTab' 函数
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
});
}
}
我们使用
'exists'方法决定tab是否已经存在,如果存在就激活tab,没有就调用'add'
方法添加一个新的panel.
下载EasyUI 示例代码:
分享到:
相关推荐
使用easyui创建tabs组件和动态添加 使用easyUI创建一个自动播放的tabs 使用easyUI创建XP风格左侧面板 DataGrid 使用easyUI转换HTML table到datagrid 使用easyUI给datagrid添加pagination 使用easyUI添加...
本教程将展示如何使用easyui创建一个标签组件。标签可以动态地添加或删除多个面板,你可以使用标签在同一个页面上显示不同的实体。 标签一次只能显示一个面板,每个面板都有标题、图表和关闭按钮。当标签被选中之后...
第02课(介绍easyloader组件和easyui怎样使用) 第03课(parser组件panel组件) 第04课(通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等) 第05课(讲解easyui的form控件、validatebox控件...
演示如何使用 easyui 创建一个 Tabs 组件。 Tabs 有多个可以动态地添加或移除的面板(panel)。 可以使用 Tabs 来在相同的页面上显示不同的实体。 Tabs 一次仅仅显示一个面板(panel),每个面板(panel)都有标题...
创建和动态添加tabs组件 创建自动播放tab 创建XP风格左侧面板 数据表格 转换table到数据表格 数据表格添加分页组件 数据表格添加查询功能 数据表格添加工具条 数据表格设置冻结列 动态改变数据...
第02课(介绍easyloader组件和easyui怎样使用) 第03课(parser组件panel组件) 第04课(通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等) 第05课(讲解easyui的form控件、validatebox控件...
注意: chm格式文档如果打不开,有可能是被杀毒软件拦截掉了,请关闭后再试,如果还是不能用,就使用exe格式的吧!另外文档全部存放在docs目录下...datetimebox:添加“cloneFrom”方法来快速创建“datetimebox”组件。
注意: chm格式文档如果打不开,有可能是被杀毒软件拦截掉了,请关闭后再试,如果还是不能用,就使用exe格式的吧!另外文档全部存放在docs目录下...datetimebox:添加“cloneFrom”方法来快速创建“datetimebox”组件。
第02课(介绍easyloader组件和easyui怎样使用) 第03课(parser组件panel组件) 第04课(通过用户登录来演示dialog、ajax的使用,serialize方法的使用,前后台怎样交互等) 第05课(讲解easyui的form控件、validatebox控件...
Bug(修复) combogrid:修复combogrid组件和其他combo组件高度不一致的问题; datagrid:修复在datagrid行元素调用“updateRow”方法的时候...datetimebox:添加“cloneFrom”方法来快速创建“datetimebox”组件。