社員ブログ

「jQuery-URL-Parser」でURLの一部を取得してbody classにする

2011年06月15日 水曜日

jQueryで現在開いているページのURLの一部を取得して、body class=”ココ” に入れちゃえという話。

jQueryプラグイン jQuery-URL-Parserについて

jQuery-URL-Parserは、URLをパースしてくれるjQueryのプラグインです。

以下は簡単にどこを取れるか書いています。詳しくはjQuery-URL-Parserで確認してくださいね。

  • URL attributes.attr()
    http://example.com/folder/dir/index.html?item=value
    ・/folder/dir/index.html
    ・/folder/dir/
    ・index.html
  • Query string parameters.param()
    http://example.com?sky=blue&grass=green
    ・’blue’
    ・’green’
    ・’grass’:'green’
  • URL segments.segment()
    http://example.com/folder/dir/example/index.html
    ・’folder’
    ・’example’
  • Fragment parameters and/or segments.fparam()」 「.fsegment()
    http://example.com#sky=blue&grass=green
    ・’blue’
    http://example.com/#/about/us/
    ・’about’

WordPressの場合

WordPressの場合は、body_class というテンプレートタグが存在しますので、以下のようにテーマを編集すれば良いだけです。このjQueryは必要ありません。

<body <?php body_class(); ?>>
手順
  1. jQuery-URL-Parserをダウンロード
  2. ヘッダーにダウンロードしたjsを追加
  3. ヘッダー又は別途作成したjsにjQuery functionを追加
作業

ダウンロードしたjsを、ヘッダーに追加します。
ちなみに、見本として EC-CUBE 2.11.x のタグで書いています。

<script type="text/javascript" src="
<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.url.js"></script>

次に、ヘッダー(site_frame.tpl)に以下のjQuery functionを追加します。

<script type="text/javascript">
$(function(){
    var url = $.url();
    var URLsegment = url.segment(1);
    $("body").addClass(URLsegment);
});
</script>

.segment(1)の所を、2や-1など数値を変えることで取得してくる部分が違います。

.segment(1)の場合、
http://example.com/products/detail.php?product_id=4
<body class="products">
http://example.com/abouts/
<body class="abouts">

こんな感じにclassが付きます。後はCSSで好き放題!
jquery-1.6.1.min.js、IE6,7,8、Firefox4で動作確認済みですが、導入は自己責任でお願いします。
期待値ではない場合、.segment以外をいろいろとお試しください。

Trackback URL
文字サイズサイズ小サイズ中サイズ大