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>