jQuery EasyUI レイアウト -タブ（Tabs）の動的追加

jQuery EasyUI を使用すると、Tabs を簡単に追加できます。'add' メソッドを呼び出すだけで済みます。

このチュートリアルでは、iframe を使用して、1つのページに表示する Tabs を動的に追加します。追加ボタンをクリックすると、新しいタブが追加されます。タブがすでに存在する場合は、そのタブがアクティブになります。

ステップ 1：Tabs を作成する

    <div style="margin-bottom:10px">
        <a href="../index.html" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
        <a href="../index.html" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
        <a href="../index.html" 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>

この HTML コードは非常にシンプルで、'Home' という名前のタブパネルを持つ Tabs を作成します。JS コードを一切書く必要がないことに注意してください。

ステップ 2：'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' メソッドを使用してタブがすでに存在するかどうかを判断し、存在する場合はタブをアクティブにします。存在しない場合は、'add' メソッドを呼び出して新しいタブパネルを追加します。

jQuery EasyUI サンプルをダウンロード

jeasyui-layout-tabs2.zip