NEWS

Blog

【インタビュー掲載】クリエイターの評価・育成制度

クリエイターの評価や育成に頭を抱える方は多いのではないでしょうか? ajikeでは、一貫した評価と育成によりクリエイターの成長サイクルをつくっています。 今回、クリエイターの評価・育成をテーマに、生産性を高めるためのメディア「SELECK」の取材を受けました。 インタビュー記事は以下をご覧ください。 「評..

記事を読む

Blog

【取引経験者向け】国内・海外の仮想通貨取引所のトレーディングダッシュボードのUIを集めてみた

こんにちは。ディレクターの佐藤です。 皆さんは仮想通貨取引を行ったことがありますでしょうか? 全ての仮想通貨取引所における一日の平均取引高は、17年12月に170億ドルに迫った。 18年3月は91億ドルに減り、4月前半は74億ドルまで減った。 ロイター社「仮想通貨の取引高、ピーク時から半減 過熱感後退で」..

記事を読む

Blog

ブランド・ステートメント「move people.」を定めてから、UXデザインの領域が広がった話。

こんにちは。神田です。 2018年も半年が過ぎました。ajikeは創業から10年が経ち、会社としても新たなフェーズに入る大事な一年になることを実感しています。 本日は、ajikeがUXデザインカンパニーとして、強い組織になるために定めたブランド・ステートメントのご紹介をしたいと思います。 ブランド・ステー..

記事を読む

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