jQueryでのプラグインの簡単な書き方と、広告などをランダムに表示するのに便利なjQueryプラグインを紹介する。
プラグインといっても、そんなに難しいことはなくて、jQueryでちょっとしたJavaScriptを書けるようになれば、プラグインも普通の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解説
プラグイン jquery.randomdisplay.js の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のプラグインを書くことができる。書き方が独特でちょっと分かりにくいかも知れないが、jQueryのプラグインはこのように書くものだと割り切って、自分がプラグインを作るときは似たような機能のプラグインのソースを元に改造するところから始めるといい。
関連しているかもしれない記事
- jQueryを使ったJavaScriptの書き方と、日本語入力モード制御の例
- GoogleタグマネージャとjQueryで好きな位置にタグを表示する – AdSense広告配信タグも
- アナリティクス拡張 GA Funcitons 1.4.3:jQuery1.9でエラーが出る不具合を修正
- Google Analyticsにフォーム入力イベントなどを機能拡張するJavaScript「GA Functions」
- Googleタグマネージャとアナリティクスでソーシャルボタンをトラッキングする
トラックバック: jQueryを使ってボックス要素をランダムに表示する方法 | 中途半端を極める
トラックバック: オンズ » 【jQuery】重複しない複数の要素をランダムに表示する方法。(jQuery編)
2012年12月6日 9:04 AM
ありがとうございます!
2012年12月6日 12:57 AM
かなり使わせて頂いております!!
2011年3月22日 6:25 PM
このプラグイン良いですね!GJ!!