Smart Star Rater ~AJAXレイティング・ウィジェット~

starrater

サンプルを見る  SmartStarRater.lzh をダウンロードする

必ず利用規約を読んで、同意の上でダウンロードして下さい。

機能の詳細

JavaScriptで動作する星付け評価スクリプトです。
prototypeやjQueryなどのライブラリ不要で軽快に動作します。
iPhoneなどのスマートフォンでもタップ操作で評価できます。
評価をテキストログで記録できるPHPスクリプト付き。

ソース

<div class="star">
  <div class="star-rect" onmousemove="star.start(event, this, 1);"><ul><li>&nbsp;</li><li style="width: 80%;">&nbsp;</li></ul></div>
  <div class="star-text">
    <span><span id="starRates1">80</span>%</span>
    <span><span id="starStars1">4.0</span>/5</span>
    <span><span id="starUsers1">10</span>users</span>
  </div>
</div>

使い方

このスクリプトはページが読み込まれる際の初期化をしません。
予め「li要素」の横幅を%単位で与えておきます。(満点5★なら100%)
「star.start」の3番目と「span要素」のIDに同じ番号を割り当てて下さい。
データを受信する「vote.php」内でクリックされた「評価」と「ID番号」を取得できます。

オプションの変更

「star.start」の4番目にオプションを設定できます。

使用する星数
{length: 5}
変更した場合はCSSで「div要素」と「ul要素」の横幅を設定して下さい。
選択できる星数
{step: 1}
無効化する
{disabled: 1}
星1つ分の幅px
{width: 20, height: 20}
画像を切り替えたい場合に設定して下さい。
データ送信先
{sendto: ‘vote.php’}
クリックした時のデータ送信先を変更できます。
フォームで使う
{form: ‘hidden要素のid’}
クリックした時にデータを送信せずに、フォーム要素に保持しておきたい場合は「hidden要素」のIDを設定して下さい。

画像の変更

☆はul要素の背景、★はli要素の背景としてCSSで表示させています。
☆を最上部に配置して、★を最上部から40px(選択用)と80px(固定用)の位置に配置すると綺麗に重なります。
ずれる場合は「li要素」の「background-position」で位置を調節して下さい。
変更後は「width」「height」オプションと、「div要素」と「ul要素」の幅を変更して下さい。

注意事項

  • 「div class="star-rect"」要素を改行してしまうと、「Firefox」で内部要素を取得できません。
  • 「IE7」でも動作させたい場合は、CSSの「inherit」を使わずに親要素の「画像パス」に書き換えて下さい。

動作確認ブラウザ

  • IE 8.0.6
  • Firefox 3.5.3
  • Chrome 9.0.5
  • Safari 4.0.3
  • Safari iOS4.1