Customize the tooltip of ajaxcontroltoolkit rating Extender

When we hover over the stars of the rating control, the hovered star's value wocould 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" _ "", 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" > & Nbsp; </ 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
FunctionRatingonmouseover (sender, eventargs ){
VaRELT=Sender. get_element ();
}

 

Notice that we can also simply use$ Find (the rating's ID)To achieve this in any client function.

Then, the document is this$ Get (ELT. ID + "_ "). 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 = " PC3 "   %>
<! 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 >
< C0: Rating ID = "Thairating" Runat = "Server" Behaviorid = "Ratingbehavior1" Currentrating = "2"
Maxrating = "5" Starcssclass = "Ratingstar" Waitingstarcssclass = "Savedratingstar"
Filledstarcssclass = "Filledratingstar" Emptystarcssclass = "Emptyratingstar" Style = "Float: Left ;"   />
</ Div >
</ Form >

<ScriptLanguage= "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 +   " _ " ). Title = Sender. _ currentrating +   " Stars " ;
}
</ Script >

</Body>
</Html>

 

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