EasyUI 动态添加tabs

你只需调用add方法，就可以使用jquery easyui很容易动态添加tabs。在这个教程中，我们动态的添加显示一个页面使用iframe。当点击添加add按钮，新tab被添加。如果tab已经存在，被激活。

第一步：建立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://jquery-easyui.wikidot.com')">easyui</a>

</div>

<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">

    <div title="Home">

    </div>

</div>

HTML代码很简单，我们创建tabs用一个tab面板，名字为home。记住，我们不需要写任何js代码。
第二步：使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面板。