jQuery EasyUI レイアウトプラグイン -Tabs タブ

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.tabs.defaults を使用してデフォルトの defaults を書き換えます。

The tabs display a collection of panel. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including close button and other customized buttons.

依存関係

  • panel
  • linkbutton

使用方法

タブ（Tabs）の作成

1、マークアップによるタブ（Tabs）の作成

マークアップからタブ（Tabs）を作成する方が簡単で、JavaScript コードを書く必要はありません。<div> タグに 'easyui-tabs' クラスを追加することを忘れないでください。各タブパネル（tab panel）は子の <div> タグで作成され、その使い方はパネル（panel）と同じです。

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
    <div title="Tab1" style="padding:20px;display:none;">
        tab1
    </div>
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
        tab2
    </div>
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
        tab3
    </div>
</div>

2、プログラミングによるタブ（Tabs）の作成

ここではプログラミングでタブ（Tabs）を作成し、同時に 'onSelect' イベントを捕捉します。

$('#tt').tabs({
    border:false,
    onSelect:function(title){
        alert(title+' is selected');
    }
});

新しいタブパネル（tab panel）の追加

ミニツールを使用して新しいタブパネル（tab panel）を追加します。ミニツールアイコン（8x8）は閉じるボタンの前に配置されます。

// 添加一个新的标签页面板（tab panel）
$('#tt').tabs('add',{
    title:'New Tab',
    content:'Tab Body',
    closable:true,
    tools:[{
        iconCls:'icon-mini-refresh',
        handler:function(){
            alert('refresh');
        }
    }]
});

選択されたタブ（Tab）の取得

// 获取选中的标签页面板（tab panel）和它的标签页（tab）对象
var pp = $('#tt').tabs('getSelected');
var tab = pp.panel('options').tab; // 相应的标签页（tab）对象

プロパティ

名前 型 説明 デフォルト値
width number タブ（Tabs）コンテナの幅。 auto
height number タブ（Tabs）コンテナの高さ。 auto
plain boolean true に設定すると、背景コンテナ画像を使用してタブバーを表示しません。 false
fit boolean true に設定すると、タブ（Tabs）コンテナのサイズを親コンテナに合わせて設定します。 false
border boolean true に設定すると、タブ（Tabs）コンテナの枠線を表示します。 true
scrollIncrement number タブスクロールボタンを1回押すごとにスクロールするピクセル数。 100
scrollDuration number 各スクロールアニメーションの所要時間（ミリ秒）。 400
tools array,selector ヘッダーの左側または右側に配置するツールバー。設定可能な値：
1、ツールグループを指定する配列。各ツールオプションはリンクボタン（Linkbutton）と同じです。
2、ツールを含む <div> を指定するセレクタ。

コード例：
配列によるツールの定義。
$('#tt').tabs({
    tools:[{
        iconCls:'icon-add',
        handler:function(){
            alert('add')
        }
    },{
        iconCls:'icon-save',
        handler:function(){
            alert('save')
        }
    }]
});
既存の DOM コンテナによるツールの定義。
$('#tt').tabs({
    tools:'#tab-tools'
});
<div id="tab-tools">
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-add"></a>
    <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
</div>
null
toolPosition string ツールバーの位置。設定可能な値：'left'、'right'。このプロパティはバージョン 1.3.2 から使用できます。 right
tabPosition string タブ（tab）の位置。設定可能な値：'top'、'bottom'、'left'、'right'。このプロパティはバージョン 1.3.2 から使用できます。 top
headerWidth number タブ（tab）ヘッダーの幅。tabPosition が 'left' または 'right' に設定されている場合のみ有効です。このプロパティはバージョン 1.3.2 から使用できます。 150
tabWidth number タブバーの幅。このプロパティはバージョン 1.3.4 から使用できます。 auto
tabHeight number タブバーの高さ。このプロパティはバージョン 1.3.4 から使用できます。 27
selected number 初期選択されるタブのインデックス。このプロパティはバージョン 1.3.5 から使用できます。 0
showHeader boolean true に設定すると、タブ（tab）ヘッダーを表示します。このプロパティはバージョン 1.3.5 から使用できます。 true

イベント

名前 パラメータ 説明
onLoad panel ajax タブパネル（tab panel）がリモートデータの読み込みを完了したときに発生します。
onSelect title,index ユーザーがタブパネル（tab panel）を選択したときに発生します。
onUnselect title,index ユーザーがタブパネル（tab panel）を選択しなかったときに発生します。このイベントはバージョン 1.3.5 から使用できます。
onBeforeClose title,index タブパネル（tab panel）が閉じられる前に発生します。false を返すと閉じる動作をキャンセルします。次の例は、タブパネル（tab panel）を閉じる前に確認ダイアログを表示する方法を示しています。
$('#tt').tabs({
  onBeforeClose: function(title){
    return confirm('Are you sure you want to close ' + title);
  }
});
// using the async confirm dialog
$('#tt').tabs({
  onBeforeClose: function(title,index){
    var target = this;
    $.messager.confirm('Confirm','Are you sure you want to close '+title,function(r){
        if (r){
            var opts = $(target).tabs('options');
            var bc = opts.onBeforeClose;
            opts.onBeforeClose = function(){};  // allowed to close now
            $(target).tabs('close',index);
            opts.onBeforeClose = bc;  // restore the event function
        }
    });
    return false;    // prevent from closing
  }
});
onClose title,index ユーザーがタブパネル（tab panel）を閉じたときに発生します。
onAdd title,index 新しいタブパネル（tab panel）が追加されたときに発生します。
onUpdate title,index タブパネル（tab panel）が更新されたときに発生します。
onContextMenu e, title,index タブパネル（tab panel）が右クリックされたときに発生します。

