ASP.NET 原生js星星评分用户控件版
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" %><%--请在调用页面实现该方法: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 { /// /// 同一个页面中出现多次控件使用时,需指定当前控件唯一的标识 /// public string jQueryRatyID { set { ViewState["jQueryRatyID"] = value; } get { if (ViewState["jQueryRatyID"] != null) { return ViewState["jQueryRatyID"].ToString(); } else { return ""; } } } /// /// true/false(是否允许评分) /// public bool Enable { set { ViewState["Enable"] = value; } get { if (ViewState["Enable"] != null) { return Convert.ToBoolean(ViewState["Enable"]); } else { return true; } } } /// /// 1-5(设置评分值) /// public int Score { set { ViewState["Score"] = value; } get { if (ViewState["Score"] != null) { return Convert.ToInt32(ViewState["Score"]); } else { return -1; } } } /// /// string(1-5分的提示内容 格式:[\"很不满意|差得太离谱,与卖家描述的严重不符,非常不满\",\"不满意|部分有破损,与卖家描述的不符,不满意\",\"一般|质量一般,没有卖家描述的那么好\",\"满意|质量不错,与卖家描述的基本一致,还是挺满意的\",\"非常满意|质量非常好,与卖家描述的完全一致,非常满意\"]) /// public string TipArray { set { ViewState["TipArray"] = value; } get { if (ViewState["TipArray"] != null) { return ViewState["TipArray"].ToString(); } else { return "[]"; } } } /// /// true/false(是否显示提示内容 提示:TipArray必须在ShowTips之前赋值,否则ShowTips=false) /// 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) { } /// /// 获取当前评分值 /// /// 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" %>
原生Js星星评分,无需引用jQuery