logo

EasyUI 动态添加tabs2012-07-08

你只需调用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面板。

相关话题

热门搜索

  • EasyUI
  • 动态添加tabs

扫描二维码分享话题