Produce "toast" messages like StackOverflow
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 开发者_JAVA技巧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.
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>
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
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.
Another very nice a JavaScript notification plugin is Pines Notify
It features also a notification history widget.
Notimoo plugin using mootools.
Used just yesterday, and liked the configuration options.
http://code.google.com/p/notimoo/
加载中,请稍侯......
精彩评论