2007年10月17日水曜日

そろそろJQueryネタ

スズキです。

いろいろと案件でJQueryは使っているのですが、
http://jquery.com/
なかなかネタとして書くタイミングがなく、
CTOA日記に先をこされたりもしていますが、
http://blog.livedoor.jp/hiroki0907/
そろそろ、書き始めることにしました。

今回は、共通で使いまわしているメニュー(Teedaのレイアウト)で
urlから判断して、現在のページのメニューをフォーカス状態
("mouse over"時のボタン)にさせるものを作ってみました。

まあ、下記のよな感じです。

----menu.html
....
<img id="aaa" src="img/aaa_normal.gif"/><br/>
<img id="bbb" src="img/bbb_normal.gif"/><br/>
....
----

----menu.js
// 初期処理
$(function() {
  focusMenu();
});

// メニューのフォーカス
function focusMenu() {
  // ページ名の取得(HTMLファイルの拡張子を取ったもの)
  var beginPos = location.href.lastIndexOf('/') + 1;
  var endPos = location.href.lastIndexOf('.');
  var page = location.href.substring(beginPos, endPos);
  //現在のページに該当するidを持つイメージボタンを
  //フォーカス時のものに変更
  switch(page) {
    case "aaa":
      $("#aaa").attr("src", "img/aaa_over.gif");
      break;
    case "bbb":
      $("#bbb").attr("src", "img/bbb_over.gif");
      break;
  }
}
----

ずっと、prototype.jsをメインで使っていたので、
$("...")でidを指定する場合は"#"がひつようだとか、
属性を変更するには、$("...").attr(key, value)としなければいけないとか、
初期処理は$(function() {...});とか、
意識しないといけないところが多々あり、
こなれるまでは、もう少し時間がかかりそうです。

"Teeda Ajax"とJQueryがいい感じで連動できたらいいなー。

--
blog: http://suz-lab.blogspot.com/

0 コメント: