jQuery タグ記事

jQuery ifによる要素の判定

2008-11-27 (木)カテゴリJavascript, jQueryタグ, ,

jQueryでのif

いやはや、jqueryやっていて今更気づきました。
気づかず別の手法でやっていた自分も恐ろしいですが、考えてみれば当然なのです。

Java Script
$("#test")

上記では”test”のid属性を持っているタグを取得するjQueryの作法です。
通常Javascriptで変数などを扱って値の有無で処理を変える場合

Java Script
var test;
if(test){
 //処理内容
}

とすると思います。上記のように変数の有無で処理内容を実行するかどうかを決めるのです。
じゃあjQueryでも。。

Java Script
if($("#test")){
 //処理内容
}

これじゃ駄目なのです!
jQueryだと$(“”)にてjQuery独特のオブジェクトを取得するので、true,falseは返ってきません。
なのでif文で囲っても無駄。じゃあどうすれば良いの?

Java Script
if($("#test").length){
 //処理内容
}

上記が正解です。そのオブジェクトがいくつあるのかがlengthで返ってくるので、id=”test”がない場合は0が、複数ある場合は1,2,3,…と返ってくるわけです。

考えたら当たり前なのですが、意外と陥りがちな所かと。
自分は1年近くjQueryやってて気づきませんでしたorz
これからはlength使うべし。自分メモ。

この本、なかなか見直し勉強には良かったです。

jQuery – 制作現場で使えるプラグインあれこれ

2008-11-08 (土)カテゴリJavascript, jQueryタグ, ,

jQuery
半年前位から、JavascriptのライブラリにjQueryのライブラリを使っているのですが
拡張用のプラグインが非常に豊富でうれしい限りです。

制作現場でもよく使っているプラグインをまとめてみました。

IE PNG Fix
IE6などは、まだまだ制作現場ではユーザシェアから言っても対応必須です。
PNG使えれば自由なデザインの幅も広がります。そんな可能性を広げてくれるプラグインです。

Java Script
$(function(){
  $("img[@src$=png]).pngfix();
});

とても簡単にPNGの導入が出来る優れものなのです。

Rounded Corners
角丸を現状のHTMLでコーディングするのはとても大変です。
CSS3では仕様の中に角丸があるのですが、FFとsafariのみしか対応していないから現状だと一番スマートなやり方かな?

Java Script
$(function(){
  $('.rounded').corners();
});

※corners(“30px 10px”)等と書くと角丸具合も自由に変えられます。

Star Rating
アマゾンなどにある星マークの評価をする機能を実装できます。
若干DB等に調整を入れる必要はありますが、コミュニティサイトなどを作る際に簡単に導入出来るのが魅力的です。

Java Script
$(function(){
  $("#star").rating('star.php', {maxvalue:5, curvalue:2});
});

jQuery lightbox
有名なLightBoxのjQuery版です。通常だとprototype.jsやscriptaculous.jsを読み込んだりしなければいけないのでどうしても肥大化してしまうのですが、プラグインなので、他に必要なのはjQueryのみ。

Java Script
$(function() {
  $('#gallery a').lightBox({fixedNavigation:true});
});

jQuery Image Protecter
最近は減ってきましたが、一部企業案件などで話がよく出るのですが「画像をダウンロード出来ないようにしてほしい!」、実際はキャプチャ取ってしまえば取れるのですが右クリックで保存出来ないような処置を加える事が出来ます。
このプラグインはmootoolにあったImage Protecter dwProtecterを参考にjQueryに僕が作り変えたものなのです。

Java Script
$(function(){
  $(".protect").ImageProtector({image:"images/blank.gif"});
});

まだまだ、他にも便利なプラグインがあります!
本家には色々なプラグインがカテゴライズされているので、是非とも欲しいプラグイン探してみてください。
ぱっと使って試せるのがプラグインの魅力なので、仕事などで使う際の参考にどうぞ!!

jQuery 本家