読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

jQueryでhashchangeイベントを設定する

jQuery

jQueryでURLのハッシュ(hogehoge.html#fugafugaの#fugafugaの部分)が変わった時に動作するイベントを設定したかったんですけど、無いよね?
なので、プラグインを作ってみました。
これを使えばハッシュが変わったタイミングでAjax通信して中身を書き換えられるね。

プラグインはこんな感じ。

(function($) {
    $.fn.hashchange = function(config) {
        var defaults = {};
        var options = $.extend(defaults, config);
        return this.each(function(i) {
            if (options.callback) {
                $(this).bind("hashchange", options.param, options.callback);
            } else {
                $(this).trigger("hashchange", options.param);
            }
        });
    };
})(jQuery);

使い方はこんなん

<script>
(function() {
    $(function() {
        $(window).hashchange({callback: function() {
            alert(window.location.hash);
        }});
        $(window).hashchange();
    });
})();
</script>

パラメータを渡したいときはこんなんで。

<script>
(function() {
    $(function() {
        $(window).hashchange({
            param:{message: " Yeah!!"},
            callback: function(event) {
                alert(window.location.hash + event.data.message);
            }});
        $(window).hashchange();
    });
})();
</script>

パラメータには関数も渡せるからこんなことも出来るよ。

<div id="message">hogehoge</div>
<script>
(function() {
    $(function() {
        $(window).hashchange({
            param: {
                message: function() {
                    return " " + $("#message").text();
                }
            },
            callback: function(event) {
                alert(window.location.hash + event.data.message());
            }
        });
        $(window).hashchange();
    });
})();
</script>