Ajax系コンテンツを作る際に便利なjQueryライブラリjQuery.locationHashを作りました。

JavaScriptを使って非同期でガリガリ・・・っていうページも最近増えてきましたよね。
で、便利なライブラリ書いてみました。

例えば、こんなWebサイトがあったとします。

例)こんな感じのコンテンツ構成

普通にこんなページ構成ならURLはこうなるかと思います。

ココで問題なのが、コンテンツBの部分。
ここはチェックボックスを操作するとその内容に応じて非同期でページを書き換えるような作りになっています。
勿論、これ自体に問題はないんですがこの操作した内容を「戻る」できちんと戻って欲しい!って言われたらどうします?
普通に考えたら「何言ってるんだコイツ非同期でそんな事できる訳が・・・ちょっと難しいですね」
と答えちゃいそうですよねー。

で、そこでハッシュフラグメント。ハッシュフラグメントは所謂「ページ名」として使われていた部分。
これをGETパラメーターとして扱えばこんなことが出来ます。

「戻る」は1個まえのURLに書き戻す処理なので、これを使えば簡単に戻るに対応できます!

で、これは別にライブラリは不要なんですが・・・
こんな仕組みを使ったページを作ってると必要なライブラリが出てくるんですよ。
特に「値の書き換え処理」「ハッシュフラグメントの値取得処理」とか。

で、それをライブラリ化してみました。

URLのハッシュフラグメントを操作するjQueryライブラリ “jQuery.locationHash” | デジタル料理人

できることは以下の内容。

  • ハッシュフラグメントの記述方法ルールを管理可能。
  • ハッシュフラグメントを書き換える(複数値の同時書き換えや値のOR処理なども可能)
  • 特定要素配下にあるinput要素全てをハッシュフラグメントパラメーター文字列として取得
  • ハッシュフラグメントを解析してパラメーターオブジェクトを返却

多分コレ系のコンテンツを作り始めるときっと自作するような関数です。
是非是非ご利用下さい。

まだ色々改修中なので、いきなり機能が増えたりバグったりしますが、その場合は随時連絡を・・・!


Comments

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です