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

关注

原创最新推荐文章于 2026-04-04 09:18:22 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

jquery easyui TagBox with Autocomplete ajax请求方式自动填充立即下载

 <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' onclick="addTab('百度','http://www.baidu.com/')" class="easyui-linkbutton">百度</a>
                <a href="#" style="width: 250px" plain="true" onclick="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,
                });
            }
        }