サイトフロントエンド_EasyUI.基本入門.006.jQuery EasyUI Tabsコンポーネントを連れて行きますか?
簡単な説明:
説明:($fn.tabs)タブは、panelとlinkbuttonコンポーネントに依存するパネルセットとしてよく表示されますが、一度に1つしか表示できません.各Tabパネルには、閉じるボタンとカスタムボタンを含むヘッダタイトルとツールボタンがあります.
基本的な使い方:
コンテナのプロパティ:
width -> number
説明:ラベルページTabコンテナの幅
height -> number
説明:ラベルページTab容器の高さ
plain -> boolean
説明:タブページTabの背景を表示しないかどうか
fit -> boolean
説明:ラベルページTabの容器サイズが親容器に適応するかどうか.
border -> boolean
説明:タブページTabコンテナの枠線を表示するかどうか
scrollIncrement -> number
説明:ラベルページTabのすべての幅が容器の幅を超えている場合、両端にスクロールボタンが現れ、Tabを押すたびにスクロールボタンを設定でき、スクロールする画素数、デフォルト100
scrollDuration -> number
説明:ラベルページTabのすべての幅がコンテナの幅を超えている場合、両端にスクロールボタンが表示され、各スクロールアニメーションが持続するミリ秒数を設定できます.デフォルトは100です.
tools -> array/selector
説明:ヘッダーの左側または右側のツールバーに配置します.配列の場合、配列要素にはiconClsとhandlerプロパティが必要です.セレクタの場合、既存のDOMコンテナ定義ツールを使用できます.
toolPosition -> string
説明:ツールバーの位置、leftとrightをサポートし、デフォルトはright
tabPosition -> string
説明:ラベルページTabの場所、leftとrightとtopとbottomをサポートし、デフォルトはtop
headerWidth -> number
説明:タブページTabのヘッダー幅は、tabPositionがleftまたはrightに設定されている場合にのみ有効です.
tabWidth -> number
説明:タブページTabヘッド幅はtabPositionがtopまたはbottomに設定されている場合のみ有効で、容器幅を超えて両端にスクロールボタンが表示されます
tabHeight -> number
説明:タブページTabの頭の高さはtabPositionがtopまたはbottomに設定されている場合にのみ有効です
selected -> number
説明:デフォルトで指定されたラベルページTabが選択され、インデックスは0から開始されます.
showHeader -> boolean
説明:タブページTabヘッダを表示するかどうか
コンテナイベント:
onLoad -> function(panel)
説明:Ajaxタグページパネルパネルがリモートデータのロードを完了するとトリガーされます
onSelect -> function(title,index)
説明:ユーザーがタブパネルパネルを選択するとトリガーされます
onUnselect -> function(title,index)
説明:ユーザーがタブパネルパネルを選択していない場合にトリガーされます.
onBeforeClose -> function(title,index)
説明:1つのタブパネルパネルが閉じられた時にトリガーされ、falseに戻って閉じる動作をキャンセルする
onClose -> function(title,index)
説明:ユーザーがタブパネルパネルパネルを閉じるとトリガーされます
onAdd -> function(title,index)
説明:新しいタブパネルパネルが追加されるとトリガーされます
onUpdate -> function(title,index)
説明:ラベルページパネルパネルが更新されるとトリガーされます
onContextMenu(e,title,index)
説明:一つのタブパネルパネルが右クリックされた時にトリガーされる
コンテナインタフェース:
options -> object
説明:ラベル・ページ・コンテナ・オプションに戻る
tabs -> array
説明:すべてのタブページを返します.
resize -> object
説明:ラベルページコンテナのサイズを調整し、レイアウトします.
add -> object
説明:新しいラベルページを追加するには、options構成オブジェクトパラメータを渡す必要があります.具体的には、ラベルページのプロパティを参照します.新しいラベルページを追加すると、デフォルトで選択されます.選択したくない場合は、構成オブジェクトにselected:falseを追加します.
close -> object
説明:ラベルページボードを閉じます.渡すwhichパラメータは、閉じるラベルページボードのタイトルtitleまたはインデックスindexです.
getTab -> object
説明:指定したラベルページボードを取得します.渡すwhichパラメータは、ラベルページボードのタイトルtitleまたはインデックスindexです.
getTabIndex -> object
説明:指定したラベル・ページ・ボードのインデックスを取得します.
getSelected -> object
説明:選択したタブページを取得
select -> object
説明:ラベルページボードを選択します.渡すパラメータwhichは、ラベルページボードのタイトルtitleまたはインデックスindexです.
unselect -> object
説明:ラベル・ページ・ボードの選択を解除します.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
showHeader -> object
説明:ラベル・ページ・ヘッダーの表示
hideHeader -> object
説明:ラベル・ページ・ヘッダーの非表示
exists -> object
説明:パネルが存在するかどうかを指定します.渡すパラメータwhichは、ラベルページボードのタイトルtitleまたはインデックスindexです.
update -> object
説明:指定したラベル・ページ・ボードを更新するには、渡すparamに2つのパラメータtab(ラベル・ページ・ボード)とoptions(パネルの構成オブジェクト)を含める必要があります.
enableTab -> object
説明:指定したラベル・ページ・ボードを有効にします.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
disableTab -> object
説明:指定したラベル・ページ・ボードを無効にします.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
scrollBy -> object
説明:ラベル・ページのヘッダーをスクロールするピクセル数を指定し、負の値を右、正の値を左に表示します.
パネルのプロパティ(追加):
closable -> boolean
説明:trueと表示されると、ラベルページに閉じるボタンが表示され、クリックするとこのパネルを閉じることができます.
selected -> boolean
説明:trueに設定と、タブページが選択されます.
説明:($fn.tabs)タブは、panelとlinkbuttonコンポーネントに依存するパネルセットとしてよく表示されますが、一度に1つしか表示できません.各Tabパネルには、閉じるボタンとカスタムボタンを含むヘッダタイトルとツールボタンがあります.
基本的な使い方:
Tab_1
Tab_2
Tab_3
コンテナのプロパティ:
width -> number
説明:ラベルページTabコンテナの幅
height -> number
説明:ラベルページTab容器の高さ
plain -> boolean
説明:タブページTabの背景を表示しないかどうか
fit -> boolean
説明:ラベルページTabの容器サイズが親容器に適応するかどうか.
border -> boolean
説明:タブページTabコンテナの枠線を表示するかどうか
scrollIncrement -> number
説明:ラベルページTabのすべての幅が容器の幅を超えている場合、両端にスクロールボタンが現れ、Tabを押すたびにスクロールボタンを設定でき、スクロールする画素数、デフォルト100
scrollDuration -> number
説明:ラベルページTabのすべての幅がコンテナの幅を超えている場合、両端にスクロールボタンが表示され、各スクロールアニメーションが持続するミリ秒数を設定できます.デフォルトは100です.
tools -> array/selector
説明:ヘッダーの左側または右側のツールバーに配置します.配列の場合、配列要素にはiconClsとhandlerプロパティが必要です.セレクタの場合、既存のDOMコンテナ定義ツールを使用できます.
toolPosition -> string
説明:ツールバーの位置、leftとrightをサポートし、デフォルトはright
tabPosition -> string
説明:ラベルページTabの場所、leftとrightとtopとbottomをサポートし、デフォルトはtop
Tab_1
Tab_2
Tab_3
headerWidth -> number
説明:タブページTabのヘッダー幅は、tabPositionがleftまたはrightに設定されている場合にのみ有効です.
tabWidth -> number
説明:タブページTabヘッド幅はtabPositionがtopまたはbottomに設定されている場合のみ有効で、容器幅を超えて両端にスクロールボタンが表示されます
tabHeight -> number
説明:タブページTabの頭の高さはtabPositionがtopまたはbottomに設定されている場合にのみ有効です
selected -> number
説明:デフォルトで指定されたラベルページTabが選択され、インデックスは0から開始されます.
showHeader -> boolean
説明:タブページTabヘッダを表示するかどうか
コンテナイベント:
onLoad -> function(panel)
説明:Ajaxタグページパネルパネルがリモートデータのロードを完了するとトリガーされます
onSelect -> function(title,index)
説明:ユーザーがタブパネルパネルを選択するとトリガーされます
onUnselect -> function(title,index)
説明:ユーザーがタブパネルパネルを選択していない場合にトリガーされます.
onBeforeClose -> function(title,index)
説明:1つのタブパネルパネルが閉じられた時にトリガーされ、falseに戻って閉じる動作をキャンセルする
Tab_2
Tab_3
var options = {
onLoad:function(panel){
console.log(panel.html());
},
onSelect:function(title,index){
console.log('notice: ['+title+'], ['+index+'] !');
},
onUnselect:function(title,index){
console.log('notice: ['+title+'], ['+index+'] !');
},
onBeforeClose:function(title,index){
var target = this;
$.messager.confirm(' ', ' '+title+'?', function(res){
if(res){
// onBeforeClose ,
var options = $(target).tabs('options');
var oldOnBeforeClose = options.onBeforeClose;
options.onBeforeClose=function(){return true};
$(target).tabs('close', title);
options.onBeforeClose = oldOnBeforeClose;
};
});
// Tab
return false;
}
};
$('#t').tabs(options);
onClose -> function(title,index)
説明:ユーザーがタブパネルパネルパネルを閉じるとトリガーされます
onAdd -> function(title,index)
説明:新しいタブパネルパネルが追加されるとトリガーされます
onUpdate -> function(title,index)
説明:ラベルページパネルパネルが更新されるとトリガーされます
onContextMenu(e,title,index)
説明:一つのタブパネルパネルが右クリックされた時にトリガーされる
Tab_2
Tab_3
var options = {
onClose:function(title,index){
console.log('notice: '+title+' '+index+' ');
},
onAdd:function(title,index){
console.log('notice: '+title+' '+index+' ');
},
onUpdate:function(title,index){
console.log('notice: '+title+' '+index+' ');
},
onContextMenu:function(e,title,index){
console.log('notice: '+title+' '+index+' ');
}
};
$('#t').tabs(options);
コンテナインタフェース:
options -> object
説明:ラベル・ページ・コンテナ・オプションに戻る
tabs -> array
説明:すべてのタブページを返します.
resize -> object
説明:ラベルページコンテナのサイズを調整し、レイアウトします.
add -> object
説明:新しいラベルページを追加するには、options構成オブジェクトパラメータを渡す必要があります.具体的には、ラベルページのプロパティを参照します.新しいラベルページを追加すると、デフォルトで選択されます.選択したくない場合は、構成オブジェクトにselected:falseを追加します.
close -> object
説明:ラベルページボードを閉じます.渡すwhichパラメータは、閉じるラベルページボードのタイトルtitleまたはインデックスindexです.
getTab -> object
説明:指定したラベルページボードを取得します.渡すwhichパラメータは、ラベルページボードのタイトルtitleまたはインデックスindexです.
getTabIndex -> object
説明:指定したラベル・ページ・ボードのインデックスを取得します.
getSelected -> object
説明:選択したタブページを取得
select -> object
説明:ラベルページボードを選択します.渡すパラメータwhichは、ラベルページボードのタイトルtitleまたはインデックスindexです.
unselect -> object
説明:ラベル・ページ・ボードの選択を解除します.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
showHeader -> object
説明:ラベル・ページ・ヘッダーの表示
hideHeader -> object
説明:ラベル・ページ・ヘッダーの非表示
exists -> object
説明:パネルが存在するかどうかを指定します.渡すパラメータwhichは、ラベルページボードのタイトルtitleまたはインデックスindexです.
update -> object
説明:指定したラベル・ページ・ボードを更新するには、渡すparamに2つのパラメータtab(ラベル・ページ・ボード)とoptions(パネルの構成オブジェクト)を含める必要があります.
enableTab -> object
説明:指定したラベル・ページ・ボードを有効にします.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
disableTab -> object
説明:指定したラベル・ページ・ボードを無効にします.渡すパラメータwhichは、ラベル・ページ・ボードのタイトルtitleまたはインデックスindexです.
scrollBy -> object
説明:ラベル・ページのヘッダーをスクロールするピクセル数を指定し、負の値を右、正の値を左に表示します.
の
TABS
サイズの
ラベル・ページの
のタブページを じる
のタブページを
したタブ・ページの の
のタブを
したタブの を
タブヘッダーの を り え
したタブの をリフレッシュ
したタブの を
したラベル・ページの
したラベルの
すべてのタブを に
Tab_2
Tab_3
パネルのプロパティ(追加):
closable -> boolean
説明:trueと表示されると、ラベルページに閉じるボタンが表示され、クリックするとこのパネルを閉じることができます.
selected -> boolean
説明:trueに設定と、タブページが選択されます.