65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET技巧：如何使用ASP.NET弹出控件显示工具提示

Mehul Harry
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2013年7月12日

CPOL

2分钟阅读

viewsIcon

31461

ASP.NET技巧：如何使用ASP.NET弹出控件显示工具提示

引言

您知道您可以使用DevExpress ASP.NET 弹出控件来显示几乎任何类型的工具提示吗？

查看此示例，该示例在最终用户输入输入字段时显示有用的工具提示。

当最终用户退出字段时，工具提示会消失。

要立即试用此示例，请点击此处：弹出控件 - 客户端功能

要查看代码，请点击演示右上角的“代码”选项卡。下面我将向您展示此示例的修改版和简化版。

多功能弹出控件

为什么要使用DevExpress ASP.NET弹出控件？因为它功能多样，可定制，并提供出色的客户端事件和功能。

您甚至可以将其与DevExpress ASP.NET GridView一起使用： ASPxGridView单元格模板弹出窗口

显示简单的工具提示

让我们看看当我们鼠标悬停在超链接上时添加简单的工具提示有多容易。

按照这三个简单的步骤操作

1.声明您想将弹出控件附加到的HTML元素。我们将使用ID为“idUser1”的超链接元素来附加弹出控件。

<p>
    Mouse over <a id="idUser1" href="#">this link</a> to see the slick tool tip using the DevExpress ASP.NET Popup control!
</p>

2.声明您的ASPxPopupControl并将PopupElementID设置为它将附加到的HTML元素（在本例中为idUser1）。

<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" 
    PopupAction="MouseOver" PopupElementID="idUser1"
    ShowHeader="False" Width="100px" PopupHorizontalAlign="LeftSides" 
    PopupVerticalAlign="Above" PopupVerticalOffset="-10" 
    PopupHorizontalOffset="-10" CloseAction="MouseOut">
    <ContentStyle CssClass="pcContent"></ContentStyle>
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server" SupportsDisabledAttribute="True">
            <div>
                DevExpress FTW!
            </div>
            <div class="pcCalloutBack">
                <div class="pcCallout"></div>
            </div>
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>

您也可以在ASPxPopupControl的ContentCollection区域中添加几乎任何您想要的内容。在这里，我们只是添加了几个DIV元素来显示简单的消息，并为样式分配了**CSS类**。我们还将PopupAction定义为MouseOver。将CloseAction设置为MouseOut以便在鼠标悬停后隐藏工具提示。

3.设置弹出控件的样式并对其进行自定义。以下是用于弹出窗口中使用的DIV元素的一些样式。

<head runat="server">
    <title>ASP.NET Tooltips using DevExpress ASP.NET Popup Control</title>
    <style type="text/css">
        .pcContent {
            background-color: Yellow;
        }
        .pcCalloutBack {
            position: absolute;
            border-style: solid;
            width: 0px;
            margin-top: 10px;
            margin-left: 0px;
            border-width: 15px 15px 0px 5px;
            border-color: transparent;
            border-top-color: #8B8B8B;
        }
        .pcCallout {
            position: absolute;
            border-style: solid;
            width: 0px;
            margin-top: -17px;
            margin-left: -5px;
            border-width: 15px 15px 0px 5px;
            border-color: transparent;
            border-top-color: Yellow;
        }
    </style>
</head>

现在运行此示例，并将鼠标悬停在超链接上以查看精美的工具提示。

下载上述示例的版本，这是一个简单的ASP.NET网站。

bDownloadNow

有用的CodeCentral示例

以下是有用的3个CodeCentral示例，它们向您展示如何使用ASPxPopupControl返回值和传递参数。

总结 

使用DevExpress ASP.NET弹出控件为您的网站显示精美且自定义的工具提示。然后在下面留下您的想法，谢谢。

节省时间和金钱……

使用针对ASP.NET、Windows Forms、WPF、Silverlight和VCL的高质量预构建组件，以及IDE生产力工具和业务应用程序框架，节省时间和金钱，所有这些都由世界一流的服务和支持支持。我们的技术帮助您打造最佳产品，更清晰地了解复杂的软件，提高您的生产力，并在最短的时间内为Windows和Web创建令人惊叹的应用程序。

立即免费试用DXperience的完整功能版本：http://www.devexpress.com/Downloads/NET/

© . All rights reserved.