TopJavaScriptjQueryプラグイン > 2013年3月
2013年3月25日

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法

March 25,2013 12:03 AM
Tag:[, , ]
Permalink

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にする方法を紹介します。

1.jQuery UI Tabsについて

基本情報として、jQuery UI Tabsでタブ切り替えを行う方法については「jQuery UI Tabsを使ってタブを実装する」を参照してください。

サンプル
jQuery UI Tabsのサンプルページ

2.hashchangeプラグインについて

jQuery UI Tabsのタブ切替でブラウザの「戻る」「進む」を有効にするには、hashchangeプラグインを利用します。

hashchangeプラグインの基本的な設定方法については「jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」(実装解説つき)」を参照してください。

3.jQuery UI Tabsでhashchangeプラグインを利用する

2項のリンク先の説明ではjQuery UI Tabsでhashchangeプラグインを利用する方法が不明なため、本エントリーで解説します。

サンプルも作りましたので、タブをクリックしたあとブラウザの「戻る」「進む」ボタンをクリックしてみてください。

サンプル
jQuery UI Tabsのサンプルページ

変更前後のソースコードは次のとおりです。

変更前のソース(抜粋)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tabs').tabs({
        selected: 2,
        fx: { opacity: 'toggle', duration: 300 },
    });
});
</script>
<div class="..." id="tabs">
  <ul class="...">
    <li class="..."><a href="#tabs-1">First</a></li>
    <li class="..."><a href="#tabs-2">Second</a></li>
    <li class="..."><a href="#tabs-3">Third</a></li>
  </ul>
  …後略…

変更後のソース(抜粋:赤色は追加部分)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tabs').tabs({
        select: function(event, ui) {
                    location.hash = ui.tab.hash;
                }
    });
    $(window).hashchange(function(){
        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;
        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });
    });
    $(window).hashchange();
});
</script>
<div class="..." id="tabs">
  <ul class="...">
    <li class="..."><a href="#tabs-1">First</a></li>
    <li class="..."><a href="#tabs-2">Second</a></li>
    <li class="..."><a href="#tabs-3">Third</a></li>
  </ul>
  …後略…

以下、解説です。

jQuery UI Tabsでのタブ切り替えではlocation.hashが書き換わらないため、selectオプションを使って強制的にlocation.hashを設定します。

    $('#tabs').tabs({
        select: function(event, ui) {
                    location.hash = ui.tab.hash;
                }
    });

そして、location.hashのイベントハンドラを次のように実装します。

    $(window).hashchange(function(){
        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;
        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });
    });
    $(window).hashchange();

hashchangeイベントハンドラの中で、どのタブがクリックされたかを知るために、まずlocation.hashに設定された「#tabs-x(xは数字)」からmatchメソッドを使って数字の部分だけを抽出し、それを変数numberに保存します。

        var index = location.hash.match(/#tabs-(\d)/);
        var number = index ? index[1] - 1 : 2;

例えば「#tabs-2」のタブがクリックされた場合、変数numberには「1」が設定されます。indexが得られなかった場合(つまり最初にページを開いた状態)は初期値の「2」を変数numberに設定します。

あとは、変数numberをjQuery UI Tabsのselectedオプションに設定して実行します。

        $('#tabs').tabs({
            selected: number,
            fx: { opacity: 'toggle', duration: 300 },
        });

なお、変更前のソースにあった、

        selected: 2,
        fx: { opacity: 'toggle', duration: 300 },

の2行は削除しています。

理由はlocation.hashイベントハンドラ内部から実行するjQuery UI Tabsと処理が重複するためです。

4.参考サイト

参考サイトは以下です。ありがとうございました。

changing location.hash with jquery ui tabs
Comments [0] | Trackbacks [0]
2013年3月22日

jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」(実装解説つき)

March 22,2013 2:55 AM
Tag:[, , ]
Permalink

jQueryのAjaxやタブ切替などでブラウザの「戻る」「進む」が有効になる「hashchangeプラグイン」を紹介します。

jQuery hashchangeプラグイン
jQuery hashchangeプラグイン

1.機能

Ajaxを使って切り替えたページについては、通常、ブラウザの「戻る」「進む」が使えません。

が、hashchangeプラグインを利用すれば、Ajaxを使って切り替えたページについてもブラウザの「戻る」「進む」が有効になります。

例えば下の図の①~⑤のページ遷移で、通常は「戻る」「進め」ボタンで②~④の遷移は行われませんが、hashchangeプラグインを使えば②~④のページ遷移も実現できます。

ページ遷移例

具体的な仕組みですが、まず基本的なJavaScriptの動作として、フラグメント(「index.html#abc」の「#abc」)を使ってページを切り替えた場合、フラグメント「#abc」が「location.hash」に設定されます。

hashchangeプラグインは、このlocation.hashの変更をイベントとしてハンドリングできるようにするものです。

つまり、ブラウザの「戻る」「進む」をクリックしたときに、location.hashでハンドリングできるようになるので、ハンドリング後はlocation.hashを使って適切な処理を行えば、ブラウザの「戻る」「進む」に連動してページの履歴を辿るように見せることができる、という仕組みです。

他のjQueryプラグインでは比較的簡単に設定できますが、hashchangeプラグインはlocation.hashを使った実装が必要な点が大きく異なります。

ちなみに、HTML5で導入されたpushStateとpopStateで同様の機能が実現できるみたいですが、IEが対応していないようです。

ソースコードを見る限り、hashchangeプラグインはIE6/7/8にも対応しているようです。

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

公式サイトにある「Source」または「Minified」を右クリックして、ファイルをダウンロード。

公式サイト

ファイル名は「jquery.ba-hashchange.js」または「jquery.ba-hashchange.min.js」とします。

3.基本的な使い方

jQueryと、ダウンロードした「jquery.ba-hashchange.js」または「jquery.ba-hashchange.min.js」を読み込みます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>

hashchangeイベントを受け取りたい要素に対して次のように記述します。「hashを使った処理」の詳細な実装方法については次項で解説します。

<script>
$(function(){
    $(window).hashchange(function(){
        var hash = location.hash;
        // hashを使った処理
    })
    $(window).hashchange();
});
</script>

なお、jQuery1.9系では「TypeError: $.browser is undefined」というエラーが出るようなので、ここでは1.8系を使用しています。

1.9系を利用する場合は、jquery.ba-hashchange.jsの下記の部分を修正してください。

変更前

$.browser.msie && !supports_onhashchange && (function(){

変更後

$.support.msie && !supports_onhashchange && (function(){

4.サンプル

次のサンプルで動作を確認してください。

サンプル
サンプル

ボックスをクリックするとボックスの背景色が変わります。

何回かクリックした後でブラウザの「戻る」をクリックしても通常は何も起こりませんが、hashchangeプラグインを利用しているので、クリックした順番と逆の順番で色が変わっていきます。

サンプルの内容は次のとおりです(一部割愛)。

<style type="text/css" title="text/css">
a {
    display: block;
    padding: 15px;
}
a.selected {
    background: #ccc; 
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.ba-hashchange.min.js"></script>
<script>
$(function(){
    $(window).hashchange(function(){
        var hash = location.hash;
        $('a').each(function(){
            if ($(this).attr('href') == hash) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    })
    $(window).hashchange();
});
</script>
<ul>
  <li><a href="#test1">test1</a></li>
  <li><a href="#test2">test2</a></li>
  <li><a href="#test3">test3</a></li>
</ul>

キモとなるのは次の赤色部分で、hashchangeイベントが発生したときに、背景色を切り替える処理を行っています。

$(function(){
    $(window).hashchange(function(){
        var hash = location.hash;
        $('a').each(function(){
            if ($(this).attr('href') == hash) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    })
    $(window).hashchange();
});

もしhashchangeイベントが不要な処理であれば、例えば次のような実装になるかと思います。

$(function(){
    $('a').click(function(){
        $('a').each(function(){
            $(this).removeClass('selected');
        });
        $(this).addClass('selected');
    });
});

話を戻して、ボックスをクリックするとhashchangeイベントが発生し、次の行を実行します。一番右のボックスをクリックした場合、変数hashには「#test3」が設定されます。

        var hash = location.hash;

あとは、すべてのa要素をチェックして、href属性の値が変数hashと等しければclass属性値「selected」を追加し、そうでなければ削除します。

        $('a').each(function(){
            if ($(this).attr('href') == hash) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });

一番最後にある

    $(window).hashchange();

は、ブラウザをリロードしたときにhashchangeイベントを発生させるためのものです。

5.実装のポイント

サンプルにおける実装のポイントは、ブラウザの「戻る」「進む」の処理と、普通にクリックしたときの処理が1つになっているということです。

なぜなら、a要素を普通にクリックしてもlocation.hashは変更され、hashchangeイベントが発火するためです。

よって、次の実装は同じ処理が2回行われることになってしまいます。

<script>
$(function(){
 
    // a要素がクリックされたときの処理
    $('a').click(function(){
        $('a').each(function(){
            $(this).removeClass('selected');
        });
        $(this).addClass('selected');
    });
 
    // hashchangeイベント処理
    $(window).hashchange(function(){
        var hash = location.hash;
        $('a').each(function(){
            if ($(this).attr('href') == hash) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    })
    $(window).hashchange();
});
</script>

以上です。

jQuery UIを使ったタブ切り替えでhashchangeプラグインを利用する方法については、別エントリーします。

Comments [0] | Trackbacks [0]
2013年3月 4日

jQueryでcookieを簡単に使える「jQuery Cookie」のまとめ

March 4,2013 12:03 AM
Tag:[, , ]
Permalink

jQueryでcookieを簡単に使える「jQuery Cookie」の利用方法のまとめです。

jQuery Cookie

1.機能

名前のとおり、「jQuery Cookie」はjQueryでcookieを簡単に使うためのjQueryプラグインです。

JavaScriptでは値のエンコード・デコードやpathやexpireの結合、取得時の操作など、cookie処理が結構面倒なのですが、このプラグインを利用すれば簡単に扱えるようになります。

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

githubの「jquery-cookie」のページにある「ZIP」をクリック。

jquery-cookie

これでアーカイブをダウンロードできます。

3.基本的な使い方

jQueryと、ダウンロードしたアーカイブに含まれるjquery.cookie.jsを読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://user-domain/jquery.cookie.js"></script>

cookieに値を保存したい場合は次のように記述します。

$.cookie('キー', 値);

cookieから値を取得したい場合は次のように記述します。

var cookie = $.cookie('キー');

指定したキーに対応する値がない場合は「undefined」となります。

4.期限・パス・ドメインを設定する

例えば期限を7日にする場合は、第3パラメータにハッシュ形式で「expires」を設定します。

$.cookie('キー', 値, { expires: 7 });

パスを設定する場合は、第3パラメータにハッシュ形式で「path」を設定します。

$.cookie('キー', 値, { path: '/' });

ドメインを設定するには、第3パラメータにハッシュ形式で「domain」を設定します。

$.cookie('キー', 値, { domain: 'ドメイン' })

期限・パス・ドメインをまとめて指定するには次のように記述します。

$.cookie('キー', 値, { expires: 7, path: '/', domain: 'ドメイン' });

5.SSLの場合のみcookieを通信する

SSLの場合のみcookieで通信したい場合、4項の第3パラメータにハッシュ形式で「secure: true」を設定します。デフォルトはfalseです。

$.cookie('キー', 値, { secure: true });

4項の項目とあわせて設定する場合はカンマで区切ってください。

6.cookieをまとめて取得する

取得可能なすべてのcookieをまとめて取得するには、キーを指定せずに取得します。

var cookies = $.cookie();

値は次のようなハッシュ形式で返却されます。

{ 'キー1': 値1,
  'キー2': 値2 }

7.cookieを削除する

cookieを削除するには、removeCookieを利用します。

$.removeCookie('キー');

パスを指定する場合、次のように記述します。

$.removeCookie('キー', { path: '/' });
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3