easyui动态创建tab面板

最新推荐文章于 2022-04-06 21:49:51 发布

gyzsky

最新推荐文章于 2022-04-06 21:49:51 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.youkuaiyun.com/hws1058648831a/article/details/18794405

easyui 专栏收录该内容

4 篇文章

订阅专栏

该博客展示了如何使用EasyUI库在网页中动态添加Tab面板。通过JavaScript函数`AddTabs`，可以为每个Tab设置标题（如百度、腾讯、新浪）并指定对应的URL（例如百度搜索引擎）。当点击链接按钮时，如果Tab已经存在，则选择它，否则添加新的Tab并加载相应的内容。整个示例使用了EasyUI的CSS和JS文件，确保了良好的界面展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="动态添加tabs面板.aspx.cs" Inherits="easyui练习.动态添加tabs面板" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="JS/easyUI/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="JS/easyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="JS/easyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <link href="JS/easyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="JS/easyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="JS/wikmenu.js" type="text/javascript"></script>
    <script src="JS/wikmain.js" type="text/javascript"></script>

    <script type="text/javascript">
        function AddTabs(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%;"></ifrmae>';
                $('#tt').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="margin-bottom:10px">
            <a href="#" class="easyui-linkbutton" onclick="AddTabs('百度','http://www.baidu.com')">百度</a>
            <a href="#" class="easyui-linkbutton" onclick="AddTabs('腾讯','http://www.qq.com')">腾讯</a>
            <a href="#" class="easyui-linkbutton" onclick="AddTabs('新浪','http://www.sina.com')">新浪</a>
        </div>
        <div id="tt" class="easyui-tabs" style="width:600px; width:600px">
            <div title="Home">
            </div>
        </div>
    </div>
    </form>
</body>
</html>