jQueryのUIの例 - タブ（タブ）

マルチパネルの単一のコンテンツエリア、リストのタイトル内の各パネル。

タブのコンポーネントの詳細については、APIドキュメントを参照してくださいタブ部材（ウィジェットタブを）。

デフォルトの機能

切り替えるにはタブをクリックし、コンテンツの異なる論理部分に分割されています。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - デフォルトの機能</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <P> Mauris eleifend東側らturpis。Duis ID ERAT。Suspendisse potenti。Aliquam vulputate、pedeのヴェルのvehiculaのaccumsan、マイルneque rutrum ERAT、EU congue orci Loremのeget Loremの。前庭非アンティ。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたり。Fusce sodales。Quisque EU urnaのVEL enimのcommodoのpellentesque。Praesent EU笑いhendreritの小舌のテンパスのpretium。Curabitur Loremのenimは、pretium NEC、feugiatのNECは、luctus、ラクスます。</ p>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

折りたたみコンテンツ

コンテンツがオープン/クローズさ切り替えるために選択したタブをクリックします。この機能を有効にするには、設定する必要がcollapsible trueにオプションを選択します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - 折りたたみコンテンツ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（{
      折り畳み式：真
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <P> <strong>のコンテンツパネルを閉じるにはもう一度タブをクリックします。 </ STRONG> </ P>
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <P> <strong>のコンテンツパネルを閉じるにはもう一度タブをクリックします。 </ STRONG> </ P>
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。Pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <P> <strong>のコンテンツパネルを閉じるにはもう一度タブをクリックします。 </ STRONG> </ P>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

Ajaxを介してコンテンツを取得します。

Ajaxを介して、外部コンテンツへのアクセスにタブにタブのhrefリンクの値を設定します。 Ajaxリクエストはに、応答のタブを待っているときに「読み込み中...」、負荷が全般]タブへの完全復帰のとき。

タグ3と4は、このような状況で、サーバー側のエラーを処理する方法をAJAXタグに遅いロードとダメージを実証し、。両方がWebサーバがPHPを説明することができる必要があることに注意してください。彼らは、ファイルシステムの外に動作しません。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） -  Ajaxを介してコンテンツを取得</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（{
      beforeLoad：機能（イベント、UI）{
        ui.jqXHR.error（関数（）{
          ui.panel.html（
            "タブをロードできません。これがデモされていない場合。" +
            「我々は、できるだけ早く問題を修正します。 "）;
        }）;
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">プリロードする</a>ます。</ li>
    <李> <a href="ajax/content1.html">タグ1 </a>の</李>
    <李> <a href="ajax/content2.html">タグ2 </a>の</李>
    <李> <a href="ajax/content3-slow.php">タグ3（遅い）する</a>ます。</ li>
    <李> <a href="ajax/content4-broken.php">ラベル4（損傷した）する</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

ときにマウスホバーを開きます

よるeventマウスがオン/オフ状態に置いたときの部品を切り替えるオプション。デフォルト値は「クリック」イベントです。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - マウスは、オープン</タイトル>の上に置いたとき
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（{
      イベント：「マウスオーバー」
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。Pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <P> Mauris eleifend東側らturpis。Duis ID ERAT。Suspendisse potenti。Aliquam vulputate、pedeのヴェルのvehiculaのaccumsan、マイルneque rutrum ERAT、EU congue orci Loremのeget Loremの。前庭非アンティ。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたり。Fusce sodales。Quisque EU urnaのVEL enimのcommodoのpellentesque。Praesent EU笑いhendreritの小舌のテンパスのpretium。Curabitur Loremのenimは、pretium NEC、feugiatのNECは、luctus、ラクスます。</ p>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

シンプルな操作

単純にタブを追加し、削除します。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - 簡単な操作</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スタイル>
  #dialogラベル、#dialog入力{表示：ブロック;}
  #dialogラベル{マージントップ：0.5em;}
  #dialog入力、#dialogのtextarea {幅：95％;}
  #tabs {マージントップ：1EM;}
  李.ui-アイコン-近い#tabsは{フロート：左;マージン：0.4em 0.2em 0 0;カーソル：ポインタ;}
  #add_tab {カーソル：ポインタ;}
  </スタイル>
  <スクリプト>
  $（関数（）{
    VAR tabTitle = $（ "#tab_title"）、
      tabContent = $（ "#tab_content"）、
      tabTemplate = "<LI> <a href='#{href}'>＃{ラベル} </a>の<スパンクラス= 'UI-アイコンUI-アイコン-近くの役割='プレゼンテーション '>タブを削除する</スパン> </ LI> "、
      tabCounter = 2。
 
    VARタブ=の$（ "#tabs」）.tabs（）;
 
    //モーダルダイアログボックスを初期化します：{（ボタンと内部リセットフォーム "近い"コールバックするvarダイアログ= $（ "#dialog」）.dialogをカスタマイズします
      AutoOpenプロパティ：偽、
      モーダル：trueの場合、
      ボタン：{
        追加：関数（）{
          addTab（）。
          $（この）.dialog（ "クローズ"）;
        }、
        キャンセル：関数（）{
          $（この）.dialog（ "クローズ"）;
        }
      }、
      クローズ：関数（）{
        （）[0] .resetを形成します。
      }
    }）;
 
    // AddTabフォーム：addTab機能を提出し、ダイアログ変数の形= dialog.find（ "フォーム"）.submit（関数（イベントを閉じるときに呼び出されます）{
      addTab（）。
      dialog.dialog（ "クローズ"）;
      event.preventDefault（）;
    }）;
 
    //実際のaddTab機能：{）（新しいタブ入力機能addTabを追加するには、上記のフォームを使用します
      varの各ラベル= tabTitle.val + tabCounter（）||「タブ」、
        ID = "tabs-" + tabCounter、
        李= $（tabTemplate.replace（/＃\ {hrefの\} / gで、「＃」+ ID）.replace（/＃\ {ラベル\} / gで、ラベル））、
        tabContentHtml = tabContent.val（）|| "タブ" + tabCounter + "コンテンツ。";
 
      tabs.find（「.ui-タブ-NAV」）.append（李）。
      tabs.append（ "の<divのid = '" + ID + "'> <P>" + tabContentHtml + "</ P> </ DIV>"）;
      tabs.tabs（「リフレッシュ」）。
      tabCounter ++;
    }
 
    // AddTabボタン：[開く]ダイアログボックスの$（ "#add_tab"）の値
      .button（）
      .click（関数（）{
        dialog.dialog（「オープン」）。
      }）;
 
    //閉じるアイコン：{（「span.ui-アイコンクローズ」タブtabs.delegateを削除クリックすると、「クリック」、関数（）
      VAR PANELID = $（この）.closest（「LI」）.remove（）のattr（「ARIA-コントロール "）;
      $（ "＃" + PANELID）.remove（）;
      tabs.tabs（「リフレッシュ」）。
    }）;
 
    tabs.bind（ "からkeyup」、関数（イベント）{
      場合（event.altKey && event.keyCode === $ .ui.keyCode.BACKSPACE）{
        。ヴァールPANELID = tabs.find（「.ui-タブ-アクティブ」）.remove（）のattr（「ARIA-コントロール "）;
        $（ "＃" + PANELID）.remove（）;
        tabs.tabs（「リフレッシュ」）。
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "ダイアログの" title = "タブデータ」>
  <フォーム>
    <フィールドセットクラス= "UIヘルパー・リセット」>
      <= "TAB_TITLE"のラベル>タイトル</ label>は
      <input type = "text" NAME = "TAB_TITLE" ID = "TAB_TITLE"値= ""クラス= "UIウィジェットコンテンツUI-コーナー-すべて">
      コンテンツ</ label>は、<= "tab_content"のラベル>
      <テキストエリア名= "tab_content" ID = "tab_content"クラス= "UIウィジェットコンテンツUI-コーナー-すべて"> </ TEXTAREA>
    </フィールドセット>
  </フォーム>
</ DIV>
 
<ボタンID = "add_tab">タブを追加</ button>の
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtincidunt </a>の<スパンクラス= "UI-アイコンUI-アイコン-近い"ロール= "プレゼンテーション"> </ span>を</タブを削除します李>
  </ UL>
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

並び替え（ソート可能）

それらを並べ替えるには、上記のタブをドラッグします。

単に呼び出す.ui-tabs-navの要素を.sortable() 、あなたがソート可能なタブを聞かせすることができます。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - 並べ替え（ソート可能）</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    VARタブ=の$（ "#tabs」）.tabs（）;
    tabs.find（「.ui-タブ-NAV」）.sortable（{
      軸「X」、
      停止：関数（）{
        tabs.tabs（「リフレッシュ」）。
      }
    }）;
  }）;
  </スクリプト>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。Pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <P> Mauris eleifend東側らturpis。Duis ID ERAT。Suspendisse potenti。Aliquam vulputate、pedeのヴェルのvehiculaのaccumsan、マイルneque rutrum ERAT、EU congue orci Loremのeget Loremの。前庭非アンティ。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたり。Fusce sodales。Quisque EU urnaのVEL enimのcommodoのpellentesque。Praesent EU笑いhendreritの小舌のテンパスのpretium。Curabitur Loremのenimは、pretium NEC、feugiatのNECは、luctus、ラクスます。</ p>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

