AJAX擴充控制項Rating(等級控制項)的使用方法總結

來源:互聯網
上載者:User

如所示的等級控制項(這個控制項主要指定樣式):

頁面代碼:

<head runat="server"><br /> <title>無標題頁</title><br /> <mce:style type ="text/css"><!--<br /> .ratingStar<br /> {<br /> font-size:0pt;<br /> width:15px;<br /> height:12px;<br /> padding:1px;<br /> margin:1px;<br /> cursor:pointer;<br /> display:block;<br /> background-repeat:no-repeat;<br /> background-color:#99CC99;<br /> }<br /> .filledRatingStar<br /> {<br /> background-image:url(image/star1.gif);<br /> }<br /> .emptyRatingStar<br /> {<br /> background-image:url(image/star2.gif);<br /> }<br /> .savedRatingStar<br /> {<br /> background-image:url(image/star3.gif);<br /> }</p><p>--></mce:style><style type ="text/css" mce_bogus="1"> .ratingStar<br /> {<br /> font-size:0pt;<br /> width:15px;<br /> height:12px;<br /> padding:1px;<br /> margin:1px;<br /> cursor:pointer;<br /> display:block;<br /> background-repeat:no-repeat;<br /> background-color:#99CC99;<br /> }<br /> .filledRatingStar<br /> {<br /> background-image:url(image/star1.gif);<br /> }<br /> .emptyRatingStar<br /> {<br /> background-image:url(image/star2.gif);<br /> }<br /> .savedRatingStar<br /> {<br /> background-image:url(image/star3.gif);<br /> }<br /> </style><br /></head><br /><body><br /> <form id="form1" runat="server"><br /> <div><br /> <asp:ScriptManager ID="ScriptManager1" runat="server"><br /> </asp:ScriptManager></p><p> </div><br /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"><br /> <ContentTemplate><br /> <cc1:Rating ID="Rating1" runat="server" Width="96px" WaitingStarCssClass="emptyRatingStar" EmptyStarCssClass="emptyRatingStar" FilledStarCssClass="filledRatingStar" StarCssClass="ratingStar" CurrentRating="2"><br /> </cc1:Rating><br /> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br /> </ContentTemplate><br /> </asp:UpdatePanel><br /> </form><br /></body>

 

後台代碼:

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = Rating1.CurrentRating.ToString();
    }

 

 

Rating控制項時的常用屬性標籤
屬性標籤名                                       描  述
CurrentRating                 該Rating控制項當前的評級,即當前選中了幾顆星
MaxRating                 該Rating控制項支援的最高評級數,即最多有幾顆星
RatingAlign                 星形表徵圖的排列方向,可選Vertical(垂直)和Horizontal(水平)
RatingDirection                 星形表徵圖的起始方向,可選LeftToRightTopToBottom(從左至右/從上到下)和                                                                                      RightToLeftBottomToTop(從右至左/從下到上)
ReadOnly                                  若該屬性值設定為true,則該Rating控制項為唯讀,使用者不能對評級進行修改
StarCssClass                 星形表徵圖所應用的CSS Class
WaitingStarCssClass              在使用者對評級有所改變,且這個改變尚處於非同步提交回伺服器儲存的過程中時星形表徵圖所應用的                                                         CSS Class
FilledStarCssClass                選中的星形表徵圖所應用的CSS Class
EmptyStarCssClass                未選中的星形表徵圖所應用的CSS Class
OnChanged                指定Changed事件的處理函數。Changed事件將在使用者改變評級時觸發,並通過非同步而不是整頁                                                      地回送發送回伺服器。這樣,在伺服器端的事件處理函數中即可得到當前的所選值,並做後續操作
Tag                                 一個作為附加資訊的上下文字串,該附加資訊將傳遞給Changed事件的伺服器端處理常式,這樣                                                    即可在其中根據需要使用這個值。

注意,在WaitingStarCssClass、FilledStarCssClass和EmptyStarCssClass屬性所指定的CSS Class中,一般應該使用background-image屬性為不同類型的星形表徵圖指定相應圖片。這樣,Rating控制項就沒有必要直接暴露出各種情況下星形表徵圖檔案的URL屬性

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.