Customize the Tooltip of AjaxControlToolkit Rating Extender

最新推荐文章于 2024-11-07 11:47:45 发布

aifengyi6776

最新推荐文章于 2024-11-07 11:47:45 发布

阅读量181

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/Zhi-QiangNi/archive/2009/01/13/1374801.html

版权

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

aifengyi6776

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