用css製作星級評等_經驗交流

先看看效果

Step 1: XHTML

<ul class="star-rating">
<li><a href="#" title="Rate this 1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="Rate this 2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="Rate this 3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="Rate this 4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="Rate this 5 stars out of 5" class="five-stars">5</a></li>
</ul>

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

Step 2:映像|Graphics

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

圖

Step 3:CSS

.star-rating{
list-style: none; /* turn off the default list image bullets*/
margin: 3px; /*I wan't some space around this thing*/
padding: 0px; /* I'm anal. I'm pretty sure OL's have a default padding of 0px, but we'll set it to 0px just to be safe*/
width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
background: url(star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list will appear to have five stars.*/
}

根據代碼我們知道：
去掉了ul的margin和padding以及list-style，定義了高20px寬100px的一個區塊

下來時按鈕元素的製作，下面是css

.star-rating li{
padding:0px; /* no padding at all*/
margin:0px; /* no margin at all*/
/*\*/ /*Backslash hack, this causes IE5 Mac NOT to see this rule*/
float: left; /* for any other browser, we are going to float left, this makes a horizontal list*/
/* */ /* end the IE5 Backslash hack*/
}

這段代碼讓li實現橫向排放，並解決IE5 MAC bug

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

.star-rating li a{
display:block; /* 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 star width*/
height: 20px; /* same as the width*/
text-decoration: none; /* remove the underline from the link*/
text-indent: -9000px; /* indent the text off the screen using a [url=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; /*once again, we don't need any padding*/
background-image:none; /* we will not show the star*/
}

13. .star-rating li a:hover{
14. background: 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. }

下來我們要考慮怎樣才能顯示不同的星級，三星?四星?原理是什麼，我們繼續將背景圖片橫向重複顯示，然後定義a和a:hover的寬度來區分選擇的星級。

下面是css

.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:20px;
}
.star-rating a.two-stars{
left:20px;
}
.star-rating a.two-stars:hover{
width: 40px;
}
.star-rating a.three-stars{
left: 40px;
}
.star-rating a.three-stars:hover{
width: 60px;
}
.star-rating a.four-stars{
left: 60px;
}
.star-rating a.four-stars:hover{
width: 80px;
}
.star-rating a.five-stars{
left: 80px;
}
.star-rating a.five-stars:hover{
width: 100px;
}

到此，這個製作完成

第一個模型中忽視了半星級的情況和無初始的星級，下來我們就是要解決這個問題。

Step 1. 先看看效果|Check it in action

圖1

看看效果

Step 2: The XHTML

<ul class="star-rating">
<li class="current-rating">Currently 3.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

和第一個模型的結構相似，唯一不同的是:

<li class="current-rating">Currently 3.5/5 Stars.</li>

定義初始值

Step 3: The Star Image

我們製作一個有三個星的圖片，第一個星是空值，第二個是要選擇的值，第三個是真實的值。

圖2

Step 4: The CSS, the Magic

.star-rating li.current-rating{
background: url(star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}

他定義了初始值，為了避免繼承容器ul的相對定位，採用position: absolute;每個星的高度為height:30px;別的就是隱藏文本和定義對齊。

空值css

.star-rating{
…
background: url(star_rating.gif) top left repeat-x;
}

選擇值css

.star-rating li a:hover{
background: url(star_rating.gif) left center;
…
}

初始值當然會隨著選擇變動，那麼怎樣實現它的變化呢?

<li class="current-rating" style="width:105px;">Currently 3.5/5 Stars.</li>

看了這段代碼相信你就知道是什麼原因了!那這個width是怎樣計算的呢?

Average Rating|平均值: 3.5
Each Star Width|每個星的寬度: 30px;
Set width to|將寬度設為: 3.5 * 30 = 105px

下面欣賞一下這個新模型吧
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical star rating system

我們用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,
which_id INT NOT NULL,
which_table VARCHAR(255),
used_ips LONGTEXT NULL
);

2.參數檔案引用

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

3.顯示投票程式和更新投票資料程式

<?php
$rating_posted=$_GET['vote'];//pased variable by the the stars value
$id=$_GET['id'];
$query=mysql_query("SELECT total_votes, total_value, used_ips FROM $tableName WHERE id='".$id."' ")or die(" Error: ".mysql_error());
$numbers=mysql_fetch_assoc($query);
$checkIP=unserialize($numbers['used_ips']);
$count=$numbers['total_votes'];//how many votes total
$current_rating=$numbers['total_value'];//total number of rating added together and stored
$sum=$rating_posted+$current_rating;// add together the current vote value and the total vote value
$tense=($count==1) ? "vote" : "votes";//plural form votes/vote
$voted=@mysql_fetch_assoc(@mysql_query("SELECT title FROM $tableName WHERE used_ips LIKE '%".$_SERVER['REMOTE_ADDR']."%' AND id='$id' ")); //Pattern match ip:suggested by Bramus! http://www.php.cn/ - this variable searches through the previous ip address that have voted and returns true or false

if($voted){
echo "<p class=\"rating\">".
"<ul class=\"star-rating\">".
"<li class=\"current-rating\" style=\"width:". @number_format($current_rating/$count,2)*20 ."px;\">Current rating.</li>".
"<li class=\"one-star\">1</li>".
"<li class=\"two-stars\" >2</li>".
"<li class=\"three-stars\">3</li>".
"<li class=\"four-stars\">4</li>".
"<li class=\"five-stars\">5</li>".
"</ul>".
"<p>Rating: <strong>".@number_format($current_rating/$count,2)."</strong> {".$count." ".$tense." cast} <br />You have previously voted.</p></p>";//show the current value of the vote with the current numbers
}else{

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

if($sum==0){
$added=0;//checking to see if the first vote has been tallied
}else{
$added=$count+1;//increment the current number of votes
}

if(is_array($checkIP)){
array_push($checkIP,$_SERVER['REMOTE_ADDR']);//if it is an array i.e. already has entries the push in another value
}else{
$checkIP=array($_SERVER['REMOTE_ADDR']);//for the first entry
}

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

echo "<p class=\"rating\"><p>Rating: <strong>".@number_format($sum/$added,2)."</strong> {".$added." ".$tense." cast} <span>Thank you for your vote!</span></p></p>";//show the updated value of the vote
}else{
?>

4.訪問者評分程式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS: Star Rater Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="styles2-1.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<p class="rating">
<p>How clear was this tutorial?</p>
<ul class="star-rating">
<li class="current-rating" style="width:<?php echo @number_format($current_rating/$count,2)*20 ?>px;">Current rating</li>
<li><a href="<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 1 star out of 5" class="one-star">1</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 2 stars out of 5" class="two-stars" >2</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 3 stars out of 5" class="three-stars" >3</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 4 stars out of 5" class="four-stars" >4</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF'] . "?" .$_GET['section'] . "&id=" . $_GET['id'] . "&vote=1";?>" title="Rate this 5 stars out of 5" class="five-stars" >5</a></li>
</ul>
</body></html>

5.最新評分結果提示

<?php
echo "<p>Rating: <strong>".@number_format($sum/$count,2)."</strong> {".$count." ".$tense." cast}</p></p>";//show the current updated value of the vote
} // end isset get vote
} //end voted true, false
?>

