自定义控件之星级评价控件

来源：互联网发布：淘宝自己的店铺在哪里编辑：程序博客网时间：2024/04/29 08:03

最近做了一个评价的页面。上面是星星的挺可爱放到我的知识库里。调试了好久才成功星星里面都是汗水呀。

1.Star.ascx

<%@ Control Language="C#" AutoEventWireup="true" Codebehind="Star.ascx.cs"
Inherits="**********" %>

    function <%=this.ClientID %>_mouseOver(image){
        var id = image.id.substr(image.id.length-1,1);
        var type = image.id.substr(image.id.length-2,1);
        if(id != 0)
        {
            for(i=id;i>0;i--)
            {
               var image1 = document.getElementById(image.id.substr(0, image.id.length-2)+ type + i);
                image1.src = "../yes.JPG";
            }
        }
    }

    function <%=this.ClientID %>_mouseOut(image){
        var type = image.id.substr(image.id.length-2,1);
     var hid1 = '<%=hidScore.ClientID %>';
        var hid2 = document.getElementById(hid1);
        var selectID = hid2.value;
        if(hid2.value == "")
        {
            selectID = 0;
        }
        for(i=1;i<6;i++)
        {
           var image1 = document.getElementById(image.id.substr(0, image.id.length-2)+ type + i)
            if( i <= selectID)
        {
                image1.src = "../yes.JPG";
            }
        else
        {
                image1.src = "../no.JPG";
            }
        }
    }

    function <%=this.ClientID %>_onClick(image)
    {
        var id = image.id.substr(image.id.length-1,1);
        var type = image.id.substr(image.id.length-2,1);
        if(id != 0)
        {
            var hid1 = '<%=hidScore.ClientID %>';
            var hid2 = document.getElementById(hid1);
            hid2.value = id;

            for(i=1;i<6;i++)
            {
                var image1 = document.getElementById(image.id.substr(0, image.id.length-2)+ type + i);
                if (i <= id) {
                    image1.src = "../yes.JPG";
                }
                else {
                    image1.src = "../no.JPG";
                }
            }
            <%=this.ClientID%>_clickFlg = true;
        }
    }
</script>

2.CommentStar.ascx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace ********{
    public partial class Star : System.Web.UI.UserControl
    {
        public string Score
        {
            get { return this.hidScore.Value; }
            set { this.hidScore.Value = value.ToString(); }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            S1.Attributes.Add("onmouseover", this.ClientID + "_mouseOver(this)");
            S1.Attributes.Add("onmouseout", this.ClientID + "_mouseOut(this)");
            S1.Attributes.Add("onclick", this.ClientID + "_onClick(this)");

            S2.Attributes.Add("onmouseover", this.ClientID + "_mouseOver(this)");
            S2.Attributes.Add("onmouseout", this.ClientID + "_mouseOut(this)");
            S2.Attributes.Add("onclick", this.ClientID + "_onClick(this)");

            S3.Attributes.Add("onmouseover", this.ClientID + "_mouseOver(this)");
            S3.Attributes.Add("onmouseout", this.ClientID + "_mouseOut(this)");
            S3.Attributes.Add("onclick", this.ClientID + "_onClick(this)");

            S4.Attributes.Add("onmouseover", this.ClientID + "_mouseOver(this)");
            S4.Attributes.Add("onmouseout", this.ClientID + "_mouseOut(this)");
            S4.Attributes.Add("onclick", this.ClientID + "_onClick(this)");

            S5.Attributes.Add("onmouseover", this.ClientID + "_mouseOver(this)");
            S5.Attributes.Add("onmouseout", this.ClientID + "_mouseOut(this)");
            S5.Attributes.Add("onclick", this.ClientID + "_onClick(this)");
        }
    }
}

3.调用的画面：

a.要先注册一下：

<%@ Register Src="~/Star.ascx" TagPrefix="c1" TagName="Star" %>

b.使用的地方：

<c1:Star ID="csServiceRating" runat="server" />

4.备注：

yes.JPG是

no.JPG是