jQuery EasyUI 布局 - 动态添加标签页(Tabs)

jQuery EasyUI 教程 · 2019-04-06 11:17:37

通过使用 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 面板。

下载 jQuery EasyUI 实例

jeasyui-layout-tabs2.zip

点击查看所有 jQuery EasyUI 教程 文章: https://codercto.com/courses/l/42.html

查看所有标签

C++数据结构与算法

C++数据结构与算法

[美]乔兹德克(Adam Drozdek) / 徐丹、吴伟敏 / 清华大学出版社 / 2014-10-1 / 63.00元

本书全面系统地介绍了数据结构,并以C++语言实现相关的算法。书中主要强调了数据结构和算法之间的联系,使用面向对象的方法介绍数据结构,其内容包括算法的复杂度分析、链表、栈、队列、递归、二叉树、图、排序和散列。书中还清晰地阐述了同类教材中较少提到的内存管理、数据压缩和字符串匹配等主题。书中包含大量的示例分析和图形,便于读者进一步理解和巩固所学的知识。一起来看看 《C++数据结构与算法》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码