Use css to create star ratings_Experience exchange

先看效果

Step 1: XHTML

 

 

 
 
    
• 1
   
    
• 2
  
    
• 3
  
    
• 4
 

    

5 

這裡只介紹靜態的技術，隨後會給出系統的應用，你也是自己加程序來嘗試一下，還可以採用ajax來做出絢麗的效果

Step 2:圖片|Graphics

為了節省您的空間和寬頻，我們採用gif圖，這個圖片就是打分數的按鈕。

圖

Step 3:CSS

    margin: 3px; /*I wan't some space around this thing*/
    padding: 0px; pretty sure OL's have a default padding of 0px、 20px = 100px wide*/
    height: 20px; /* The height of each star is 20px. Since this is a horizo​​​​ntal list, we will set the list height to the ight of the  relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
    background: url(star_rating.) top left repeat-x  background: url(star_rating.) top left repeat-xally left , the list will appear to have five stars.*/
    }

根據代碼我們知道：

去掉了ulpad的margin和padding以及list-style ，定義了高20px寬100px的一個區塊
下來時按鈕元素的製作，下面是css

    .star-rating li{

    pad:0p ; * no padding at all*/    margin:0px; /* no margin at all*/
    /**/ /*反斜線 hack，這會導致 IE5 Mac 看不到此規則*/
    float: any*/
    float: left; /* for anyhft; to float left, this makes a horizo​​ntal list*/
    /* */ /* end the IE5 Backslash hack*/
    }

解決IE5 MAC bug

繼承上面的按鈕元素樣式，再定義滑鼠動作，下面是css

   .star-rating li a{ :  display: we want a block item, so that we can mess with its height and width*/
    width:20px; /* easy stuff, we want the width to be the same as the starstar width*/    text-decoration: none; /* remove the underline from the link*/
    text-indent: -9000px; /* indent the texto the offing a [urlus the . =http://www.php.cn/]image-replacement technique[/url], we dont want to see the text anymore.*/
    z-index: 20; /*we'll come back to this */
    position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
    padding: 0px; padding*/
   background-image:none; /* we will not show the star*/
   }

  13. ground.star-rating li a:hover{
  13. ground.star-rating li a:hover{ url(star_rating.gif) left bottom; /*this is where the magic is*/
  15. z-index: 1; /*move this star to the bottom of the z-index stack*/
  16 . left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/
  17. }

次に、異なる星評価を表示する方法を考えなければなりません。3 つ星ですか? 4 つ星ですか? 背景画像を水平方向に繰り返し、選択したものを区別するために a と a:hover の幅を定義します。スタースター。

以下は css

.star-rated a.one-star{
left: 0px;
}
です。 star -評価 a.one-star:hover{
width:20px;
}
.star-評価 a.two-stars{
left:20px;
}
。 star -評価 a.two-stars:hover{
幅: 40px;
}
.star-評価 a.three-stars{
左: 40px;
}
。星評価 a.three-stars:hover{
幅: 60px;
}
.star-評価 a.four-stars{
左: 60px;
}
。星評価 a.four-stars:hover{
幅: 80px;
}
.star-評価 a.five-stars{
左: 80px;
}
。 star -評価 a.five-stars:hover{
width: 100px;
}

この時点で制作は完了です

最初モデル 半分のスターの状況と初期のスター評価以外を無視して、次にこの問題を解決します。

ステップ 1. 実際に動作を確認します

写真 1

実際に動作を確認してください

ステップ 2: XHTML

• 現在 3.5/5星。


• 1< ;/li>
  
• 2


• 3


• 4


• 5

そして最初のものの構造モデルは似ていますが、唯一の違いは次のとおりです。

現在 3.5/5 つ星です。

初期値を定義します

ステップ 3: 星のイメージ

最初の星は null 値で、2 番目の星はヌル値です。 star は null 値で、最初の値は選択される値で、3 番目は実際の値です。

図 2

ステップ 4: CSS、マジック

.star-rated li.current -評価{
背景: url(star_rated.gif) 左下;
位置: 絶対;
高さ: 30px;
表示: ブロック;
テキストインデント: -9000px;
z-index: 1;
}

コンテナ ul の相対位置の継承を避けるために、position:Absolute が各星の高さを使用します。 is height:30px; 他のものはテキストを非表示にし、配置を定義しています。

null value css

.star-rated{
…
背景: url(star_rated.gif) 左上repeat-x;
}

値を選択 css

.star-rated li a:hover{
バックグラウンド: url(star_rated.gif) left center;
…
}

もちろん、初期値は選択に応じて変わります。その変更を実現するにはどうすればよいでしょうか?

style = "width:105px;">現在 3.5/5 つ星。

このコードを読めば、幅が何なのかがわかると思います。計算は何ですか?

平均評価|平均: 3.5
各星の幅|各星の幅: 30px;
幅を設定|幅を設定: 3.5 * 30 = 105px

この新しいモデルを見てみましょう
* 例 1: 150 x 30 の星評価システム
* 例 2: 125 x 25 の星評価システム
* 例 3: 25 x 125 の垂直星評価システム

実装には php を使用します

最初は実装の原則です

前からの星評価を達成しますcss I、II ですが、onclick が識別でき、データがデータベースに記録および保存され、計算のためにデータベースからデータが呼び出される限り、
現在の平均値を取得できることがわかります。スコア - 現在のスコア。

1. 以下はデータベースを作成する SQL です

CREATE TABLE ratings(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
total_votes INT NOT NULL,
total_value INT NOT NULL,
what_id INT NOT NULL,
what_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2. パラメータファイル参照

require("connectDB.php");
require("closeDB.php");
require( "tableName.php");
require("openDB.php");
?>

3. 投票プログラムの表示と投票データの更新プログラム

$rated_posted=$_GET['vote'];//変数を星の値によってパスしました
$id =$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" エラー: " .mysql_error( ));
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];/ /合計投票数
$current_rated=$numbers['total_value'];//合計して保存された評価の合計数
$sum=$rated_posted+$current_rated;// 現在の投票値と合計投票値
$tense=($count==1) ? "vote" : "votes";//複数形 votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName) WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //パターン マッチ ip:Bramus が提案! http://www.php.cn/ -この変数は、投票した以前の IP アドレスを検索し、true または false を返します

