サイトフロントエンド_EasyUI.基本入門.006.jQuery EasyUI Tabsコンポーネントを連れて行きますか?


簡単な説明:
説明:($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
説明:ラベル・ページのヘッダーをスクロールするピクセル数を指定し、負の値を右、正の値を左に表示します.
    
    
Tab_2
    
Tab_3

パネルのプロパティ(追加):
closable -> boolean
説明:trueと表示されると、ラベルページに閉じるボタンが表示され、クリックするとこのパネルを閉じることができます.
selected -> boolean
説明:trueに設定と、タブページが選択されます.