SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

jQuery UI/プラグインの活用

手軽に扱えるjQueryプラグインを使ってみよう

jQuery UI/プラグインの活用(4)

  • X ポスト
  • このエントリーをはてなブックマークに追加

ダウンロード Sample.zip (1.1 MB)

タブプラグインを使ってみよう

 次はタブプラグインを使用してみましょう。サイトからjquery.microtabs-0.1.jsをダウンロードし、pluginsフォルダに配置します。

 第1回「jQuery UIのインタラクションを使ってみよう」 、第2回「jQuery UIのウィジェットを使ってみよう」と扱ってきたjQuery UIの中にも、タブを簡単に扱う機能が備わっていますが、344KBあるjquery-ui-1.8.2.custom.jsファイルに比べ、MicroTabプラグイン(jquery.microtabs-0.1.js)はわずか1KBというファイル容量の少なさが魅力です。

 以下の著者サイトで使用方法を確認できます。

 リスト5のように、jQueryとタブプラグイン、メニュープラグインのスタイルシートを読み込みます。

リスト5 プラグインの読み込み(jQueryPlugin_menu_tab.html)
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/jquery.microtabs-0.1.js"></script>

 タブプラグインは次のように指定します(リスト6)。selectedで指定した番号のタブが、デフォルトで選択されます。

リスト6 タブプラグインの使用例(jQueryPlugin_menu_tab.html)
<!--3.タブの指定-->
<script type="text/javascript">
<!--
    $(function () {
        $('.microtabs').microTabs({
            selected: 0 
        });
    });
//-->
</script>

 また、リスト7のようにスタイルを指定することで、デザインや色の変更が可能です。ここでは、タブのスタイルを指定しています。

リスト7 タブプラグインのスタイル指定(jQueryPlugin_menu_tab.html)
<!--4.タブのスタイル指定-->
<style type="text/css">
    .microtabs { margin:20px 20px; max-width:800px;}

    .microtabs-button { 
        padding: 10px; 
        background-color:#333; 
        color:#fff; 
        text-decoration:none; 
        font-family:Segoe UI, Helvetica, Arial; 
    }
    .microtabs-button:hover { color:#abcdef; }
    .microtabs-selected { 
        background-color: #fff; 
        color: #333; 
        border-right:1px solid black; 
        border-top:1px solid black; 
        border-left:1px solid black; 
    }

    .microtabs-element { 
        background-color:#fff; 
        color:#555; 
        padding:10px; 
    }

    .microtabs-header { margin-bottom: -1px; }
    .microtabs-container { border: 1px solid black; }

</style>

 リスト8に、div要素でのタブプラグインの指定例を示します。

 タブの表示領域では、リスト7のようにdiv要素のクラスに"microtabs"を指定し、タブごとのdiv要素のクラスには"micro"を指定し、タブ名と遷移先、表示内容を指定します。

リスト8 タブプラグインの使用例(jQueryPlugin_menu_tab.html)
<!--5.タブの指定-->
<div class="microtabs">
    <div class="micro">
        <a href="#">Tab1</a>
        <div>Tab1</div>
    </div>
    <div class="micro">
        <a href="#">Tab2</a>
        <div>Tab2</div>
    </div>
    <div class="micro">
        <a href="#">Tab3</a>
        <div>Tab3</div>
    </div>    
</div> 

 図3と図4に、タブプラグイン使用時の結果を示します。

図3 タブプラグイン使用時(デフォルト)
図3 タブプラグイン使用時(デフォルト)
 
図4 タブプラグイン使用時(中央を選択した場合)
図4 タブプラグイン使用時(中央を選択した場合)

次のページ
画像のスライダープラグインを使ってみよう

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
jQuery UI/プラグインの活用連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト asa(asa)

 <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5628 2011/01/06 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング