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

公開日: : jQuery , ,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事

jQueryUIのdatepickerを使ってハマった所 その1

jQueryUIのdatePickerは簡単に日付選択のライブラリを設置できて便利なんですが、デザ

記事を読む

no image

簡単にTwitterやFacebookのボタンを設置するjQueryライブラリを書きました。

ちょっと必要そうになったので、TwitterやFacebookのボタン仕様について調べていたらいちい

記事を読む

jQueryUIの次期Version(1.9)にはToolTipが標準搭載される模様?

ツールチップのプラグインを探していて、現状でいけば最適解はきっと「qTip」だろうなぁと思って探して

記事を読む

Message

メールアドレスが公開されることはありません。

Target:mbox

自腹で購入した商品色々レビュー中!

商品紹介・レビュー記事特集!

Target:static mbox(mbox create

no image
Nintendo Switch で使える激安USB 3.0ケーブル

Nintendo Switchを買いました!とりあえず色々まずはやって

AMPで作ったページを実際にGoogle検索結果経由でみた時と同じキャッシュ表示にする方法

今日は技術的な話。AMPページ対応を行った人も最近増えてきたと思うので

分散投資ロボアドバイザーのTHEOを大体半年間回したら利率10%近くまでになったので、トランプさんありがとうと思った

(こちらの記事は私が独自に当サービスを使ってみた結果の報告です。特にT

Macでの作業効率アップ!nativefierを使ってWebアプリをアプリケーション化

Console heaven / bartosz.maciejew

no image
2016年の目標

新年明けましておめでとうございます。 年末年始は色々とバタバタしまし

→もっと見る

PAGE TOP ↑