先介绍Rating的基本属性:
- AutoPostBack - True to cause a postback on rating item click.
- CurrentRating - Initial rating value
- MaxRating - Maximum rating value
- ReadOnly - Whether or not the rating can be changed
- StarCssClass - CSS class for a visible star
- WaitingStarCssClass - CSS class for a star in waiting mode
- FilledStarCssClass - CSS class for star in filled mode
- EmptyStarCssClass - CSS class for a star in empty mode
- RatingAlign - Alignment of the stars (Vertical or Horizontal)
- RatingDirection - Orientation of the stars (LeftToRightTopToBottom or RightToLeftBottomToTop)
- OnChanged - ClientCallBack event to fire when the rating is changed
- Tag - A custom parameter to pass to the ClientCallBack
前台代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Rating.aspx.cs" Inherits="Rating" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Atlas控件之Rating等级入门实例</title>
<style type="text/css">
/* Rating */
.ratingStar {
font-size: 0pt;
width: 13px;
height: 12px;
margin: 0px;
padding: 0px;
cursor: pointer;
display: block;
background-repeat: no-repeat;
}
.filledRatingStar {
background-image: url(images/FilledStar.png);
}
.emptyRatingStar {
background-image: url(images/EmptyStar.png);
}
.savedRatingStar {
background-image: url(images/SavedStar.png);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="DIV1" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="float: left">
<cc1:Rating ID="Rating1" runat="server" Direction="LeftToRight" EmptyStarCssClass="emptyRatingStar"
FilledStarCssClass="filledRatingStar" Height="24px" HorizontalAlign="Left" OnChanged="Rating1_Changed"
StarCssClass="ratingStar" Style="float: left" WaitingStarCssClass="savedRatingStar"
Width="87px">
</cc1:Rating>
</div>
<br />
<br />
<br />
<br />
<br />
<table>
<tr>
<td style="width: 3px; height: 24px">
Alignment</td>
<td style="height: 24px; width: 97px;">
<asp:DropDownList ID="DropAlign" runat="server" AutoPostBack="True" Width="93px">
<asp:ListItem>Horizontal</asp:ListItem>
<asp:ListItem>Vertical</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td style="width: 3px; height: 24px">
Direction</td>
<td style="height: 24px; width: 97px;">
<asp:DropDownList ID="DropDeretion" runat="server" AutoPostBack="True" Width="94px">
<asp:ListItem>Left to Right or Top to Bottom </asp:ListItem>
<asp:ListItem>Right to Left or Bottom to Top</asp:ListItem>
</asp:DropDownList></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
后台代码:
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;
using System.Threading;
public partial class Rating : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
this.Rating1.RatingAlign = (DropAlign.SelectedIndex == 0 ? Orientation.Horizontal : Orientation.Vertical);
this.Rating1.RatingDirection = (DropDeretion.SelectedIndex == 0 ? AjaxControlToolkit.RatingDirection.LeftToRightTopToBottom : AjaxControlToolkit.RatingDirection.RightToLeftBottomToTop);
}
protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e)
{
Thread.Sleep(400);
}
}
还有三张星星的图片: