2013年5月24日

初心者のコーダーでも簡単に実装出来るJavaScript/jQuery Tips

こんにちは、鴨田です。

今更感はすごくあるとは思いますが、
コーダー初心者でも簡単なJavaScript/jQueryのコードで、
ちょっとした運用を楽に出来るTipsを紹介したいと思います。

１．現在見ているページのナビゲーションをアクティブにする


if (document.URL.indexOf("001.html") != -1) {
  $("nav a.top").toggleClass("on");
} else if (document.URL.indexOf("002.html") != -1){
  $("nav a.list").toggleClass("on");
}

HTML


<nav>
  <ul>
    <li><a class="top">TOPページ</a></li>
    <li><a class="list">一覧ページ</a></li>
  </ul>
</nav>

デモページ(001.html)

PHPとかでやる場合の方が多いかも知れませんが、
ナビゲーションの現在位置表示で使えると思います。

２．liの中身がない場合、その上位要素のulごと表示をしない


if($("ul.class1 li").size()=="0") {
  $("ul.class1").hide().parent().append("<span>ここに<ul>がありました</span>");;
}
if($("ul.class2 li").size()=="0") {
  $("ul.class2").hide().parent().append("<span>ここに<ul>がありました</span>");
}

HTML


<nav>
  <ul class="class1">
    <li><a class="top">TOPページ</a></li>
    <li><a class="list">一覧ページ</a></li>
  </ul>
</nav>
<nav>
  <ul class="class2">
  </ul>
</nav>

デモページ(002.html)

上側には、li要素が存在するので、ulのボーダーが見えます。
下側には、li要素が存在しないので、ul要素丸ごと非表示となり、ボーダーすら見えなくなりますが、
代わりにspan要素を入れ込んでいます。

また、先ほどは001.htmlだったので、TOPページがアクティブでしたが、
002.htmlにしておりますので、一覧ページがアクティブになっていることが分かるかと思います。

同じような表現として、下記のような表現でも同じ事が出来ます。


$("ul").not(":has(li)").hide();

３．ある文字列を含む要素を強制非表示/内容を変更する


$("a:contains('ニセモノ')").hide();
$("a:contains('バケモノ')").text("オバケモノ").css('background', '#000').css('color', '#FFF');

HTML


<nav class="class1">
  <ul class="class2">
    <li><a href="#">ホンモノ</a></li>
    <li><a href="#">ニセモノ</a></li>
    <li><a href="#">バケモノ</a></li>
  </ul>
</nav>

デモページ

何かしら禁止ワードなどがあれば、
強制的にその言葉が含まれる要素を非表示にしたり、内容を変更出来ます。

４．ユーザーエージェントによって表現を変える


if(navigator.userAgent.indexOf("Chrome") != -1) {
  $("a:contains('Chrome')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Firefox") != -1) {
  $("a:contains('Firefox')").toggleClass("on");
} else if(navigator.userAgent.indexOf("Safari") != -1) {
  $("a:contains('Safari')").toggleClass("on");
} else {
  $("a:contains('Other')").toggleClass("on");
}

HTML


<nav>
  <ul>
    <li><a href="#">Chrome</a></li>
    <li><a href="#">Firefox</a></li>
    <li><a href="#">Safari</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</nav>