zoukankan      html  css  js  c++  java
  • Web用户控件开发--星型评分控件

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

    一:贴几张测试图片先:

    image

    image

    image

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

    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;
                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;
  • 相关阅读:
    WPF中如何确定一个页面是否是在浏览器中承载的
    WPF中Image控件的Source属性
    WPF中如何使用代码操作数据模板生成的控件
    WPF中连续旋转时角度错误的问题
    在没有 IIS 的条件下运行 ASMX(转自 msdn)
    在 ASP.NET 2.0 中上载文件 —— 解决文件大小限制
    javascript专题:如何构建自己的js库
    WPF4多点触摸事件
    事件冒泡
    《精通javascript》几个简单的函数(一)
  • 原文地址:https://www.cnblogs.com/hanzhaoxin/p/4058247.html
Copyright © 2011-2022 走看看