在屏幕上淡入/淡出用户确认消息

• 下载演示 - 4.59 KB
• 下载源代码 - 2.18 KB

引言

我经常发现自己编写一些用户确认信息到屏幕上 - 评论已发布，记录已删除等。问题是，确认信息通常会一直停留在屏幕上，直到用户单击网站上的其他按钮或链接。为了解决这个问题，我创建了一个用户控件，该控件淡入视图，在屏幕上停留可配置的时间，然后淡出。这样，可以向用户闪烁确认消息，并且开发人员不必担心它在屏幕上停留太长时间。

• 在此处查看实时示例.

背景

代码背后的基本思想很简单。在页面上放置一个标签，然后从后台代码触发 JavaScript，以显示标签一段时间，然后将其隐藏。

使用代码

在页面上注册用户控件，然后将用户控件放在一个 UpdatePanel 中。在这种情况下，我正在单击一个按钮，并在按钮的单击事件中访问用户控件。

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnShowMessage" runat="server" 
                   Text="Show Message" OnClick="btnShowMessage_Click" />
            <uc1:FlashMessage ID="FlashMessage1" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

为了闪烁消息，您只需设置消息文本并调用 Display() 方法即可。您还可以设置其他属性，例如淡入速度和消息在屏幕上停留的时间，但它们是可选的。

Protected Sub btnShowMessage_Click(ByVal sender As Object, ByVal e As System.EventArgs)

    ''Optional properties
    'FlashMessage1.Interval = 4000
    'FlashMessage1.FadeInDuration = 300
    'FlashMessage1.FadeOutDuration = 2000
    'FlashMessage1.CssClass = "SomeClass"
    'FlashMessage1.FadeInSteps = 20
    'FlashMessage1.FadeOutSteps = 50

    'This is all that's needed to display a message

    FlashMessage1.Message = "Test message..."
    FlashMessage1.Display()

End Sub

以上部分是使用此控件所需的一切。从这一点开始的任何内容都是用户控件本身的代码，以及对其工作原理的简要说明。

用户控件

为了淡入淡出消息，我使用了来自 www.sunburnt.com 的 JavaScript，并稍作修改。

<script language="javascript" type="text/javascript">    
//The original javascript came from 
//http://www.sunburnt.com.au/publications/design/javascript-fade-effects
//I modified it to work with my code

//set the opacity of the element (between 0.0 and 1.0)       

function setOpacity(id, level) {
    var element = document.getElementById(id); 
    element.style.display = 'inline';
    element.style.zoom = 1;
    element.style.opacity = level;
    element.style.MozOpacity = level;
    element.style.KhtmlOpacity = level;
    element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}

function fadeIn(id, steps, duration, interval, fadeOutSteps, fadeOutDuration){  
    var fadeInComplete;
    for (i = 0; i <= 1; i += (1 / steps)) {
      setTimeout("setOpacity('" + id + "', " + i + ")", i * duration); 
      fadeInComplete = i * duration;             
    }
    //set the timeout to start after the fade in time and the interval to display the 
    //message on the screen have both completed

    setTimeout("fadeOut('" + id + "', " + fadeOutSteps + 
               ", " + fadeOutDuration + ")", fadeInComplete + interval);
}

function fadeOut(id, steps, duration) {
    var fadeOutComplete;       
    for (i = 0; i <= 1; i += (1 / steps)) {
      setTimeout("setOpacity('" + id + "', "  + 
                (1 - i) + ")", i * duration);
      fadeOutComplete = i * duration;
    }      
    //completely hide the displayed message after the fade effect is complete
    setTimeout("hide('" + id + "')", fadeOutComplete);
}   

function hide(id){
    document.getElementById(id).style.display = 'none';
}
</script>

用户控件的 ASPX 部分中的唯一其他项目是 JavaScript 显示和隐藏的标签。

<asp:Label ID="lblMessage" runat="server" style="display:none" />

要显示消息，我们只需要从后台代码调用 FadeIn() 方法即可。

棘手的部分是弄清楚如何在异步回发后执行 JavaScript。为此，您必须获取对脚本管理器的引用，然后使用用户控件嵌套在其中的 UpdatePanel 注册代码。

如果 UpdatePanel 不在用户控件中，则可以使用通常的 RegisterStartupScript 方法将脚本注册到页面而不是 UpdatePanel。

Public Sub Display()

    'Set the duration, steps, etc. for the javascript fade in and fade out   

    Dim js As String = "fadeIn('" & lblMessage.ClientID & _
        "', " & FadeInSteps & _
        ", " & FadeInDuration & _
        ", " & Interval & _
        ", " & FadeOutSteps & _
        ", " & FadeOutDuration & ");"


    'Find the script manager on the page, and the update panel 
    'the FlashMessage control is nested in

    Dim sm As ScriptManager = ScriptManager.GetCurrent(Page)
    Dim up As UpdatePanel = GetParentOfType(lblMessage, GetType(UpdatePanel))


    If Not IsNothing(sm) And Not IsNothing(up) Then
        'The user control is nested in an update panel, 
        'register the javascript with the script manager and

        'attach it to the update panel in order to fire it after the async postback

        If sm.IsInAsyncPostBack = True Then
            ScriptManager.RegisterClientScriptBlock(up, GetType(UpdatePanel), _
                                                    "jscript1", js, True)
        End If
    Else
        'The user control is not in an update panel 
        '(or there is no script manager on the page), 

        'so register the javascript for a normal postback

        Page.ClientScript.RegisterStartupScript(Me.GetType(), "jscript1", js, True)
    End If

End Sub

然后，JavaScript 处理在经过的显示时间过去后调用淡出函数。这对我有很大帮助，希望它也能帮助你！