Ajaxでスターレイティング!星評価スクリプト ~Smart Star Rater~

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

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で位置を調節して下さい。
変更後はwidthheightオプションと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