Produce “toast” messages like StackOverflow

2020-02-03 06:58发布

站内问答 / jQuery
535 5 6

One of the issues I think about every time I build my web application is how messages should appear to the end-users

I tried message boxes like those in windows applications, but they look so bad and make problems when published on the server. I've tried an update panel containing a cool label at the top of bottom of my page..but still i feel it's not good enough at all. Sometimes I have problems in specific cases when using AJAX, and it still doesn't look good for the users...

I want to ask about the StackOverFlow messages that appear for a while and then disappear, for example the message that appears in orange when voting a message up or down.

I want to build messages like these or reuse a DLL that can provide these. Is this feasible?

note::: the messages appeared for the user based on specific condition on the server side..

Thanks in advance.

5条回答
爷、活的狠高调
2楼-- · 2020-02-03 07:14

Specifically, the jGrowl jQuery plugin does what you're asking.

Just include the jQuery and jGrowl scripts in your html, and start generating messages with the $.jGrowl() function.

Example code:

<html>
<head>
<script src="path/to/jquery.js"></script>
<script src="path/to/jgrowl.js"></script>
<script>
$(function() {
  $.jGrowl("My sticky message, loaded after the rest of the page", {sticky: true});
  $("#mybutton").live("click", function(_) {
    $.jGrowl("you clicked the button!");});
});
</script>
</head>
<body>
<button id="mybutton">click me</button>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
\"骚年 ilove
3楼-- · 2020-02-03 07:14

Notimoo plugin using mootools.
Used just yesterday, and liked the configuration options.

http://code.google.com/p/notimoo/

查看更多
0人赞 添加讨论(0) 举报
迷人小祖宗
4楼-- · 2020-02-03 07:15

To create effects you can use these tools

Jquery

jQuery user interface library. It provides interactions, widgets, effects, and theming for creating Rich Internet Applications

you can view some Jquery effects here

MooTools

A web applications user interface library built on the Mootools JavaScript framework

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
5楼-- · 2020-02-03 07:17

Another very nice a JavaScript notification plugin is Pines Notify

It features also a notification history widget.

查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
6楼-- · 2020-02-03 07:21

Well, one method to use jGrowl (to expand on Shane's Answer) via .cs is shown below.

This example in webform ASP.NET

Create a simple aspx page with 1 button and make sure you include the necessary jquery/jgrowl script and css references in the page head, I also have a ScriptManager and update panel on the page as well.

In the code behind for the page:

protected void Button1_Click(object sender, EventArgs e)
{
    this.ShowStatus("This is your message!<br />Some HTML formatting works!<br />");
}

protected void ShowStatus(string message)
{
    ScriptManager sm = ScriptManager.GetCurrent(Page);

    if (sm.IsInAsyncPostBack)
    {
        string script = @"
            $(document).ready(function() {
            $.jGrowl.defaults.theme = 'iphone';
            $.jGrowl('" + message + "', {theme: 'iphone',header: 'Notification',life: 8000});});";

        ScriptManager.RegisterStartupScript(Page,this.GetType(), "notification", script,true);                        
    }
}

Naturally use whatever theme suits your app, good luck! Additionally, this approach only loads the notification script as needed (in this case after you click the button) but you could tie the "ShowStatus" function to other events/tests within the code behind.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)