2inc.org

特定の属性を持ち、特定の子要素を持たない要素を選択するjqueryセレクタ

jquery

要素[属性='属性値']:not(:has(’要素2′))

jqueryでカテゴリごとにメニューの画像を切り替えるTips 2

JavaScript jquery wordpress

以前にも一度書いてますが、汎用性0で非常に使いにくいものだったので、再度組み直し。良くわからないまま組んだけど、とりあえず動いているっぽいので公開します。

/*========================================

gnav画像を反転させるjquery plugin

========================================*/

function globalNaviCurrent() {
	var url = location.pathname
	var directory = url.split("/");

	if(directory[1]==''){
		var currentDirectory = "/";
	}else if(directory[1]=='category'){
		var currentDirectory = directory[2];
	}else{
		var currentDirectory = directory[1];
	}
	var currentA = $('#header #GlobalNavigation ul li a[@href$=' + currentDirectory + '] img');

	if(imgsrc = currentA.attr("src")){
		var kugiri = imgsrc.split("_n",2);
		var imgsrcCurrent = kugiri[0] + "_r" + kugiri[1];
		currentA.attr({ src: imgsrcCurrent });
	}
};
$(document).ready(globalNaviCurrent);

ルートの直後の階層のパスを取得して判別します（「http://2inc.org/web/html」だったら「web」）。一応wordpress用ってことで、カテゴリーページには「category」というパスが入るようだったので、その判別入れてます。

サイトに会わせて書き換えないといけないのは「currentA」に渡す画像の階層の部分。あとは_nという画像と_rという画像を用意してそれを反転させてます。

参考

• JSでナビゲーションをハイライトさせる(web dimension maker )

jqueryでカテゴリごとにメニューの画像を切り替えるTips

JavaScript jquery

全ページに共通のグローバルナビゲーションがある場合、私はphpのincludeを利用して、navi.txtとか作ってそれを全ページに使いまわすということを結構やります。 非常に便利というか、修正がある場合でも1つのファイルを修正するだけで済むという手間要らずな感じが大好きなのですが、カテゴリごとにメニューの画像を切り替えるのが面倒くさいんですよね。 例えば「about」のカテゴリーのページを開いた場合はグローバルメニューの「about」の画像のみがonになるとか。

で、それをjqueryを使って何とかならないかなと思ってやってみました。

例えばHTMLがこんな感じだったとします。メニューの画像はそれぞれ_off.gifと_on.gifの2つを用意。

<div id="GlobalNavigation">
  <ul>
    <li class="about"><img src="images/about_off.gif" alt="about" /></li>
    <li class="gallery"><img src="images/gallery_off.gif" alt="gallery" /></li>
    <li class="link"><img src="images/link_off.gif" alt="link" /></li>
  </ul>
</div>

そして、javascriptの方が、こんな感じ。

$(document).ready(function(){
　　//パス取得
　　path = location.pathname

　　if(path.match("/about/")){
　　　　$("#GlobalNavigation .about img").remove()
　　　　$(#GlobalNavigation .about").prepend('<img src="images/about_on.gif" alt="about" />')
　　}else if(path.match("/gallery/")){
　　　　$("#GlobalNavigation .gallery img").gallery()
　　　　$("#GlobalNavigation .gallery").prepend('<img src="images/gallery_on.gif" alt="gallery" />')
　　}else if(path.match("/link/")){
　　　　$("#GlobalNavigation .link img").remove()
　　　　$("#GlobalNavigation .link").prepend('<img src="images/link_on.gif" alt="link" />')
　　}
})

まず、path = location.pathnameで、現在開いているページのパスをpathという変数に代入します。 このとき取得できるパスは、ルート以下の部分となります。
http://2inc.org/about/index.htmlなら、/about/index.htmlという感じ。

そして、path.match(検索文字列）でpathの中に検索文字列が含まれるか調べます。 含まれていたらtrueを返すので、これをif文の条件としてそれぞれ分岐させます。

あとは、<li>のclassを目印として_off.gifの削除、そして_on.gifの挿入を行うという流れです。

ただ、このスクリプトだとメニュー項目が増えるたびにごちゃごちゃ書き加えないといけないので、手間です。 もっとオブジェクト化して引数渡すだけでチャチャッとできるようにすると使い勝手も良くなるんですが。 残念なことに私にはそこまでjavascriptの知識がありません…。

jqueryでタグを追加するTips

JavaScript jquery

論理的で正しいhtmlを記述する。デザインをcssで実現しようと試みる。ダメだ、タグ（div）が足りねぇ…。 これって結構経験したことあるパターンじゃありませんか？ でもデザインのためにdivを追加するのはイヤだし、ということで、jqueryを使いhtmlをいじることなくdivを追加する方法を考えてみました。

このエントリーを読む