本文中分享一个实现简单,使用方便的星型评分控件。

一:贴几张测试图片先:

二、星型评分控件的实现:

RatingBar.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RatingBar.ascx.cs" Inherits="UserControls.Controls.RatingBar" %>

<style type="text/css">

        .rating {

            float:left;

        }

        .rating:not(:checked) > input {

            position:absolute;

            top:-9999px;

            clip:rect(0,0,0,0);

        }

 

        .rating:not(:checked) > label {

            float:right;

            width:1em;

            padding:0 .1em;

            overflow:hidden;

            white-space:nowrap;

            cursor:pointer;

            font-size:150%;

            line-height:1.2;

            color:#ddd;

            text-shadow:1px 1px #bbb, 2px 2px #666, .1em .1em .2em rgba(0,0,0,.5);

        }

 

        .rating:not(:checked) > label:before {

            content: '★ ';

        }

 

        .rating > input:checked ~ label {

            color: #f70;

            text-shadow:1px 1px #c60, 2px 2px #940, .1em .1em .2em rgba(0,0,0,.5);

        }

 

        .rating:not(:checked) > label:hover,

        .rating:not(:checked) > label:hover ~ label {

            color: gold;

            text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);

        }

 

        .rating > input:checked + label:hover,

        .rating > input:checked + label:hover ~ label,

        .rating > input:checked ~ label:hover,

        .rating > input:checked ~ label:hover ~ label,

        .rating > label:hover ~ input:checked ~ label {

            color: #ea0;

            text-shadow:1px 1px goldenrod, 2px 2px #B57340, .1em .1em .2em rgba(0,0,0,.5);

        }

 

        .rating > label:active {

            position:relative;

            top:2px;

            left:2px;

        }

    </style>

<span class="rating">

    <input type="radio" id="star5" name="rating" value="5" runat="server" /><label for="<%=this.ClientID + "_star5"%>"

        title="5分">5 stars</label>

    <input type="radio" id="star4" name="rating" value="4" runat="server" /><label for="<%=this.ClientID + "_star4"%>"

        title="4分">4 stars</label>

    <input type="radio" id="star3" name="rating" value="3" runat="server" /><label for="<%=this.ClientID + "_star3"%>"

        title="3分">3 stars</label>

    <input type="radio" id="star2" name="rating" value="2" runat="server" /><label for="<%=this.ClientID + "_star2"%>"

        title="2分">2 stars</label>

    <input type="radio" id="star1" name="rating" value="1" runat="server" /><label for="<%=this.ClientID + "_star1"%>"

        title="1分">1 star</label>

</span>

RatingBar.ascx.cs:

using System;

 

namespace UserControls.Controls

{

    public partial class RatingBar : System.Web.UI.UserControl

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            SyncInterfaceByReadOnlyProperties();

        }

 

        public Grade Value

        {

            get

            {

                if (star5.Checked)

                {

                    return Grade.Five;

                }

                else if (star4.Checked)

                {

                    return Grade.Four;

                }

                else if (star3.Checked)

                {

                    return Grade.Three;

                }

                else if (star2.Checked)

                {

                    return Grade.Two;

                }

                else if (star1.Checked)

                {

                    return Grade.One;

                }

                else

                {

                    return Grade.Zero;

                }

            }

            set

            {

                star5.Checked = false;

                star4.Checked = false;

                star3.Checked = false;

                star2.Checked = false;

                star1.Checked = false;

                switch (value)

                {

                    case Grade.Five:

                        star5.Checked = true;

                        break;

                    case Grade.Four:

                        star4.Checked = true;

                        break;

                    case Grade.Three:

                        star3.Checked = true;

                        break;

                    case Grade.Two:

                        star2.Checked = true;

                        break;

                    case Grade.One:

                        star1.Checked = true;

                        break;

                    default:

                        break;

                }

            }

        }

 

        public bool ReadOnly

        {

            set

            {

                this.ViewState["ReadOnly"] = value;

                SyncInterfaceByReadOnlyProperties();

            }

            get

            {

                object obj = this.ViewState["ReadOnly"];

                if (obj == null)

                {

                    return false;

                }

                else

                {

                    return (bool)obj;

                }

            }

        }

 

        private void SyncInterfaceByReadOnlyProperties()

        {

            if (this.ReadOnly)

            {

                star1.Attributes.Add("disabled", "disabled");

                star2.Attributes.Add("disabled", "disabled");

                star3.Attributes.Add("disabled", "disabled");

                star4.Attributes.Add("disabled", "disabled");

                star5.Attributes.Add("disabled", "disabled");

            }

            else

            {

                star1.Attributes.Remove("disabled");

                star2.Attributes.Remove("disabled");

                star3.Attributes.Remove("disabled");

                star4.Attributes.Remove("disabled");

                star5.Attributes.Remove("disabled");

            }

        }

    }

    public enum Grade

    {

        Zero = 0,

        One = 1,

        Two = 2,

        Three = 3,

        Four = 4,

        Five = 5

    }

}

三、控件使用演示:

为RatingBar控件赋值:

RatingBar1.Value = Grade.Three;

打印RatingBar控件的值:

ClientScript.RegisterStartupScript(this.GetType(), null, string.Format("<script>alert('{0}');</script>", RatingBar1.Value));

RatingBar控件的ReadOnly属性(属性值取反):

RatingBar1.ReadOnly = !RatingBar1.ReadOnly;

Web用户控件开发--星型评分控件的更多相关文章

  1. UWP开发---DIY星级评分控件

    一,需求来源 在开发韩剧TV UWP过程中,遇到了星级评分的控件问题,在安卓和html中很容易用现有的轮子实现星级评分,搜索了一下目前UWP还未有相关文章,在WPF的一篇文章中使用Photo shop ...

  2. iOS- 非整星的评分控件(支持小数)

    概述 订单评论里实现星级评分控件: 简单整星评价与非整星的精评价. 详细 代码下载:http://www.demodashi.com/demo/10711.html 现在很多应用都有评分功能. 有了订 ...

  3. WinForm控件开发总结目录

    WinForm控件开发总结(一)------开篇 WinForm控件开发总结(二)------使用和调试自定义控件 WinForm控件开发总结(三)------认识WinForm控件常用的Attrib ...

  4. Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率..

    Atitit.hybrid混合型应用 浏览器插件,控件的实现方式 浏览器运行本地程序的解决方案大的总结---提升用户体验and开发效率.. 1. hybrid App 1 1.1. Hybrid Ap ...

  5. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  6. VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程

      开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是总结了网上好多人写的文章,我只是汇总一下,加上部分自己的东西,在这里感谢所有在网 ...

  7. 最全的基于MFC的ActiveX控件开发教程

    浏览器插件之ActiveX开发(一) 一般的Web应用对于浏览器插件能不使用的建议尽量不使用,因为其涉及到安全问题以及影响用户安装(或自动下载注册安装)体验问题.在有特殊需求(如涉及数据安全的金融业务 ...

  8. ActiveX控件开发

    VC2005从开发MFC ActiveX ocx控件到发布到.net网站的全部过程 开篇语:最近在弄ocx控件发布到asp.net网站上使用,就是用户在使用过程中,自动下载安装ocx控件.(此文章也是 ...

  9. MFC-[转]基于MFC的ActiveX控件开发

    作者:lidan | 出处:博客园 | 2012/3/13 16:10:34 | 阅读22次 ActiveX 控件是基于组件对象模型 (COM) 的可重用软件组件,广泛应用于桌面及Web应用中.在VC ...

随机推荐

  1. Cocon90.Db调用方法

    Cocon90.DB 使用说明 开源库:https://github.com/Cocon90/Cocon90.Db Sqlite位置:https://www.nuget.org/packages/Co ...

  2. AT&T汇编和Intel汇编语法主要区别

    AT&T使用$表示立即操作数,而Intel的立即操作数是不需要界定的.因此,使用AT&T语法引用十进制值4时,使用$4,使用Intel语法时只需使用4.   AT&T在寄存器名 ...

  3. IntelliJ IDEA安装主题详细步骤

    主题下载网址:http://color-themes.com/?view=index 本文测试的软件版本:IntelliJ IDEA 2016.1.2 一.下载主题包   1 1. 打开上述网址(ht ...

  4. python unittest case运行失败重试

    因为使用unittest进行管理case的运行.有时case因为偶然因素,会随机的失败.通过重试机制能够补充保持case的稳定性.查阅资料后发现,python的unittest自身无失败重试机制,可以 ...

  5. angularjs的config和interceptor - session注入

    config 这个要从config的正确使用说起,也许你想在config某个provider的时候注入$rootscope, 但是这是不允许的,我们细看下面的特性 session注入 每个请求自带se ...

  6. Spark的运行模式(2)--Yarn-Cluster和Yarn-Client

    3. Yarn-Cluster Yarn是一种统一资源管理机制,可以在上面运行多种计算框架.Spark on Yarn模式分为两种:Yarn-Cluster和Yarn-Client,前者Driver运 ...

  7. Python定向爬虫实战

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7019963.html 一:requests模块介绍 requests是第三方http库,可以十分方便地实现py ...

  8. Java IO的应用之实现大文件复制

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5827481.html  用IO进行文件复制,实质就是用FileInputStream链接要复制的文件,按一定规 ...

  9. Java的一个关于“星球”的枚举

    public enum Planet { /** * 水星 */ MERCURY(3.302e+23, 2.439e6), /** * 金星 */ VENUS(4.869e+24, 6.052e6), ...

  10. V-rep学习笔记:Reflexxes Motion Library 3

    路径规划 VS 轨迹规划 轨迹规划的目的是将输入的简单任务描述变为详细的运动轨迹描述.注意轨迹和路径的区别:Trajectory refers to a time history of positio ...