自訂控制項之星級評價控制項

最近做了一個評價的頁面。上面是星星的 挺可愛 放到我的知識庫裡。調試了好久才成功 星星裡面都是汗水呀。

 

1.Star.ascx

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

<script type="text/javascript" language="javascript">

    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>

<div>
    <asp:Image ID="S1" ImageUrl="../no.JPG" runat="server" />
    <asp:Image ID="S2" ImageUrl="../no.JPG" runat="server" />
    <asp:Image ID="S3" ImageUrl="../no.JPG" runat="server" />
    <asp:Image ID="S4" ImageUrl="../no.JPG" runat="server" />
    <asp:Image ID="S5" ImageUrl="../no.JPG" runat="server" />
    <asp:HiddenField ID="hidScore" Value="" runat="server" />
</div>

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是