easyui 简单框架界面（2）动态生成Tag标签

最新推荐文章于 2024-10-16 15:01:20 发布

DayDay_Code

最新推荐文章于 2024-10-16 15:01:20 发布

阅读量3.7k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/CommandBaby/article/details/20052127

版权

easyui 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用EasyUI框架在界面中动态生成Tag标签，包括步骤和关键代码示例，帮助开发者实现更加灵活的用户界面交互。

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

 <div data-options="region:'west',spilt:true" title="左边菜单" style="width: 280px; padding: 1px; overflow: hidden;">
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="菜单1" data-options="selected:true" style="padding: 10px; overflow: auto;">
                <a href="#" style="width: 250px" plain='true' οnclick="addTab('百度','http://www.baidu.com/')" class="easyui-linkbutton">百度</a>
                <a href="#" style="width: 250px" plain="true" οnclick="addTab('谷歌','http://www.google.com/')" class="easyui-linkbutton">谷歌</a>
            </div>
            <div title="菜单2" style="padding: 10px;">
                菜单2
            </div>
            <div title="菜单3" style="padding: 10px">   @* selected:true 默认展开菜单*@
                菜单3
            </div>
        </div>
    </div>

  <div data-options="region:'center'" title="主显示框" style="overflow: hidden;">  @*中间主菜单*@
        <div id="ttt" class="easyui-tabs" style="height: 550px; width: 950px;">
          
        </div>
    </div>

 function addTab(title, url) {
            if ($('#ttt').tabs("exists", title)) { //判断是否存在
                $('#ttt').tabs("select", title); //选中
            }
            else { //创建
                var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
                $('#ttt').tabs('add', {
                    title: title,
                    content: content,
                    closable: true,
                });
            }
        }