DIV CSS 佈局教程網

1：功能描述
1）最好是若干個星星組成，用戶投票時候只要鼠標點擊星星就可以實現投票，可以自定義星星個數
2）未投票、投票中、完成投票，星星的樣式不同
3）每個星星的都可以自定義提示 比如 “差” “一般” “還好” “不錯”
4）完成投票後，動畫展示投票結果並且不可再投票

2：思路描述
1、3）使用循環，最大值是星星的個數，每次循環添加一條<a></a>的語句，這條超鏈接通過Class指定星星樣式，通過title指定鼠標移到時顯示的文字，循環結束後通過Jquery的append函數添加到目標內容區
2）通過Jquery的addClass、removeClass 方法可以動態地調整星星的樣式，值得注意的是在打分的時候，鼠標移動到某個位置的星星，之前的星星都要添加上樣式，可以使用Jquery的prevAll()獲得當前位置之前的星星的引用 然後add($(this))來獲得當前位置星星的引用.
打分之前：

打分之中：

打分之後:

4）根據目標區子節點裡面被選擇星星的位置+1來產生分數 children().index($(this)) 然後該分數通過ajax與服務器交互，返回評價分，接著清空目標區內容，添加<span></span>背景圖片設置成星星圖片，在水平位置重復，就可以根據星星的寬度*平均分決定該<span></span>的最終寬度，並使用animate實現動畫效果.

3：實現代碼
1)javaScript代碼
為了方便，我把它做成了半插件形式， AJAX交互還是寫了自己的邏輯進去,代碼如下
代碼如下:
(function ($) {
$.fn.Rate = function (options) {
options = options || {};
var StarTip = options.StarTip || ['不值一看', '平平無奇', '信息靠譜', '對我很有幫助', '極品信息'];
var ItemAmount = options.ItemAmount || 5;
var UnRateClassName = options.UnRateClassName || 'star';
var RateClassName = options.RateClassName || 'star_on';
var originalStateClassName = options.originalStateClassName || 'OriginalState';
var PostURL = options.PostURL || '';
var DoAfterPost = options.DoAfterPost || function () { };
var userID = options.userID || '';
var messageID = options.messageID || '';
var content = $(this);
var starList = '';
for (var i = 0; i < ItemAmount; i++) {
starList += ['<a href="#" class="', UnRateClassName, '" title="', StarTip[i], '"></a>'].join('');
}
content.empty().append(starList).find('a').hover(function () {
$(this).prevAll().add($(this)).addClass(RateClassName);
}, function () {
$(this).prevAll().add($(this)).removeClass(RateClassName);
}).one('click', function () {
var score = parseInt(content.children().index($(this))) + 1;
$.ajax({
type: "POST",
url: PostURL,
data: "{messageID:" + messageID + ",userID:" + userID + ",Score:" + score + "}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var result = (jQuery.parseJSON(msg.d)).SuccessFlag;
DoAfterPost(result);
content.empty().removeClass();
$('<span></span>').addClass(originalStateClassName).prependTo(content).animate({ 'width': 16 * result + 'px', 'opacity': 1 }, 'slow');
}
});
});

};

})(jQuery);

參數說明:

參數名稱 描述 默認值 參數類型 StarTip 鼠標移到星星上的文本提示 ['不值一看', '平平無奇', '信息靠譜', '對我很有幫助', '極品信息'] javascript數組
[tip]:數組元素個數必須要和星星個數一致 ItemAmount 星星的個數 5 數字 UnRateClassName 還沒投票時星星的樣式名稱 'star' 字符串 RateClassName 投票中，鼠標移過時星星的樣式 'star_on' 字符串 originalStateClassName 投票完成後，結果展示時星星的樣式 'OriginalState' 字符串 PostURL ajax交互時，url參數 '' 字符串 DoAfterPost 投票完成後，在投票頁面使用自定義方法 '' 字符串 userID ajax交互時用戶ID，防止重復投票 '' 數字 messageID ajax交互時文章ID '' 數字2）前端引用代碼
代碼如下:
$('#left table tr:eq(1) td:eq(0) #StarRate').Rate({
PostURL: 'http://www.cnblogs.com/ServiceProvider/MessageInfoService.asmx/VoteMessage',
userID: UserID,
messageID: messageID,
DoAfterPost: function (data) {
if (data > 0) {
$(voteResultContext).html(data);
}
else {
ProcessNoticeShow('您已經投過票了');
}
}
});
}

4）樣式表
代碼如下:
.star{ height:16px; width:16px;float:left; background:url(../images/star.gif) no-repeat 0 0;}
.star_on{ background: url(../images/star.gif) no-repeat 0 -32px !important;}
.OriginalState{ width:0px;background: url(../images/star.gif) repeat-x 0 -16px !important;opacity:0;height:16px; display:block;}

3）服務器端代碼
代碼如下:
/// <summary>
/// 對信息進行投票，返回值大於0代表成功
/// </summary>
/// <param name="messageID">信息ID</param>
/// <param name="userID">用戶ID</param>
/// <param name="Score">得分</param>
/// <returns></returns>
[WebMethod]
public string VoteMessage(int messageID, int userID ,int Score)
{
SQLCMD = new SqlCommand("MessageInfo_Add_VoteUsefull_MessageIDUserID", SQLConnect);
SQLCMD.CommandType = CommandType.StoredProcedure;
SQLCMD.Parameters.Add(new SqlParameter("@messageID",SqlDbType.Int));
SQLCMD.Parameters["@messageID"].Value = messageID;
SQLCMD.Parameters.Add(new SqlParameter("@userID",SqlDbType.Int));
SQLCMD.Parameters["@userID"].Value = userID;
SQLCMD.Parameters.Add(new SqlParameter("@Score", SqlDbType.Int));
SQLCMD.Parameters["@Score"].Value = Score;
float SuccessFlag = basicSQLAccess.ExeScalarReturnValueFloat(SQLCMD);
Hashtable HTFlag = new Hashtable();
HTFlag.Add("SuccessFlag", SuccessFlag);
return JsonConvert.SerializeObject(HTFlag);
}

有關JsonConvert.SerializeObject的內容介紹以及與前端Jquery交互 請看我之前的文章 <通過Jquery遍歷Json的兩種數據結構>
4:下載
壓縮包包括 css、JS、還有星星圖片
猛擊我下載