RSS Feed
Twitter
2010年2月18日(更新2010年3月2日) 
MuRa jQueryでのプラグインの書き方と、バナー広告などをランダムに表示するちょっと実用的なjQueryプラグインを紹介する。
プラグインといっても、普通のjQueryの書き方とあまり変わらず簡単に作ることができる。
サンプル： リロードすると要素がランダムに切り替わる。
- 広告1
- 広告2
- 広告3
- 広告4
- 広告5
- 広告6
- 広告7
まずはテスト用のhtml。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ランダム表示テスト</title> <script language="JavaScript" type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <script language="JavaScript" type="text/javascript" src="js/jquery.randomdisplay.js"></script> </head> <body> <ul randomdisplay="3"> <li><a href="#1">広告1</a></li> <li><a href="#2">広告2</a></li> <li><a href="#3">広告3</a></li> <li><a href="#4">広告4</a></li> <li><a href="#5">広告5</a></li> <li><a href="#6">広告6</a></li> <li><a href="#7">広告7</a></li> </ul> <div randomdisplay="2"> <p>コンテンツp1</p> <p>コンテンツp2</p> <p>コンテンツp3</p> <div>コンテンツdiv4</div> <div>コンテンツdiv5</div> </div> </body> </html>
htmlには、JavaScriptファイルを読み込む2行を追加して、ランダム表示したいタグを並べて、その親のタグに新しい属性 randomdisplay を付けて表示したい数を指定するだけ。後はJavaScriptがやってくれるので、htmlを汚さなくていい。デザインとプログラムを分離できる。
動作は、広告1～広告7の内3つだけがランダムに表示される。そしてコンテンツp1～コンテンツdiv5の内2つだけがランダムに表示される。
jquery.randomdisplay.js
jQuery(function($) {
$.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = $(this).children().hide().length;
for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
$(this).children().eq(r).show().prependTo($(this));
}
});
}
});
$(function(){
$("[randomdisplay]").each(function() {
$(this).randomdisplay($(this).attr("randomdisplay"));
});
});
});
JavaScript解説
1行目 jQuery(function($) { と 21行目 }); は、グローバル変数や関数の名前空間を関数内に閉じ込めて、DOM構築後documentオブジェクトに対して function($) を呼び出す。$は引数となるので prototypeを併用してもグローバル変数が衝突することはない。
3～4行目の $.fn.extend({ randomdisplay : function(num) { } }); の記述がプラグインの関数定義。 jQueryオブジェクトの新しい関数 randomdisplay() を定義している。こうすることでオリジナルのjQuery関数を作ることができ、jQueryのセレクターや操作関数と同じように使うことができる。この関数の引数の形式は自由で、thisにjQueryオブジェクトが入る。戻り値の型も自由だが基本的にはjQueryオブジェクトを返せばよい。
ここでは、jQueryオブジェクトthisの子のタグからランダムに選んだタグを、引数で指定された数だけ表示する関数 randomdisplay() を定義している。
5行目 return this.each(function() { }); は、渡されたjQueryオブジェクト一つ一つについて無名関数を実行。
6行目 var chn = $(this).children().hide().length; は、子のオブジェクトを一旦全て非表示にして、子の数を取り出している。
7行目 for(var i = 0; i < num && i < chn; i++) { は、表示する個数分だけループ。
8行目 var r = parseInt(Math.random() * (chn – i)) + i; は、次に表示するインデックスを残りからランダムに算出。
9行目 $(this).children().eq(r).show().prependTo($(this)); は、r番目の子を表示して、prependTo()で親の先頭に移動している。移動することで表示順序もランダムになる。
15行目 $(function(){ }); は、DOM構築後にdocumentオブジェクトに対して無名関数を実行。
16行目 $(“[randomdisplay]“).each(function() { }); は、セレクターで属性 randomdisplay を持つタグを選択して、それぞれに対して無名関数を実行。
17行目 $(this).randomdisplay($(this).attr(“randomdisplay”)); は、先に定義したプラグイン関数 randomdisplay() を呼び出していて、引数に 属性 randomdisplay の値を渡している。
関連しているかも知れない記事:
- jQueryで日本語入力モード制御、スクリプトの書き方
- ニコニコ動画風TwitterプラグインNiTwPressを入れた。そしてバグ修正
- 5%の法則 – クリック率とコンバージョン率の予測方法
- WordPress引越し・ドメイン変更・ディレクトリ移動の方法は意外と簡単
- Twitter Toolsプラグインを入れてみた
カテゴリー: 
タグ: