jQuery EasyUI 布局之动态添加tabs标签页
更新时间：2015年11月18日 11:34:41 投稿：mrr
本文给大家介绍jquery easyui布局之动态添加tabs标签页，实现思路是这样的通过调用add方法就可以轻松实现，本文分步骤给大家详细介绍，需要的朋友一起学习吧
在没看下文之前先给大家简单介绍easyui相关知识。
easyui是一种基于jQuery的用户界面插件集合。ddd
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
通过使用 jQuery EasyUI 可以很容易地添加 Tabs。您只需要调用 'add' 方法即可。
在本教程中，我们将使用 iframe 动态地添加显示在一个页面上的 Tabs。 当点击添加按钮，一个新的 tab 将被添加。如果 tab 已经存在，它将被激活。
步骤 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 代码非常简单,我们创建了带有一个名为 'Home' 的 tab 面板的 Tabs。请注意，我们不需要写任何的 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' 方法来添加一个新的 tab 面板。
好了，本教程到此就结束了，希望对大家学习有所帮助。
相关文章
今天工作的时候遇到一个问题，下面的代码运行之后每次弹出来的都是1，详细的解决方法如下，需要的朋友参考下2013-11-11
最近我在做一个安全监测系统，选择了用easyui进行搭建，easyui是一种基于jQuery的用户界面插件集合。使用easyui可以省去很多代码，功能上需要加一些样式。下面小编给大家介绍下给Easyui-Datebox设置隐藏或者不可用的解决方法2017-05-05
这篇文章主要介绍了基于jQuery实现放大镜效果，一般应用于放大查看商品图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-12-12
下面小编就为大家带来一篇jQueryUI Sortable 应用Demo(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了jquery 遍历hash操作,结合实例形式分析了jQuery基于ajax交互获取并遍历hash相关操作技巧,需要的朋友可以参考下2019-10-10
本篇文章主要是对jQuery 无限级菜单的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JQuery 原来比我想象的要强大的多，本文用 JQuery 实现锚点链接之间的平滑滚动，在同一页面的锚点链接之间实现平滑的滚动2014-10-10
Boxy是一个基于JQuery的弹出层插件，它有相对漂亮的外观，功能齐全，支持iframe，支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重，但使用不那么方便。2011-10-10
本文主要介绍了jQuery的使用方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
Bootstrap是最流行的前端开发框架。本文涉及到bootstrap的特性介绍，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-10-10
最新评论