Customize the Tooltip of AjaxControlToolkit Rating Extender

mac2022-07-05 12

When we hover over the stars of the Rating control, the hovered star's value would be displayed as the Tooltip. Customer may wish to customize the Tooltip of the Rating's star. Now, let's do it. After the Rating control is rendered, three sections will be generated. An INPUT document, whose id is "the Rating's ID"_"RatingExtender"_"ClientState", which is used to save the Rating behavior's value. < INPUT id =ThaiRating_RatingExtender_ClientState type =hidden value =2 name =ThaiRating_RatingExtender_ClientState > An A document, whose id is "the Rating's ID"_"A", which is used to disply the Tooltip. < A id =ThaiRating_A title =4 style ="TEXT-DECORATION: none" href ="#" > A few SPAN documents, whose id are "the Rating's ID"_"Star"_"the Index", which are used to display the stars with the corresponding format CssClass. < SPAN class ="ratingStar filledRatingStar" id =ThaiRating_Star_1 style ="FLOAT: left" value ="1" > </ SPAN >

Then, to customize the Tooltip, we need find the current A document. The RatingBehavior provides a function add_MouseOver(handler) to help us handle the mouse over event. In the handler function, we can find the Rating's client behavior by the parameter-sender.

Code function ratingOnMouseOver(sender, eventArgs) { var elt = sender.get_element(); }

Notice that we can also simply use $find(the Rating's Id) to achieve this in any client function. Then, the A document is this $get(elt.id + "_A"). Modifying the title property is the final step. Here is the complete code:

Code <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="SoluTest_RatingControl._Default" %><%@ 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>Untitled Page</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(Image/FilledStar.png); } .emptyRatingStar { background-image: url(Image/EmptyStar.png); } .savedRatingStar { background-image: url(Image/SavedStar.png); } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <cc1:Rating ID="ThaiRating" runat="server" BehaviorID="RatingBehavior1" CurrentRating="2" MaxRating="5" StarCssClass="ratingStar" WaitingStarCssClass="savedRatingStar" FilledStarCssClass="filledRatingStar" EmptyStarCssClass="emptyRatingStar" Style="float: left;" /> </div> </form> <script language="javascript" type="text/javascript"> function pageLoad() { $find("RatingBehavior1").add_MouseOver(ratingOnMouseOver); } function ratingOnMouseOver(sender, eventArgs) { var elt = sender.get_element(); //please modify this code as your wish, for example sender._currentRating*10 $get(elt.id + "_A").title = sender._currentRating + " Stars"; } </script></body></html>

Thread url:http://forums.asp.net/t/1369024.aspx

转载于:https://www.cnblogs.com/Zhi-QiangNi/archive/2009/01/13/1374801.html

相关资源：myeclipse 2014 customize persperctive无效的bug修复

最新回复(0)