1ページあたり1つ以上の小さな広告を表示しないことを約束します。ご心配なく、このメッセージを非表示にすると、二度と催促されることはありません。
タイプ
タブ
基本的なタブ
状態
アクティブ
タブはアクティブ化され、ページ上に表示できます
ローディング
タブはローディングインジケーターを表示できます
基本的な例
基本タブ
タブは、data-tab属性で指定されたパスを使用して接続されています。タブは、アクティブ化要素でJavaScriptで初期化されます。
最初
2番目
3番目
$('.menu .item') .tab() ;
複数のタブグループ
同じページに、履歴付きでも、独立したタブグループを複数含める方法はいくつかあります。最も簡単な方法の1つは、各タブグループに特定の親コンテキストを提供することです。
$('#context1 .menu .item') .tab({ context: $('#context1') }) ; $('#context2 .menu .item') .tab({ // 上記と同じように機能する特別なキーワード context: 'parent' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
4
5
6
1A
1B
1C
2A
2B
2C
3A
3B
3C
4
5
6
デフォルトパス
タブを開いた後、first/のようなパスを指定すると、すべての子パスを検索し、最初のパスを開きます。この例では、パスがfirst/であっても、first/aに対応するタブは、デフォルトの子タブであるため、自動的に開かれます。これは、追加の子タブグループの数だけ再帰的に機能します。
$('.paths.example .menu .item') .tab({ context: '.paths.example' }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
リモートの例
リモートコンテンツの取得
auto: trueを使用すると、ページ内リクエストを指定するための追加ヘッダーを使用して、サーバーからタブのパスがロードされます。cache: trueが設定されている場合、タブを再度開くと、サーバーリクエストなしでキャッシュからロードされます。
$('.dynamic.example .menu .item') .tab({ cache: false, // APIリクエストを偽装 apiSettings: { loadingDuration : 300, mockResponse : function(settings) { var response = { first : 'AJAXタブ1', second : 'AJAXタブ2', third : 'AJAXタブ3' }; return response[settings.urlData.tab]; } }, context : 'parent', auto : true, path : '/' }) ;
AJAXタブ1
HTML内のスクリプトの評価
デフォルトでは、HTMLに含まれるscriptタグは最初のロードでのみ評価されます。この動作を変更するには、evaluateScripts設定を調整できます。
$('.eval.example .menu .item') .tab({ evaluateScripts : 'once', context : 'parent', auto : true, path : '/' }) ;
AJAXタブ1
履歴の例
ハッシュ履歴の使用
静的サイト、または単純な履歴のみを必要とするサイトでは、ページ内リンクを使用して、異なるローカルタブ状態をトリガーできます
$('.history.example .menu .item') .tab({ context : '.history.example', history : true }) ;
1A
1B
1C
2A
2B
2C
3A
3B
3C
HTML5の状態の使用
サーバー上で変更を複製できるサイトでは、タブはタブナビゲーションの変更をhtml5 stateに自動的にマッピングできます。
$('.ui.menu .item') .tab({ history : true, historyType : 'state', // 他のすべてのパス変更のベースURL path : '/my/base/url' }) ;
タブの初期化
...メニュー付き
タブは通常、タブをアクティブにする要素と組み合わせて使用されます。タブは、タブではなくアクティブ化するアイテムで初期化されます。
タブはメタデータ属性data-tabを使用してアクティベータに接続されます。これは、アクティブ化要素とタブ自体の両方に追加する必要があります。
$('.tabular.menu .item').tab();
...メニューなし
ページ上のタブ要素をアクティブにするメニューがない場合は、$.tab()を使用してタブをグローバルに初期化し、$.tab('change tab', path);を使用してプログラムでアクティブ化できます。
$('.ui.button') .on('click', function() { // プログラムでタブをアクティブ化 $.tab('change tab', 'tab-name'); }) ;
状態の管理
...ハッシュタグ付き
ハッシュタグは、ページ内リンクとonhashstatechangeを使用して、各タブの履歴イベントを作成します。これは、サーバーでそれらのURLをルーティングする必要がないため、より高度なプッシュ状態よりも簡単に使用できる場合があります。すべてのページ内リンクは、同じURLにルーティングされます。
$('.ui.menu .item') .tab({ history: true, historyType: 'hash' }) ;
...HTML5ステートを使用する場合
タブは、#/fooリンクを使用せずにページのステートを管理するために、HTML5プッシュステートを使用できます。ユーザーがプッシュステートを使用してページをリロードすると、サーバーに新しいURLが照会されます。これは、各リンクに対応するためにバックエンドで適切なルートを設定する必要があることを意味します。
$('.ui.menu .item') .tab({ history: true, historyType: 'state', path: '/modules/tab.html' }) ;
パスの設定
historyType: stateを使用するには、内部状態を持たないベースURLを指定する必要があります。HTML5ステートを持つすべてのタブが通常のページURLとして表示され、それに応じてルーティングされるため、これはwindow.locationに自動的に設定することはできません。
HTML5ステートは、各タブのパスがサーバー上で適切なコンテンツに正しくルーティングする必要があるため、動的なサイトのバックエンドでのみ機能します。
$('.ui.menu .item') .tab({ history: true, historyType: 'state' path: '/modules/tab.html' }) ;
AJAXコンテンツ
...自動ルーティングを使用する場合
設定auto: trueを指定すると、ブラウザで設定されたURLと一致するリモートURLからコンテンツが自動的に取得されます。
たとえば、inboxタブはURLbase-url/inbox/からコンテンツを取得します。
URLは追加のHTTPヘッダー'X-Remote': trueを受け取ります。これを使用して、サーバーのバックエンドで、リクエストがタブからのAJAXリクエストであるか、完全なページリクエストであるかを判断できます。
'X-Remote': trueを持つクエリは、タブ付きコンテンツのみを更新する必要があります。一方、それを持たないクエリは通常のリソースであり、ページ全体のコンテンツを更新する必要があります。
これは、pJaxやRailsのturbolinksと同様の技術を使用しています。
$('.dynamic.example .menu .item') .tab({ context : '.dynamic.example', auto : true, path : '/modules/tab.html' }) ;
...API動作を使用する場合
タブは、タブがクエリできるテンプレート化されたAPIエンドポイントを指定できるAPIとのオプションの結合を提供します。
タブは、RESTful APIリンクに置き換えることができるURL変数{$tab}を自動的に渡します。
セマンティックに組み込まれたAPI動作の詳細については、APIドキュメントを確認してください。
APIドキュメントを見る動作
以下のすべての動作は、構文$('.foo').tab('動作名', 引数1, 引数2)を使用して呼び出すことができます。| attach events(セレクター, イベント) | 指定されたセレクターにタブアクションをアタッチします。指定されていない場合のデフォルトイベントはトグルです。 |
| change tab(パス) | タブをパスに変更します。 |
| set state(パス) | 現在のパスをステートに設定します。 |
| get path | 現在のパスを返します。 |
| is tab | タブが存在するかどうかを返します。 |
| cache read(パス) | パスに対してキャッシュされたHTMLを返します。 |
| cache add(パス, html) | パスに対してキャッシュされたHTMLを設定します。 |
| cache remove(パス) | パスに対してキャッシュされたHTMLを削除します。 |
タブの設定フォームの設定は、タブの動作を変更します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| auto | false | タブが履歴と同じURLでリモートコンテンツを読み込むかどうか。 |
| deactivate | 'siblings' | siblingsに設定すると、アクティブ化された要素と同じDOM兄弟である要素のみを非アクティブ化します。allに設定すると、コンポーネントは同時に初期化された他のすべての要素を非アクティブ化します。 |
| history | false | タブの変更の履歴イベントを記録するかどうか。 |
| ignoreFirstLoad | false | 最初のタブの読み込み時にリモートでコンテンツを読み込まない。開いているタブがサーバー上でレンダリングされる場合に便利です。 |
| evaluateScripts | once | タブHTML内のインラインスクリプトをタブの読み込み時に解析する必要があるかどうか。デフォルトはonceで、最初の読み込み時のみ解析します。インラインスクリプトを常に解析するか、解析しないようにtrueまたはfalseを設定することもできます。 |
| alwaysRefresh | false | タブを開くたびにコンテンツをリロードする必要があるかどうか。 |
| deactivate 2.2 |
siblings | siblingsまたはallのいずれかに設定できます。siblingsは、タブが選択されたときに、クリックされた要素のsiblingsであるタブアクティベーターのみを非アクティブ化します。allは、同時に初期化された他のすべてのタブアクティベーターを非アクティブ化します。 |
| cacheType 2.2 |
response | response、DOM、またはhtmlのいずれかに設定できます。DOMを使用すると、DOMツリーのクローンがキャッシュされ、レンダリング時に存在したすべてのイベントが保持されます。responseは、読み込み時の元のレスポンスをキャッシュします。これにより、コールバックは常に同じコンテンツを受け取ります。htmlを使用すると、すべてのコールバック後の結果のhtmlをキャッシュし、コンテンツへの変更がすべて保持されるようにします。 |
| cache | true | 2回目の読み込み時にサーバーへのトリップを避けるために、タブがローカルに読み込んだ後にコンテンツをキャッシュする必要があるかどうか。 |
| apiSettings | false | $.api呼び出しの設定オブジェクト。 |
| historyType | hash | hashまたはstateに設定できます。hashは、ページ内リンクを使用して履歴イベントを作成します。stateは、DOM履歴を使用し、リロード時にサーバーからページを読み込みます。 |
| path | false | historyType stateを使用する場合は、すべての内部リンクのベースURLを指定する必要があります。 |
| context | false | タブはこのコンテキスト内にあるものに限定されます。 |
| childrenOnly | false | 有効にすると、タブは渡されたコンテキストの子に制限されます。 |
| maxDepth | 25 | 許可されるネストされたタブの最大数（再帰を回避します）。 |
コールバック
コールバックは、特定の動作の後に発生する関数を指定します。
| パラメータ | コンテキスト | 説明 | |
|---|---|---|---|
| onFirstLoad | tabPath, parameterArray, historyEvent | タブ | タブが最初にロードされたときにのみコールバックします。 |
| onLoad | tabPath, parameterArray, historyEvent | タブ | タブがロードされるたびにコールバックします。 |
| onRequest | tabPath | タブ | タブがリモートコンテンツの読み込みを開始したときに呼び出されます。 |
| onVisible | tabPath | タブ | タブが表示された後に呼び出されます。 |
DOMの設定DOM設定は、このモジュールがDOMとどのようにインターフェースするかを指定します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| namespace | tab | イベント名前空間。モジュールの破棄が要素にアタッチされた他のイベントに影響を与えないようにします。 |
| templates |
templates : { // ページタイトルを返す determineTitle: function(tabArray) {} }
|
コンテンツを返すために使用される関数。 |
| selector |
selector : { tabs : '.ui.tab', parent : '.ui:not(.menu)' }
|
モジュールで使用されるセレクター。 |
| metadata |
metadata : { tab : 'tab', loaded : 'loaded', promise: 'promise' }
|
モジュールで使用されるDOMメタデータ。 |
| className |
className : { loading : 'loading', active : 'active' }
|
状態にスタイルを適用するために使用されるクラス名。 |
デバッグの設定デバッグ設定は、コンソールへのデバッグ出力を制御します。
| 設定 | デフォルト | 説明 |
|---|---|---|
| name | タブ | デバッグログで使用される名前。 |
| silent | False | 他のデバッグ設定に関係なく、エラーメッセージを含むすべてのコンソール出力を抑制します。 |
| debug | False | 標準のデバッグ出力をコンソールに提供します。 |
| performance | True | 標準のデバッグ出力をコンソールに提供します。 |
| verbose | True | 補助的なデバッグ出力をコンソールに提供します。 |
| errors |
error: { api : 'APIモジュールなしでコンテンツをロードしようとしました', method : '呼び出されたメソッドは定義されていません', missingTab : 'このコンテキストのアクティブ化されたタブが見つかりません', noContent : '指定したタブにはコンテンツURLがありません', path : '履歴が有効ですが、パスが指定されていません', recursion : '最大再帰深度に達しました', state : '状態ライブラリが初期化されていません' }
|
|