jquery

戻るボタンで戻っても、選択したタブが開かれたまま！Jqueryの便利なタブプラグイン、hashchangeTab.js

hashchange  

 
jqueryを使ったタブの実装方法はいろいろありますが、
どの方法でも大抵は、別のページにリンクしてから
ブラウザの戻るボタンで元のページに戻ると、
タブが初期状態に戻ってしまいます。

そこでブラウザ戻るボタンで戻った際、
選択していたタブが開いたままになるタブプラグイン
「hashchangeTab.js」を作成しました。

 
 

□hashchangeTab.js の使い方

●必要なファイル

 

●設定方法

まず、下記のような形で各Javascriptファイルを読み込みます。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=1.6.2'></script>
<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<script type="text/javascript" src="js/hashchangeTab.js"></script>

次にオプションを設定します。

<script type="text/javascript">
$(function(){
	$().hashchangeTab({
		nav:'ul#nav li',				//ナビ要素を指定
		currentNav:'current',	//ナビ要素のカレントクラス
		tabs:['#tab01', '#tab02', '#tab03'],	//タブ要素を指定
		fxType:'fade',				//エフェクトの種類 none|fade|toggle|slideDown
		fxSpeed:'1500',			//エフェクトのスピード slow|normal|fast|ミリ秒　
		firstShowFx:false		//ページを開いた際、エフェクト付きでタブ部分を表示するか　
	});
});
</script>

 

●オプション項目

上のコメントに書いてある通りなのですが、念のため各項目を説明します。

・nav
　⇒タブのナビゲーションとなる要素を指定します。

・currentNav
　⇒カレントナビゲーションのクラスです。

・tabs
　⇒タブとなる要素を配列で指定します。

・fxType
　⇒エフェクトの種類を設定します。
　（none / fade / toggle / slideDown）
　※noneはエフェクト無しです。

・fxSpeed
　 ⇒エフェクトのスピードを設定します。
　　（slow / normal / fast / ミリ秒）

・firstShowFx
　　⇒ページを開いた際、エフェクト付きでタブ部分を表示するかを設定します
　　　（false / true）

よくわからないという方はデモページのソースを見てみてください。
 
 

□hashchangeTab.js の仕組み

jquery.ba-hashchange.jsはハッシュ（URLの#〜〜の部分）が変更された際に
処理を行うようにできるプラグインです。

ざっくりですが、仕組みは下記のようになっています。
１）ナビをクリックしたらハッシュが変わる
　　　　　　　　↓
２）ハッシュが変わった際にタブが変わる処理を実行
（ほんとざっくりですね…）

ハッシュ（URLの#〜〜の部分）によって開くタブが変わりますので、
戻るボタンで戻った際のほか、
http://www.ajike.co.jp/sample/hashchangetab/#tab03
のようにリンクする際に開くタブまで指定することもできるので便利です。
 
 

□そのほか便利な点

ナビ要素とタブ要素が離れていても大丈夫で、
カレントクラスも自由に設定できるので自由度が高いです。
是非、皆さん使ってみてください！

Read More →