HTML版源码下载，原生js实现，无需引用jQuery
/*
CreateUser：China_Lzw
CreateTime：2017年7月20日16:54:53
Description：星星评分插件样式
*/
.jQueryRaty div, .jQueryRaty ul, .jQueryRaty li, .jQueryRaty p{margin: 0;padding: 0;}
.jQueryRaty {color: #666;font: 12px/1.5 Arial; position: relative;}
.jQueryRaty ul{list-style-type: none;margin: 0 10px;}
.jQueryRaty ul, .jQueryRaty span{float: left;display: inline;height: 19px;line-height: 19px;}
.jQueryRaty li{float: left;width: 24px;cursor: pointer;text-indent: -9999px;background: url(/Js/JqueryRaty/images/star.png) no-repeat;}
.jQueryRaty strong{color: #f60;padding-left: 10px;}
.jQueryRaty li.on{background-position: 0 -28px;}
.jQueryRaty p{position: absolute;top: 20px;width: 159px;height: 60px;display: none;background: url(/Js/JqueryRaty/images/icon.gif) no-repeat;padding: 7px 10px 0;}
.jQueryRaty p em{color: #f60;display: block;font-style: normal;}
image
icon.gif
star.png
jQueryRaty.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="jQueryRaty.ascx.cs" Inherits="SasSystem.UserControl.jQueryRaty" %>
<link href="/Js/jQueryRaty/css/style.css" rel="stylesheet" type="text/css" />
<asp:HiddenField ID="jQueryRatyControl_Score" runat="server" Value="-1" />
<asp:Panel ID="jQueryRatyHTML" runat="server">
</asp:Panel>
<script type="text/javascript">
eval("\
document.getElementById('<%=this.jQueryRatyHTML.ClientID %>').innerHTML=(\"<div id=\'jQueryRaty_<%=this.jQueryRatyID %><%=this.ClientID %>\' class=\'jQueryRaty\'><ul><li><a href=\'javascript:;\'>1</a></li><li><a href=\'javascript:;\'>2</a></li><li><a href=\'javascript:;\'>3</a></li><li><a href=\'javascript:;\'>4</a></li><li><a href=\'javascript:;\'>5</a></li></ul><span></span><p></p></div>\");\
var jQueryRaty_<%=this.jQueryRatyID %>Star = document.getElementById('jQueryRaty_<%=this.jQueryRatyID %><%=this.ClientID %>');\
var jQueryRaty_<%=this.jQueryRatyID %>Li = jQueryRaty_<%=this.jQueryRatyID %>Star.getElementsByTagName('li');\
var jQueryRaty_<%=this.jQueryRatyID %>Ul = jQueryRaty_<%=this.jQueryRatyID %>Star.getElementsByTagName('ul')[0];\
var jQueryRaty_<%=this.jQueryRatyID %>Span = jQueryRaty_<%=this.jQueryRatyID %>Star.getElementsByTagName('span')[0];\
var jQueryRaty_<%=this.jQueryRatyID %>P = jQueryRaty_<%=this.jQueryRatyID %>Star.getElementsByTagName('p')[0];\
var jQueryRaty_<%=this.jQueryRatyID %>Index = jQueryRaty_<%=this.jQueryRatyID %>iScore = jQueryRaty_<%=this.jQueryRatyID %>iStar = 0;\
var jQueryRaty_<%=this.jQueryRatyID %>Enable = '<%=this.Enable %>', jQueryRaty_<%=this.jQueryRatyID %>Score = '<%=this.Score %>';\
var jQueryRaty_<%=this.jQueryRatyID %>Msg =<%=this.TipArray %>;\
for (jQueryRaty_<%=this.jQueryRatyID %>Index = 1; jQueryRaty_<%=this.jQueryRatyID %>Index <= jQueryRaty_<%=this.jQueryRatyID %>Li.length; jQueryRaty_<%=this.jQueryRatyID %>Index++) {\
jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index - 1].index = jQueryRaty_<%=this.jQueryRatyID %>Index;\
jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index - 1].onmouseover = function() {\
if (jQueryRaty_<%=this.jQueryRatyID %>Enable!='True') { return false; }\
jQueryRaty_<%=this.jQueryRatyID %>fnPoint(this.index);\
if ('<%=this.ShowTips %>' == 'True') {\
jQueryRaty_<%=this.jQueryRatyID %>P.style.display = 'block';\
jQueryRaty_<%=this.jQueryRatyID %>P.style.left = jQueryRaty_<%=this.jQueryRatyID %>Ul.offsetLeft + this.index * this.offsetWidth - 104 + 'px';\
jQueryRaty_<%=this.jQueryRatyID %>P.innerHTML = '<em><b>' + this.index + '</b> 分 ' + jQueryRaty_<%=this.jQueryRatyID %>Msg[this.index - 1].match(/(.+)\\|/)[1] + '</em>' + jQueryRaty_<%=this.jQueryRatyID %>Msg[this.index - 1].match(/\\|(.+)/)[1]\
}\
};\
jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index - 1].onmouseout = function() {\
if (jQueryRaty_<%=this.jQueryRatyID %>Enable!='True') { return false; }\
jQueryRaty_<%=this.jQueryRatyID %>fnPoint();\
if ('<%=this.ShowTips %>' == 'True') {\
jQueryRaty_<%=this.jQueryRatyID %>P.style.display = 'none'\
}\
};\
jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index - 1].onclick = function() {\
if (jQueryRaty_<%=this.jQueryRatyID %>Enable!='True') { return false; }\
jQueryRaty_<%=this.jQueryRatyID %>iStar = this.index;\
if ('<%=this.ShowTips %>' == 'True') {\
jQueryRaty_<%=this.jQueryRatyID %>P.style.display = 'none';\
jQueryRaty_<%=this.jQueryRatyID %>Span.innerHTML = '<strong>' + (this.index) + ' 分</strong> (' + jQueryRaty_<%=this.jQueryRatyID %>Msg[this.index - 1].match(/\\|(.+)/)[1] + ')';\
}\
document.getElementById('<%=this.jQueryRatyControl_Score.ClientID %>').value=this.index;\
if (typeof JQueryRaty<%=this.jQueryRatyID %>CallBack != 'undefined' && JQueryRaty<%=this.jQueryRatyID %>CallBack instanceof Function) {\
JQueryRaty<%=this.jQueryRatyID %>CallBack(this.index);\
}\
}\
}\
if (jQueryRaty_<%=this.jQueryRatyID %>Score > 0) {\
jQueryRaty_<%=this.jQueryRatyID %>fnSetScore(jQueryRaty_<%=this.jQueryRatyID %>Score);\
}\
function jQueryRaty_<%=this.jQueryRatyID %>fnSetScore(_score) {\
for (jQueryRaty_<%=this.jQueryRatyID %>Index = 0; jQueryRaty_<%=this.jQueryRatyID %>Index < jQueryRaty_<%=this.jQueryRatyID %>Li.length; jQueryRaty_<%=this.jQueryRatyID %>Index++) { jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index].className = jQueryRaty_<%=this.jQueryRatyID %>Index < _score ? 'on' : '' };\
if ('<%=this.ShowTips %>' == 'True') {\
jQueryRaty_<%=this.jQueryRatyID %>Span.innerHTML = '<strong>' + (_score) + ' 分</strong> (' + jQueryRaty_<%=this.jQueryRatyID %>Msg[_score - 1].match(/\\|(.+)/)[1] + ')';\
}\
jQueryRaty_<%=this.jQueryRatyID %>Index = jQueryRaty_<%=this.jQueryRatyID %>iStar = jQueryRaty_<%=this.jQueryRatyID %>iScore = _score;\
}\
function jQueryRaty_<%=this.jQueryRatyID %>fnPoint(iArg) {\
jQueryRaty_<%=this.jQueryRatyID %>iScore = iArg || jQueryRaty_<%=this.jQueryRatyID %>iStar;\
for (jQueryRaty_<%=this.jQueryRatyID %>Index = 0; jQueryRaty_<%=this.jQueryRatyID %>Index < jQueryRaty_<%=this.jQueryRatyID %>Li.length; jQueryRaty_<%=this.jQueryRatyID %>Index++) { jQueryRaty_<%=this.jQueryRatyID %>Li[jQueryRaty_<%=this.jQueryRatyID %>Index].className = jQueryRaty_<%=this.jQueryRatyID %>Index < jQueryRaty_<%=this.jQueryRatyID %>iScore ? 'on' : '' };\
}\
");
</script>
<%--
请在调用页面实现该方法：Score为评分值
function JQueryRaty{此处为指定的参数jQueryRatyID }CallBack(Score){}
--%>
jQueryRaty.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SasSystem.UserControl
{
public partial class jQueryRaty : System.Web.UI.UserControl
{
/// <summary>
/// 同一个页面中出现多次控件使用时，需指定当前控件唯一的标识
/// </summary>
public string jQueryRatyID
{
set { ViewState["jQueryRatyID"] = value; }
get
{
if (ViewState["jQueryRatyID"] != null) { return ViewState["jQueryRatyID"].ToString(); }
else { return ""; }
}
}
/// <summary>
/// true/false（是否允许评分）
/// </summary>
public bool Enable
{
set { ViewState["Enable"] = value; }
get
{
if (ViewState["Enable"] != null) { return Convert.ToBoolean(ViewState["Enable"]); }
else { return true; }
}
}
/// <summary>
/// 1-5（设置评分值）
/// </summary>
public int Score
{
set { ViewState["Score"] = value; }
get
{
if (ViewState["Score"] != null) { return Convert.ToInt32(ViewState["Score"]); }
else { return -1; }
}
}
/// <summary>
/// string（1-5分的提示内容 格式：[\"很不满意|差得太离谱，与卖家描述的严重不符，非常不满\",\"不满意|部分有破损，与卖家描述的不符，不满意\",\"一般|质量一般，没有卖家描述的那么好\",\"满意|质量不错，与卖家描述的基本一致，还是挺满意的\",\"非常满意|质量非常好，与卖家描述的完全一致，非常满意\"]）
/// </summary>
public string TipArray
{
set { ViewState["TipArray"] = value; }
get
{
if (ViewState["TipArray"] != null) { return ViewState["TipArray"].ToString(); }
else { return "[]"; }
}
}
/// <summary>
/// true/false（是否显示提示内容 提示：TipArray必须在ShowTips之前赋值，否则ShowTips=false）
/// </summary>
public bool ShowTips
{
set
{
if (!string.IsNullOrEmpty(TipArray))
{ ViewState["ShowTips"] = value; }
else
{ ViewState["ShowTips"] = false; }
}
get
{
if (ViewState["ShowTips"] != null && !string.IsNullOrEmpty(TipArray) && !TipArray.Equals("[]")) { return Convert.ToBoolean(ViewState["ShowTips"]); }
else { return false; }
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 获取当前评分值
/// </summary>
/// <returns></returns>
public int GetScore()
{
return Convert.ToInt32(this.jQueryRatyControl_Score.Value);
}
}
}
jQueryRatyDemo.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQueryRatyDemo.aspx.cs" Inherits="SasSystem.jQueryRatyDemo" %>
<%@ Register Src="~/UserControl/jQueryRaty.ascx" TagPrefix="uc1" TagName="jQueryRaty" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生Js星星评分，无需引用jQuery</title>
<style type="text/css">
.RatyContent {
width: 80%;
min-height: 100px;
margin: 0px auto;
border-bottom: 1px solid #666;
}
.jQuryRatyContent div:last-child {
border-bottom: none;
}
.RatyContent p {
color: #666;
font: 12px/1.5 Arial;
}
.RatyContent p span {
color: #de1d1d;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="jQuryRatyContent">
<div class="RatyContent">
<p>星星评分控件参数说明：</p>
<p><span>jQueryRatyID</span>：（同一个页面中出现多次控件使用时，需指定当前控件唯一的标识）</p>
<p><span>Enable</span>：true/false（是否允许评分）</p>
<p><span>Score</span>：1-5（设置评分值）</p>
<p><span>TipArray</span>：string（1-5分的提示内容 格式：[\"很不满意|差得太离谱，与卖家描述的严重不符，非常不满\",\"不满意|部分有破损，与卖家描述的不符，不满意\",\"一般|质量一般，没有卖家描述的那么好\",\"满意|质量不错，与卖家描述的基本一致，还是挺满意的\",\"非常满意|质量非常好，与卖家描述的完全一致，非常满意\"]）</p>
<p><span>ShowTips</span>：false/true（是否显示提示内容 提示：TipArray必须在ShowTips之前赋值，否则ShowTips=false）</p>
<p><span>GetScore()</span>：1-5（后台获取当前评分值）</p>
<p><span>Js CallBack</span>：function（Js获取评分值回调函数 如:jQueryRatyID=jr1；则回调js为function JQueryRatyjr1CallBack(Score) { alert(Score); }）</p>
</div>
<div class="RatyContent">
<p>不设置评分，允许打分，并显示说明内容</p>
<uc1:jQueryRaty ID="jQueryRaty1" runat="server" jQueryRatyID="jr1" Enable="true" TipArray='[\"很不满意|差得太离谱，与卖家描述的严重不符，非常不满\",\"不满意|部分有破损，与卖家描述的不符，不满意\",\"一般|质量一般，没有卖家描述的那么好\",\"满意|质量不错，与卖家描述的基本一致，还是挺满意的\",\"非常满意|质量非常好，与卖家描述的完全一致，非常满意\"]' ShowTips="true" />
</div>
<div class="RatyContent">
<p>设置评分，允许打分，并显示说明内容</p>
<uc1:jQueryRaty ID="jQueryRaty2" runat="server" jQueryRatyID="jr2" Enable="true" TipArray='[\"很不满意|差得太离谱，与卖家描述的严重不符，非常不满\",\"不满意|部分有破损，与卖家描述的不符，不满意\",\"一般|质量一般，没有卖家描述的那么好\",\"满意|质量不错，与卖家描述的基本一致，还是挺满意的\",\"非常满意|质量非常好，与卖家描述的完全一致，非常满意\"]' ShowTips="true" Score="3" />
</div>
<div class="RatyContent">
<p>设置评分，允许打分，不显示说明内容</p>
<uc1:jQueryRaty ID="jQueryRaty3" runat="server" jQueryRatyID="jr3" Enable="true" TipArray="123" ShowTips="false" Score="2" />
</div>
<div class="RatyContent">
<p>设置评分，禁止打分，并显示说明内容</p>
<uc1:jQueryRaty ID="jQueryRaty4" runat="server" jQueryRatyID="jr4" Enable="false" TipArray='[\"很不满意|差得太离谱，与卖家描述的严重不符，非常不满\",\"不满意|部分有破损，与卖家描述的不符，不满意\",\"一般|质量一般，没有卖家描述的那么好\",\"满意|质量不错，与卖家描述的基本一致，还是挺满意的\",\"非常满意|质量非常好，与卖家描述的完全一致，非常满意\"]' ShowTips="true" Score="5" />
</div>
<div class="RatyContent">
<p>设置评分，禁止打分，不显示说明内容</p>
<uc1:jQueryRaty ID="jQueryRaty5" runat="server" jQueryRatyID="jr5" Enable="false" ShowTips="true" Score="3" />
</div>
</div>
</form>
<script type="text/javascript">
function JQueryRatyjr1CallBack(Score) { }
function JQueryRatyjr2CallBack(Score) { }
function JQueryRatyjr3CallBack(Score) { }
</script>
</body>
</html>
jQueryRatyDemo.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace SasSystem
{
public partial class jQueryRatyDemo : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}
