您的位置：首页 > 其它

AJAX扩展控件Rating(等级控件)的使用方法总结

2010-05-11 23:47 357 查看

如上图所示的等级控件（这个控件主要指定样式）：

页面代码：

<head runat="server">
<title>无标题页</title>
<mce:style type ="text/css"><!--
.ratingStar
{
font-size:0pt;
width:15px;
height:12px;
padding:1px;
margin:1px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
background-color:#99CC99;
}
.filledRatingStar
{
background-image:url(image/star1.gif);
}
.emptyRatingStar
{
background-image:url(image/star2.gif);
}
.savedRatingStar
{
background-image:url(image/star3.gif);
}

--></mce:style><style type ="text/css" mce_bogus="1">         .ratingStar
{
font-size:0pt;
width:15px;
height:12px;
padding:1px;
margin:1px;
cursor:pointer;
display:block;
background-repeat:no-repeat;
background-color:#99CC99;
}
.filledRatingStar
{
background-image:url(image/star1.gif);
}
.emptyRatingStar
{
background-image:url(image/star2.gif);
}
.savedRatingStar
{
background-image:url(image/star3.gif);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:Rating ID="Rating1" runat="server" Width="96px" WaitingStarCssClass="emptyRatingStar" EmptyStarCssClass="emptyRatingStar" FilledStarCssClass="filledRatingStar" StarCssClass="ratingStar" CurrentRating="2">
</cc1:Rating>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</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属性

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航