star-ratingプラグイン
star-ratingプラグインは星形の評価機能を表示できるプラグインです。例えば、書籍などのレビューサイトに適用することが考えられます。
下記サイトからstar-rating.zipをダウンロードし、解凍後、star-ratingフォルダをpluginsフォルダに配置します。
今回は、デフォルトで使用した場合と、初期状態を指定する場合、プロパティを無効化（値固定）させる場合の3種類について説明します。
リスト3にプラグインの使用例を示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Star Rating Pluginサンプル</title>
<!--1.jQueryの読み込み-->
<script type="text/javascript" src="Scripts/jquery-1.5.2.min.js"></script>
<!--2.プラグインの読み込み-->
<script type="text/javascript" src="plugins/star-rating/jquery.rating.js"></script>
<link type="text/css" href="plugins/star-rating/jquery.rating.css" rel="stylesheet"></link>
<!--3.CSSの設定-->
<style type="text/css">
body {
font-family: helvetica, arial;
margin: 0px;
padding: 0px;
font-size: 1.3em;
}
.container {
margin: 0 auto;
width: 800px;
border-left: 15px solid #AA4488;
padding-left: 25px;
}
h2 {
margin-top: 60px;
}
</style>
</script>
</head>
<body>
<div class="container">
<h1>Jquery.StarRating サンプル</h1>
<h2>（1）Defaultの使い方</h2>
<div id="def">
<input name="star1" type="radio" class="star" value="1" />
<input name="star1" type="radio" class="star" value="2" />
<input name="star1" type="radio" class="star" value="3" />
<input name="star1" type="radio" class="star" value="4" />
<input name="star1" type="radio" class="star" value="5" />
</div>
<h2>（2）初期状態の指定</h2>
<div id="Div1">
<input name="star2" type="radio" class="star" value="1" />
<input name="star2" type="radio" class="star" value="2" />
<input name="star2" type="radio" class="star" value="3" checked="checked"/>
<input name="star2" type="radio" class="star" value="4"/>
<input name="star2" type="radio" class="star" value="5"/>
</div>
<h2>（3）プロパティの無効化（値固定）</h2>
<div id="Div2">
<input name="star3" type="radio" class="star" value="1" disabled="disabled"/>
<input name="star3" type="radio" class="star" value="2" disabled="disabled"/>
<input name="star3" type="radio" class="star" value="3" disabled="disabled" checked="checked"/>
<input name="star3" type="radio" class="star" value="4" disabled="disabled"/>
<input name="star3" type="radio" class="star" value="5" disabled="disabled"/>
</div>
</div>
</body>
</html>
今回は、表示領域を「3.CSSの設定」のようにbody、container、h2について指定しました。こちらは、必要に応じて書き換えてください。
プラグインの使い方は、「（1）Defaultの使い方」のように、inputタグでtypeをradio、classをstarと指定します。プラグイン適用後を図6に示します。
また、初期状態に評価値を指定したい場合は、「（2）初期状態の指定」のようにchecked属性を“checked”にします。この例では、3番目のinputタグに対して指定しているので、3番目まで評価された状態で表示されます。プラグイン適用後を図7に示します。
また、プロパティを無効化とマイナスマークの付いたアイコンが非表示となり、値を変更できなくなります。「（3）プロパティの無効化（値固定）」のように、disabled属性を“disabled”にします。この例ではこの例では3番目のinputタグに対して指定しているので、3番目まで評価された状態で表示され、値を変更できません。プラグイン適用後を図8に示します。
また、今回のサンプルでは使用しませんでしたが、ratingメソッドで利用できるオプションを表2に示します。
| オプション名 | 説明 | メソッド引数 |
| select | inputタグのvalue属性を選択する | index／value |
| readOnly | 読み取り専用にする | true／false |
| disable | 無効化する | 無し |
| enable | 有効化する | 無し |
オプションはリスト4のように使用します。
$(selector).rating( 'method', // オプション名 [] //オプションの引数 );
