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

星(★)の数で評価する

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

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

★で５段階評価するには、ラジオボタンを配置します。ラジオボタンには「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" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - Star Rating Demo </title>
  <link href="jQuery/starRating/jquery.rating.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/starRating/jquery.rating.js" type="text/javascript"></script>
  <script type="text/javascript">
//    $(function() {
//    });
  </script>

</head>
<body>

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 */

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/starRating/jquery.rating.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/starRating/jquery.rating.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
  <input name="star1" type="radio" class="star" />
  <input name="star1" type="radio" class="star" />
  <input name="star1" type="radio" class="star" />
  <input name="star1" type="radio" class="star" />
  <input name="star1" type="radio" class="star" />
  <br />
  <br />
  <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 実践サンプル集 (1496本以上)　◇編集して実行可能◇

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

星(★)の数で評価する

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

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

星(★)の数で評価する

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

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