メソッド

名前 パラメータ 説明
options none タブ（tabs）のオプション（options）を返します。
tabs none すべてのタブパネル（tab panel）を返します。
resize none タブ（tabs）コンテナのサイズを調整してレイアウトします。
add options 新しいタブパネル（tab panel）を追加します。options パラメータは構成オブジェクトです。詳細についてはタブパネル（tab panel）のプロパティを参照してください。
新しいタブパネル（tab panel）を追加すると、それが選択されます。
選択されていないタブパネル（tab panel）を追加する場合は、'selected' プロパティを false に設定してください。
// add a unselected tab panel
$('#tt').tabs('add',{
    title: 'new tab',
    selected: false
    //...
});
close which タブパネル（tab panel）を閉じます。'which' パラメータには、閉じるタブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。
getTab which 指定したタブパネル（tab panel）を取得します。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。
getTabIndex tab 指定したタブパネル（tab panel）のインデックスを取得します。
getSelected none 選択されているタブパネル（tab panel）を取得します。次の例は、選択されているタブパネル（tab panel）のインデックスを取得する方法を示しています。
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
alert(index);
select which タブパネル（tab panel）を選択します。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。
unselect which タブパネル（tab panel）を選択します。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。このメソッドはバージョン 1.3.5 から使用できます。
showHeader none タブ（tabs）ヘッダーを表示します。このメソッドはバージョン 1.3.5 から使用できます。
hideHeader none タブ（tabs）ヘッダーを非表示にします。このメソッドはバージョン 1.3.5 から使用できます。
exists which 指定したパネルが既に存在するかどうかを示します。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。
update param 指定したタブパネル（tab panel）を更新します。param パラメータには2つのプロパティが含まれます：
tab：更新されるタブパネル（tab panel）。
options：パネル（panel）のオプション（options）。

コード例：
// update the selected panel with new title and content
var tab = $('#tt').tabs('getSelected');  // get selected panel
$('#tt').tabs('update', {
    tab: tab,
    options: {
        title: 'New Title',
        href: 'get_content.php'  // the new content URL
    }
});

// call 'refresh' method for tab panel to update its content
var tab = $('#tt').tabs('getSelected');  // get selected panel
tab.panel('refresh', 'get_content.php');
enableTab which 指定したタブパネル（tab panel）を有効にします。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。このメソッドはバージョン 1.3 から使用できます。

コード例：
$('#tt').tabs('enableTab', 1);    // enable the second tab panel
$('#tt').tabs('enableTab', 'Tab2');    enable the tab panel that has 'Tab2' title
disableTab which 指定したタブパネル（tab panel）を無効にします。'which' パラメータには、タブパネル（tab panel）のタイトル（title）またはインデックス（index）を指定できます。このメソッドはバージョン 1.3 から使用できます。

コード例：
$('#tt').tabs('disableTab', 1);    // disable the second tab panel.
scrollBy deltaX 指定したピクセル数だけタブ（tab）ヘッダーをスクロールします。負の値は右へ、正の値は左へスクロールします。このメソッドはバージョン 1.3.2 から使用できます。

コード例：
// scroll the tab header to left
$('#tt').tabs('scroll', 10);

タブパネル（Tab Panel）

タブパネル（tab panel）のプロパティはパネル（panel）コンポーネントに定義されています。以下はよく使われるプロパティです。

名前 型 説明 デフォルト値
id string タブパネル（tab panel）の id プロパティ。 null
title string タブパネル（tab panel）のタイトル文字。
content string タブパネル（tab panel）のコンテンツ。
href string リモートコンテンツを読み込んでタブパネル（tab panel）を埋める URL。 null
cache boolean true に設定すると、有効な href 属性が設定されている場合にこのタブパネル（tab panel）をキャッシュします。 true
iconCls string タブパネルのタイトルに表示されるアイコンのCSSクラス。 null
width number タブパネルの幅。 auto
height number タブパネルの高さ。 auto
collapsible boolean trueに設定すると、タブパネルを折りたたみ可能にします。 false

いくつかの追加プロパティ。

名前 タイプ 説明 デフォルト値
closable boolean trueに設定すると、タブパネルに閉じるボタンが表示され、クリックするとこのタブパネルを閉じることができます。 false
selected boolean trueに設定すると、タブパネルが選択されます。 false
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張