jQuery EasyUI レイアウト -タブ（Tabs）の作成

このチュートリアルでは、easyui を使って Tabs コンポーネントを作成する方法を説明します。Tabs には、動的に追加または削除できる複数のパネル（panel）があります。Tabs を使用すると、同じページ上に異なるエンティティを表示できます。

Tabs は一度に1つのパネル（panel）だけを表示します。各パネル（panel）には、タイトル、アイコン、および閉じるボタンがあります。Tabs が選択されると、対応するパネル（panel）のコンテンツが表示されます。

HTML マークアップから、1つの DIV コンテナといくつかの DIV パネル（panel）を含む Tabs を作成します。

    <div class="easyui-tabs" style="width:400px;height:100px;">
        <div title="First Tab" style="padding:10px;">
            First Tab
        </div>
        <div title="Second Tab" closable="true" style="padding:10px;">
            Second Tab
        </div>
        <div title="Third Tab" iconCls="icon-reload" closable="true" style="padding:10px;">
            Third Tab
        </div>
    </div>

3つのパネル（panel）を持つ Tabs コンポーネントを作成します。2番目と3番目のパネル（panel）は、閉じるボタンをクリックして閉じることができます。

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

jeasyui-layout-tabs1.zip