星マークの評価機能を実装「Raterater」
当ページのリンクには広告が含まれています。
スポンサーリンク
星マークの評価機能を実装するプラグイン「Raterater」を紹介します。
jQueryプラグイン「Raterater」
このプラグインを使えば、5つ星で何かの評価を表示することができます。
また、ユーザーのクリックで評価を投票することもできるので、PHPスクリプトなどを使ってDBと接続することで、サイトに5段階の評価システムを実装することができそうですね。
スポンサーリンク
それではデモページの星マークの評価機能をご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Raterater のデモでーす。">
<title>Raterater - jQueryプラグイン</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="raterater.css" rel="stylesheet"/>
<style>
.raterater-layer {
font-size:100px;
}
</style>
</head>
<body>
<h1>Raterater のデモでーす。</h1>
<p>星をクリックしてみてください。</p>
<div class="ratebox" data-id="1" data-rating="3.7"></div>
<script src="https://code.jquery.com/jquery-1.4.1.min.js"></script>
<script src="raterater.jquery.js"></script>
<script>
function rateAlert(id, rating) {
alert( 'あなたがつけた評価は……星 '+rating+' です！' );
}
$(function() {
$( '.ratebox' ).raterater( { submitFunction: 'rateAlert', allowChange: true } );
});
</script>
</body>
</html>
スポンサーリンク