NEWS

Blog

【クライアントの声】ajikeが参画したことでプロジェクトは理想の状態に近づきました

ajikeは、2016年8月から今日(2018年9月現在)まで、株式会社NTTドコモの新規事業である「ecコンシェル」の改善にコミットしています。 今回、インタビューさせていただきましたNTTドコモの石川様と古川様に、パートナーを探していた当時の状況や、参画後の働き、今後に期待することについてお伺いしまし..

記事を読む

Blog

【クライアントの声】体験中心のデザインに納得。最終的に全てのデザインの改修をお願いしました。

東京電力エナジーパートナー株式会社の新規事業「ペットみるん」に、ajikeはプロジェクトのデザイン改善のタイミングより参画しました。「ペットみるん」は自宅にカメラを設置し、外出先からアプリを通してペットの様子を見守る、AI搭載の最先端ペット見守りサービスです。 今回、開発が進んでいる中、ajikeが参画に..

記事を読む

Now Loading...

NEWS

 

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

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

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

 
 

□hashchangeTab.js の使い方

●必要なファイル

 

●設定方法

まず、下記のような形で各Javascriptファイルを読み込みます。
[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>
[/javascript]
次にオプションを設定します。
[javascript]
<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>
[/javascript]
 

●オプション項目

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

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

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

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

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

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

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

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

□hashchangeTab.js の仕組み

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

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

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

□そのほか便利な点

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

.entry-content h3{font-weight:bold;border-bottom:1px solid black;}
.entry-content h4{color: #666 !important;margin: 0.5em 0 0.2em 0;}
.entry-content li{list-style-position: inside;margin-left: 1em;}

twitter