if($voted){
echo "

".
"< ;ul class="star-rated">".
"

".
"

1

".
"

2

".
"

3

".
"

4< ;/li> ;".
"

5

".
"".
"

評価: {".$count." ".$tense."
あなたは以前に投票しました。

";//現在の投票値を現在の数値で表示
}else{

if(isset($_GET['vote'])) {

if($sum==0){
$added=0;//最初の投票が集計されたかどうかを確認します
}else{
$added=$count +1; //現在の投票数を増分します
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//ifこれは配列です。つまり、すでにエントリがあるため、別の値をプッシュします
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//最初のエントリの場合
}

$ insert=serialize($checkIP);
mysql_query("UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insert ."' WHERE id='".$_GET['id']."'");

echo "

評価: ".@number_format($sum/$added,2)." {".$added." "cast" ご投票いただきありがとうございます!

";// 投票の更新された値を表示
}else{
?>

4. 訪問者評価プログラム

 
  
  
  
 

How clear was this tutorial?

• Current rating

    
• " title="Rate this 1 star out of 5" class="one-star">1

    
• " title="Rate this 2 stars out of 5" class="two-stars" >2

    
• " title="Rate this 3 stars out of 5" class="three-stars" >3

    
• " title="Rate this 4 stars out of 5" class="four-stars" >4

    
• " title="Rate this 5 stars out of 5" class="five-stars" >5

5.最新评分结果提示

echo "

Rating: ".@number_format($sum/$count,2)." {".$count." ".$tense." cast}

";//show the current updated value of the vote
} // end isset get vote 
} //end voted true, false
?>