タブの下部

コンテンツの下部にあるいくつかの追加（位置決め用）CSSやJS（正しいクラス要素に配置された）、Jiekeタブ付き。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - タブ・ページの下部に</タイトル>で
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（）;
 
    //変更クラス
    $（ "> * .tabs-ボトム.ui-タブ-NAV、.tabs底.ui-タブ-NAV」）
      .removeClass（「UI-コーナーすべてのUIコーナートップ」）
      .addClass（「UI-コーナーボトム "）;
 
    端部// $（ ".tabs底.ui-タブ-NAV」）.appendTo（「.tabs底」）におけるモバイルナビゲーション。
  }）;
  </スクリプト>
  <スタイル>
  タブが変更されたコンテンツの高さで変化しないように/ * *、高さを強制/
  #tabsの.tabs-スペーサー{フロート：左;高さ：200pxの;}
  .tabs底.ui-タブ-NAV {クリア：左;パディング：0 .2em .2em .2em;}
  .tabs底.ui-タブ-NAV李{トップ：自動;底：0;マージン：0 .2em 1pxは0;のborder-bottom：自動;のborder-top：0;}
  .tabs底.ui-タブ-NAV li.ui-タブ-アクティブ{マージントップ：-1px;パディングトップ：1pxの;}
  </スタイル>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ"クラス= "タブ底">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVクラス= "タブ・スペーサー"> </ div>の
  <DIVのID = "タブ-1">
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <P> Mauris eleifend東側らturpis。Duis ID ERAT。Suspendisse potenti。Aliquam vulputate、pedeのヴェルのvehiculaのaccumsan、マイルneque rutrum ERAT、EU congue orci Loremのeget Loremの。前庭非アンティ。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたり。Fusce sodales。Quisque EU urnaのVEL enimのcommodoのpellentesque。Praesent EU笑いhendreritの小舌のテンパスのpretium。Curabitur Loremのenimは、pretium NEC、feugiatのNECは、luctus、ラクスます。</ p>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

垂直タブ

切り替えるにはタブをクリックし、コンテンツの異なる論理部分に分割されています。

