星形投票システムを実現するjavascript「StarBox 」

よくブログなどでは星形の投票システムを見かけます。
StarBoxではprototypeとscript.aculo.usで実現しています。

使用方法

StarBoxからstarbox.jsなどを、script.aculo.usからv1.8のファイル一式をダウロードします。

<script src="http://yourdomain/prototype.js" type="text/javascript"></script>
<script src="http://yourdomain/scriptaculous.js?load=effects"></script>
<script src="http://yourdomain/starbox.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://yourdomain/starbox.css">

＊starbox.cssとstarbox.jsには画像をしているところがあるので適宜変更してください。最後に以下のように書き込めば完成です。

<div id="id名"></div>
<script type="text/javascript">
	new Starbox('id名', 投票数);
</script>

またオプションには以下のサンプルのようなものがあります。

サンプル

デモ1

デモ2-3の下準備

<script type="text/javascript">
function starClicked(element, info) {
  $('notify').down('.element').update(element.id);
  $('notify').down('.rating').update(info.rating);
  $('notify').down('.average').update(info.average.toFixed(2));
  $('notify').down('.total').update(info.total);
}
</script>

デモ2

<script type="text/javascript">
            new Starbox('id名', 2.5, { 
	indicator: '#{average} rating from #{total} votes', 
	onRate: starClicked, 
	total: 1, 
	lockOnRate: false
	});
</script>

デモ3

<script type="text/javascript">
new Starbox('id名', 3.5, { 
	overlay: 'bigstar.png', 
	indicator: '#{average}/#{max} out of #{total} votes', 
	onRate: starClicked, 
	total: 30, 
	lockOnRate: false 
	});
</script>

Javascriptサンプルページ一覧

skuare.net