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

网友投稿 700 2022-11-16

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

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

星星评分控件参数说明:

jQueryRatyID:(同一个页面中出现多次控件使用时,需指定当前控件唯一的标识)

Enable:true/false(是否允许评分)

Score:1-5(设置评分值)

TipArray:string(1-5分的提示内容 格式:[\"很不满意|差得太离谱,与卖家描述的严重不符,非常不满\",\"不满意|部分有破损,与卖家描述的不符,不满意\",\"一般|质量一般,没有卖家描述的那么好\",\"满意|质量不错,与卖家描述的基本一致,还是挺满意的\",\"非常满意|质量非常好,与卖家描述的完全一致,非常满意\"])

ShowTips:false/true(是否显示提示内容 提示:TipArray必须在ShowTips之前赋值,否则ShowTips=false)

GetScore():1-5(后台获取当前评分值)

Js CallBack:function(Js获取评分值回调函数 如:jQueryRatyID=jr1;则回调js为function JQueryRatyjr1CallBack(Score) { alert(Score); })

不设置评分,允许打分,并显示说明内容

设置评分,允许打分,并显示说明内容

设置评分,允许打分,不显示说明内容

设置评分,禁止打分,并显示说明内容

设置评分,禁止打分,不显示说明内容

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

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:hdoj 1166 敌兵布阵
下一篇:编写一个简单的智能合约
相关文章

 发表评论

暂时没有评论,来抢沙发吧~