NEWS

Blog

【イベント開催】医療×ITで大注目のメドレー社CTOが語る『組織論』

6月15日(金)に「企画開発エンジニアmeetup #2」を開催します。 今回のイベントテーマは、”企業や事業の成長を加速させる「エンジニア文化」を考えよう”。 昨今、各所で話題が尽きないクリエイターの組織論。 デザイナーやエンジニアの組織づくりやクリエイターのマネジメントに関しては、幅広い方が注目し、現..

記事を読む

Blog

伝わるデザインガイドラインを作成するための3つのポイント

こんにちは。デザイナーの石橋です。 今回はデザインガイドラインを制作する上で、記載すべき3つのポイントに関してご紹介します。 これから初めてデザインガイドラインを作る方や、今後サービス系案件のUIデザインを担当される方にとって役立つ内容となれば幸いです。   目次 そもそもデザインガイドライン..

記事を読む

Blog

【UX dub vol.3イベントレポート】インプロワークショップを開催しました

2018年3月20日に、UX dub vol.3を開催しました。3回目の開催となる今回は、「組織のクリエイティビティを上げるには:インプロ体験を通して見えてくること」をテーマにしたインプロワークショップ。 「インプロ」とは「インプロヴィゼーション(improvision、以下インプロ)」の略で、「即興劇」..

記事を読む

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