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

ASP.NET 原生js星星评分用户控件版

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)
        {

        }
    }
}

ASP.NET 原生js星星评分用户控件版

继续阅读

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

jquery_126_demo

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条