JavaScript + Ajax 実践サンプル集 - 星(★)の数で評価する

星(★)の数で評価する

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのstarRating()プラグインを利用して５段階評価します。サンプルの「★」にマウスを移動してクリックします。リセットするときは[-]ボタンをクリックします。

このサンプルを編集して試してみる ←サンプルが背後に隠れて見えないときは左をクリック！

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating
{
  cursor: pointer;
  margin: 2em;
  clear: both;
  display: block;
}
div.rating:after
{
  content: '.';
  display: block;
  height: 0;
  width: 0;
  clear: both;
  visibility: hidden;
}
div.cancel, div.star
{
  float: left;
  width: 17px;
  height: 15px;
  text-indent: -999em;
  cursor: pointer;
  display: block;
  background: transparent;
  overflow: hidden;
}
div.cancel, div.cancel a
{
  background: url('delete.gif') no-repeat 0 -16px;
}
div.star, div.star a
{
  background: url('star.gif') no-repeat 0 0px;
}
div.cancel a, div.star a
{
  display: block;
  width: 16px;
  height: 100%;
  background-position: 0 0px;
  border: 1 solid #FF0000;
}
div.star_on a
{
  background-position: 0 -16px !important;
}
div.star_hover a, div.star_live a:hover
{
  background-position: 0 -32px;
}
/* Read Only CSS */
div.star_readonly a, div.star_readonly a:hover
{
  cursor: default !important;
}
/* Partial Star CSS */
div.star
{
  background: transparent !important;
  overflow: hidden !important;
}
/* END jQuery.Rating Plugin CSS */

このサンプルを編集して試してみる!

★で５段階評価するには、ラジオボタンを配置します。ラジオボタンには「class="star"」と追加します。デフォルトの評価を表示するには「checked="checked"」を追加します。たとえば、★★★を表示するには３番目のラジオボタンに「checked="checked"」を追加します。

<input name="star2" type="radio" class="star" />
<input name="star2" type="radio" class="star" />
<input name="star2" type="radio" class="star" checked="checked" />
<input name="star2" type="radio" class="star" />
<input name="star2" type="radio" class="star" />

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

星(★)の数で評価する

JavaScript + Ajax 実践サンプル集 (1127本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

星(★)の数で評価する

JavaScript + Ajax 実践サンプル集 (1127本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...