作ってみたよー!! ランダムバナーを表示する jQuery プラグイン
「ランダムにバナーを表示したい」という要望があり、データベースとか使うような大袈裟なものじゃないもの…と jQuery でなんとか実現できないものかと、ちょっと自分で作ってみる事にしました。
サンプルを設置しました！ → SAMPLE
ソースコードは以下。
(function($){
$.fn.rb_collection = {};
$.fn.rb_collection = function(cfg) {
var that = this;
if($.browser.msie && !$.fn.random_banner.winloaded)
$(window).load(function(){ ini(cfg) });
else
ini(cfg);
function ini(cfg) {
$.post( cfg, function(data, status) {
var $items = $(".rb_collection", data);
var arr = $.makeArray($items);
var nums = Math.floor(Math.random() * arr.length);
$(that).html(arr[nums]);
}, "html");
};
};
})(jQuery);
使い方は、jQuery(1.3.2 で動作してました!) と一緒に読み込み…。
以下のように、HTML を書きます。
該当するのは、
$("#bp_holder").rb_collection('javascript/semi-item.htm');
こちらの一行。
id が bp_holder というブロック(div)に javascript/semi-item.htm の中に記述されている複数のバナーから1つを表示する。という意味になります。
<!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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/rb_collection.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bp_holder").rb_collection('javascript/semi-item.htm');
});
</script>
</head>
<body>
<!-- ランダムバナーが表示される場所 -->
<div id="bp_holder"></div>
</body>
</html>
そして、semi-item.htm には複数のバナーを並べておきます。
ファイルの拡張子からもわかるように、ただの HTML ファイルになっており…
<html> <body> <div> <!-- ひとつ目のバナー --> <table cellspacing="0" cellpadding="0" width="184" border="0" class="rb_collection"> <tr> <td>BLOG:</td> <td><a href="http://hampom.wordpress.com/"></a></td> </tr> <tr> <td>TWITTER:</td> <td><a href="http://twitter.com/hampom/"></a></td> </tr> </table> <!-- ふたつ目のバナー --> <div class="rb_collection"> <a href="http://twitter.com/hampom/"><img src="http://a3.twimg.com/profile_images/483611929/avatar.png"></a> </div> </div> <body> </html>
おおきな div要素の中に、さらに table や div といったブロックがあり css の class 指定「rb_collection」がされています。
この rb_collection が設定されている要素がランダムで元のページに出力されて表示されます。
初めて作ってみたんですが、とりあえず希望通り動いていますのでヨシとしております。改善点や問題点などがあればご指摘いただけると嬉しいです(*´д｀*)
[...] 作ってみたよー!! ランダムバナーを表示する jQuery プラグイン October 2009 4 [...]
2010 in review « hampom TODAY
2011年 1月 2日 11:57 PM