「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

jQuery UIを利用したタブ表示方法をご紹介します。

タブ表示手順

  1. jQuery UIのダウンロードページにアクセスします。
    http://jqueryui.com/download/
  2. デフォルトでは「Toggle All」にチェックが付いているので、チェックを外してタブ表示に必要な「Tabs」をチェックして「Download」ボタンを押下します。(「Tabs」をチェックすると「Core」と「Widget」も同時にチェックされます。)
    ※デザインを変更したい場合はページ下にある「Theme」でタブのデザインも選択可能です。今回は「UI lightness」を選択しています。
    jQuery UI Tabs 手順1
    jQuery UI Tabs 手順2
  3. ダウンロードしたファイルの内、タブ表示に必要となるのは以下のファイルとなります。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.8.3.js\jquery-ui-1.9.2.custom\jsjQuery本体
    jsjquery-ui-1.9.2.custom.min.jsjquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified
    cssjquery-ui-1.9.2.custom.min.css\jquery-ui-1.9.2.custom\css\custom-themejQuery UI用のスタイルシート
    画像custom-theme
    ※選択したテーマによりフォルダ名は変わります
    \jquery-ui-1.9.2.custom\css\custom-theme\images
  4. HTMLファイル
    head内でjsとcssファイルを読み込み、bodyタグ内へタブ表示用の指定をします。jsとcssを指定すれば後はdivとulタグの構成でタブ記述可能となります。

  5. jQueryファイル

実行サンプル:デザイン「UI lightness」

タブ1の表示内容

タブ2の表示内容

タブ3の表示内容

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。