[JS] タブメニュー

タグ :

jQuery の勉強をまとめるシリーズです。
今回はタブメニューの使用についてまとめます。

過去記事でも多用していますが、jQuery、HTML、CSS や動作確認を記事内部でタブメニューとして表示させたいと思い作成してみたので、その過程をまとめます。

プラグインのダウンロード

タブメニューは jQuery UI Tabs というプラグインとして用意されているので、サイトからダウンロードして使用します。

サイト「http://jqueryui.com/download/

まずは、バージョンを選択します。
ダウンロードするのは tabs 機能だけでいいので、一旦全ての選択を解除した後で、Tabs のみをクリックして選択します。
Tabs を選択すると上の方にある Core と Widget が自動で選択されます。
その状態で「Download」ボタンをクリックするとダウンロードされます。
(必要ならばテーマの設定もしておきます。デフォルトのデザインでよければそのまま。)

js_tabs_ui_download

ダウンロードされたファイルで使用するのは以下(赤字)になります。
(ダウンロードしたバージョンは「1.9.2」です。)

このファイルを動作環境へコピーして使用します。
js フォルダ内のファイルは「(格納先のパス)/js/」へ、
css フォルダ内のファイルは「(格納先のパス)/css/」へコピーします。

コピーしたファイルは以下のように HTML で呼び出して使用します。

<link href="css/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery-ui-1.9.2.custom.min.js"></script>

tabs()

タブメニューを表示させるために作成するコードは以下になります。

[ 構文 ]
$(“タブ名(divのIDとかクラス)”).tabs()
[ jQueryコード ]
$(function() {
	$(".tabs").tabs();
});
2行目の tabs() でタブメニューを表示させています。
[ HTMLコード ]
<h4>タブメニュー</h4>
<div class="tabs">
	<ul>
	<li><a href="#tab1"><span>タブ1</span></a></li>
	<li><a href="#tab2"><span>タブ2</span></a></li>
	<li><a href="#tab3"><span>タブ3</span></a></li>
	<li><a href="#tab4"><span>タブ4</span></a></li>
	</ul>
	<div id="tab1">
		<h3>タブ1</h3>
	</div>
	<div id="tab2">
		<h3>タブ2</h3>
	</div>
	<div id="tab3">
		<h3>タブ3</h3>
	</div>
	<div id="tab4">
		<h3>タブ4</h3>
	</div>
</div>
2行目で div のクラス名を設定します。
3行目〜8行目がタブ部分になります。
9行目〜11行目が「タブ1」をクリックしたときの中身になります。
残りの div もそれぞれのタブの中身です。
[ プレビュー ]
それぞれのタブをクリックすると、中身が可変します。

まとめ

このようにタブメニューの挿入は非常に簡単です。
jQuery では、このようなプラグインが多数用意されているので、是非とも活用していきたいと思います。

各種ソースコードがあるようなページでは、タブメニューがあることによって、「このコードはこの言語のコードなんだな」と明快になり、分かりやすく表記することができます。
なによりページ全体がスッキリするので、見る側にとっては見易くなると思います。

また、記述したい言語の種類が多数あっても、タブを増やしたりするだけで対応できるので、書く側にとっても魅力的だと思います。
今後も多用していきたい機能です。

Share

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

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed