AJAX Smart Star Rater

基本形

  •  
  •  
80% 4.0/5 10users

無効化

  •  
  •  
50% 2.5/5 10users

10星ステップ1

  •  
  •  
50% 5.0/10 10users

30星ステップ1.5

  •  
  •  
50% 15.0/30 10users

画像の切り替え

  •  
  •  
50% 2.5/5 10users

フォームで使う

評価
  •  
  •  
0.0/5
コメント

使い方

このスクリプトはページが読み込まれる際の初期化をしません。
予め「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要素」の幅を変更して下さい。

注意事項

動作確認ブラウザ

Copyright (C) MT312 All Rights Reserved.