easyui学习记录9-选项卡

效果图

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jq/jquery.min.js"></script>
    <script src="../jq/jquery.easyui.min.js"></script>
    <link rel="stylesheet" href="../themes/default/easyui.css" />
    <link rel="stylesheet" href="../themes/icon.css" />
    <script src="../jq/easyui-lang-zh_CN.js"></script>
</head>

<body>
    <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>

    <script>
        function addTab(title, url) {
            //title标签页面板（tab panel）的标题文字。
            //content	标签页面板（tab panel）的内容。
            //closable  当设置为 true 时，允许标签页面板（tab panel）可折叠。
            // tabs 返回全部的标签页面板（tab panel）。
            //add 添加一个新的标签页面板（tab panel）
            if ($('#tt').tabs('exists', title)) {//改选项卡已经存在
            console.log(111);
                $('#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
                });
            }
        }
    </script>
</body>

</html>
张张打怪兽
发布了74 篇原创文章 · 获赞 7 · 访问量 1万+
私信关注
easyui学习记录9-选项卡

效果图

猜你喜欢