<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
  <メタ文字セット= "UTF-8">
  <タイトル>のjQuery UIのタブ（タブ） - 垂直タブ</タイトル>
  <リンクのrel = "スタイルシート"のhref = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <SCRIPT SRC = "// code.jquery.com/jquery-1.9.1.js"> </スクリプト>
  <SCRIPT SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </スクリプト>
  <リンクのrel = "スタイルシート"のhref = "http://jqueryui.com/resources/demos/style.css">
  <スクリプト>
  $（関数（）{
    $（ "#tabs」）.tabs（）AddClass（「UI-タブ-垂直UIヘルパー-clearfix"）;
    $（ "李は#tabs」）.removeClass（「UI-コーナートップ」）.addClass（「UI-コーナー左"）;
  }）;
  </スクリプト>
  <スタイル>
  .ui-タブ-垂直{幅：55em;}
  .ui-タブ-垂直.ui-タブ-NAV {パディング：.2em .1em .2em .2em;フロート：左;幅：12em;}
  .ui-タブ-垂直.ui-タブ-NAV李{明確には：左;幅：100％;のborder-bottom-幅：1pxの重要な;のborder-right-幅:!重要0;マージン:! 0 -1px .2emを0;
  .ui-タブ-垂直.ui-タブ-NAVの李A {表示：ブロック;}
  .ui垂直タブ-.ui-タブ-NAV li.ui-タブ-アクティブ{パディング底：0;パディング右：.1em;のborder-right-幅：1ピクセル;ボーダー右幅：1ピクセル;}
  .ui-タブ-垂直.ui-タブパネル{パディング：1EM;フロート：右;幅：40em;}
  </スタイル>
</ HEAD>
<ボディ>
 
<DIVのID = "タブ">
  <UL>
    <李> <a href="#tabs-1">ヌンクtinciduntする</a>ます。</ li>
    <李> <a href="#tabs-2"> Proin悲しみする</a>ます。</ li>
    <李> <a href="#tabs-3"> Aenean切れ込みする</a>ます。</ li>
  </ UL>
  <DIVのID = "タブ-1">
    <H2>コンテンツタイトル1 </ H2>
    <P> Proin ELIT ARCU、rutrumのcommodo、vehiculaテンパス、笑い。CurabiturのNECのARCUをcommodo。〜している間マイルはmauris AMET座るsollicitudin。ナムelementum QUAM ullamcorperアンティ。Etiam aliquetマッサらLoremの。Mauris dapibusラクスauctor笑い。Aenean tempor ullamcorperレオ。Vivamus sedのマグナQUIS小舌のeleifendのadipiscing。Duisのorci。aliquam sodalesのtortor履歴書イプサム。aliquamのNULLA。Duis aliquamのmolestieのERAT。ユタらmaurisヴェルpedeバリウスsollicitudin。UTの嘆きNECのorciのtinciduntのinterdumをsedの。Phasellusイプサム。ヌンクtristiqueテンパスlectusます。</ p>
  </ DIV>
  <DIVのID = "タブ-2">
    <H2>コンテンツタイトル2 </ H2>
    <P> morbusの複数形のtincidunt、DUIはfacilisisのfeugiat、odio metus妊婦アンティ、UT pharetraのマッサmetus IDがNUNC。Duis scelerisque molestie turpis。セッドのアトリ属、マッサeget luctusのmalesuada、metusエロスmolestie lectus、UTテンパスエロスマッサutの嘆き。AeneanをAMET座りますaliquetのアトリ属SEM。Suspendisseはエロス前庭マイルのadipiscingのadipiscingインチPraesent。morbusの複数形のfacilisis小舌のsuscipitのaliquamで小舌をsedの。Curabitur ornare consequat NUNC。AeneanのVELのmetus。ユタお問い合わせ今viverra NULLA。aliquamのERATのvolutpat。Pellentesque convallis。マエケナスのfeugiat、TELLUS pellentesque pretiumお問い合わせ今、フェリスLoremのeuismodフェリス、EU ornareレオのNiSiのVELフェリス。Mauris consectetur tortorらプルスます。</ p>
  </ DIV>
  <DIVのID = "タブ-3">
    <H2>コンテンツタイトル3 </ H2>
    <P> Mauris eleifend東側らturpis。Duis ID ERAT。Suspendisse potenti。Aliquam vulputate、pedeのヴェルのvehiculaのaccumsan、マイルneque rutrum ERAT、EU congue orci Loremのeget Loremの。前庭非アンティ。クラスaptent taciti sociosqu広告litora torquentあたりconubiaノストラ、inceptosのhimenaeosあたり。Fusce sodales。Quisque EU urnaのVEL enimのcommodoのpellentesque。Praesent EU笑いhendreritの小舌のテンパスのpretium。Curabitur Loremのenimは、pretium NEC、feugiatのNECは、luctus、ラクスます。</ p>
    <P> Duisの毎日の祈りの規則的順序。マエケナスの小舌のエロス、blandit NEC、pharetra、ATでゼンパー、マグナ。Nullam交流ラクス。NULLAのfacilisi。Praesent viverraフスト履歴書のneque。Praesent blanditのadipiscingのvelit。Suspendisseのpotenti。〜している間のmattis、pedeのヴェルのpharetraのblandit、エロスfaucibusマグナ小舌、IDのeuismodラクスの嘆きのeget odio。ナムscelerisque。〜している間、非リベロのsed NULLA mattis commodo。ユタsagittis。〜している間にNiSi lectus、feugiatのporttitor、tempor交流、tempor履歴書、pede。Aenean vehicula velit EU TELLUS interdum rutrum。マエケナスcommodo。PellentesqueのNECのELIT。ラクスでFusce。Vivamus Aリベロ履歴書lectus hendrerit hendreritます。</ p>
  </ DIV>
</ DIV>
 
 
</ BODY>
</ HTML>

デモを見ます

前：jQueryのUIの例-回転子（スピナー）

次へ：jQueryのUIの例-ツールチップボックス（ツールチップ）

jQuery UI コース

jQuery UI テーマ

jQuery UI コンポーネントライブラリ

jQuery UI リファレンスマニュアル

jQuery UI 例

jQueryのUIの例 - タブ（タブ）

デフォルトの機能

折りたたみコンテンツ

Ajaxを介してコンテンツを取得します。

ときにマウスホバーを開きます

シンプルな操作

並び替え（ソート可能）

タブの下部

垂直タブ