I need a rating control that has a star/button for "no opinion". This should be something like- 0 * * * *, with 0 being the first option to click, and the *'s being normal rating stars. Is it possible to do this with just css?- all I would need is to swap out the star pictures for the first star.
If my description isn't clear, sun has a rating control that makes a good example:
http://developers.sun.com/jscreator/learning/tutorials/2/ajaxrating.html (Scroll down about 40%)
Hi SidewaysFish,
Here is a sample which is replaced by another icon and the sample also shows how to change its title.
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <style> .ratingStar { font-size: 0pt; width: 13px; height: 12px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; } .filledRatingStar { background-image: url(../pic/FilledStar.png); } .emptyRatingStar { background-image: url(../pic/EmptyStar.png); } .savedRatingStar { background-image: url(../pic/SavedStar.png); } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:Rating ID="Rating1" BehaviorID="RatingBehavior1" runat="server" CurrentRating="1" MaxRating="3" ReadOnly="false" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" Tag="99" > </ajaxToolkit:Rating> <script type="text/javascript" language="javascript"> function pageLoad(){ //change its title var RatingID = "<%=Rating1.ClientID%>"; for(i=0;i<$find("RatingBehavior1").get_MaxRating();i++){ switch(i){ case 0: $get(RatingID+"_Star_"+(i+1).toString()).title ="Bad";break; case 1: $get(RatingID+"_Star_"+(i+1).toString()).title ="OK";break; case 2: $get(RatingID+"_Star_"+(i+1).toString()).title ="Excelent";break; default: break; } } //change the picture $find("RatingBehavior1")._stars[0].style.backgroundImage ="url(../pic/collapse.jpg)"; }form></body></htm>Also you can add a independent icon at the front of the rating. Then use javascript and CSS to make it shown as what you expected. In this situation, you
should add some code on the server side to process the independent icon's state.
Hope this help.
Best regards,
Jonathan
Hey, thanks Jonathan.
I'm using visual basic- I can translate every line except the key line:
$find("RatingBehavior1")._stars[0].style.backgroundImage ="url(../pic/collapse.jpg)"; I can do Page.FindControl("RatingBehavior1"), but then I don't know how to type-cast it properly.
Hi SidewaysFish,
As you can see, it is located inside <script type="text/javascript" language="javascript"></script>. So it's Javascript code you can copy it into your project without any convert working.Of course, you should make some changes to address your requirement. $find("RatingExtender's BehaviorID")._stars[0].style.backgroundImage ="url(../pic/collapse.jpg)";
Best regards,
Jonathan
No comments:
Post a Comment