今日の人気記事

まだデータがありません。

星マークの評価機能を実装「Raterater」

当ページのリンクには広告が含まれています。

スポンサーリンク

星マークの評価機能を実装するプラグイン「Raterater」を紹介します。

jQueryプラグイン「Raterater」

このプラグインを使えば、5つ星で何かの評価を表示することができます。

また、ユーザーのクリックで評価を投票することもできるので、PHPスクリプトなどを使ってDBと接続することで、サイトに5段階の評価システムを実装することができそうですね。

スポンサーリンク

それではデモページの星マークの評価機能をご覧ください。

「Raterater」のデモ

ソース( 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>
スポンサーリンク

関連記事(一部広告含む)