Tabs / タブ

タブ型メニューを作るには、jQuery UI の Tabs が便利だ。

• jQuery UIの Tabs プラグインによるタブメニュー

  jQuery UI の Tabs プラグインで、タブ型メニューを簡単に作る方法。この実装例の、jQuery UI の CSS テーマは、デフォルトのテーマを読み込んで使っている。もちろん他の CSS テーマにも対応しているので、色々試してみるといい。

• jQuery UI の Tabs プラグインの cookie オプション

  jQuery UI の Tabs プラグインで作るタブ型メニューの cookie オプションについて。cookie オプションを使うと、最後に開いたタブメニューがどれかをクッキー（cookie）に格納し、ページを再度開いたとき、前回の最後に開いたタブメニューの内容を表示させることができる。

• jQuery UIの Tabs と Slider プラグインによるスライダー付タブメニュー

  jQuery UIの Tabs プラグインと Slider プラグインを使ったスライダー付タブメニュー。スライダーで、タブメニューを切り替えることができる。スライダーのトラック上のハンドルをドラックして、トラック上を移動させると、タブも切り替わる。 タブを切り替えると、スライダーのハンドルも移動する。

• 別ファイルをタブの内容に表示させる Ajax 系タブメニュー

  jQuery UI の Tabs プラグインで作るタブ型メニューにおいて、ajax で別ファイルを、タブの内容に表示させる方法。サンプルの、 「タブメニュー①」は、通常のタブ。 「タブメニュー②」は、別ファイルを読み込んで表示。 「タブメニュー③」は、指定したファイルが見つからなかったときの表示。

• jQuery UI の Tabs プラグインを使ったマウス・オーバー・タブ・メニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、タブメニューにカーソルを合わせると、タブの内容を開くようにする方法。マウス・オーバー・タブ・メニューにするには、event オプションの値に、mouseover を指定する。

• jQuery UI の Tabs による、タブ名クリックで開閉するタブメニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、タブメニュー名をクリックすると、そのタブの内容を開き、再度クリックすると、タブの内容を閉じる（折りたたむ）ようにする方法。タブメニュー名をクリックすることで、開閉するようにするには、collapsible オプションの値に、true を指定。

• ドラッグ＆ドロップによりタブの順番を並べ替えられるタブメニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、ドラッグ＆ドロップにより、タブの順番を、並べ替えられるようにする方法。ドラッグ＆ドロップで並べ替えられるようにするには、Sortable プラグインを併用する。

• jQuery UI の Tabs プラグインによる、タブを追加できるタブメニュー

  jQuery UI の Tabs、Dialog、Button などのプラグインを使った、タブを新たに追加できるタブメニュー。 「タブを追加」ボタンを押すと、「タブ追加フォーム」というタイトルのダイアログが現れる。「タブ追加フォーム」ダイアログ内の「追加」ボタンを押すと、タブを追加する。

• jQuery UI の Tabs プラグインによるタブを下に表示するタブメニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、タブを、タブの内容の下に表示する方法。

• jQuery UI の Tabs プラグインを使ったタブメニューのサイズを指定

  jQuery UI の Tabs プラグインを使ったタブ型メニューのサイズ（大きさ）を指定する方法。スタイルシートだけで指定できる。

• jQuery UI の Tabs によるタブメニューで、最初に表示するタブを指定

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、ページ読み込み時に表示するタブを指定する方法。selected オプションの値に、ページ読み込み時に表示させたいタブの配列のインデックスを指定する。1つ目のタブは「0」、2つめのタブは「1」、3つめのタブは「2」を指定する。

• jQuery UI の Tabs によるアニメーションでタブを切り替えるタブメニュー

  jQuery UI の Tabs プラグインを使ったタブ型メニューにおいて、タブを切り替えるとき、アニメーション動作で切り替わるようにする方法。アニメーション動作速度も指定することができる。

• jQuery UI の Tabs で作る縦並びのタブ型メニュー

  jQuery UI の Tabs で、縦並びのタブ型メニューを作る方法。