Произведите "тосты", такие как StackOverflow

Одна из проблем, которые я думаю при каждом создании моего веб-приложения, - это то, как сообщения должны появляться у конечных пользователей

Я пробовал окна сообщений, подобные тем, что в приложениях Windows, но они выглядят так плохо и создают проблемы при публикации на сервере. Я попробовал панель обновления, содержащую классный ярлык в верхней части моей страницы... но все же я чувствую, что он не достаточно хорош. Иногда у меня возникают проблемы в конкретных случаях при использовании AJAX, и он по-прежнему не подходит для пользователей...

Я хочу спросить о сообщениях StackOverFlow, которые появляются некоторое время, а затем исчезнуть, например, сообщение, которое появляется оранжевым при голосовании сообщения вверх или вниз.

Я хочу создавать такие сообщения, например, или повторно использовать DLL, которые могут их предоставить. Возможно ли это?

примечание: сообщения появились для пользователя на основе определенных условий на стороне сервера.

Спасибо заранее.

Ответ 1

Хорошо, один метод использования jGrowl (для расширения на Shane Answer) через .cs показан ниже.

Этот пример в веб-форме ASP.NET

Создайте простую страницу aspx с помощью кнопки 1 и убедитесь, что в заголовке страницы включены необходимые jquery/jgrowl script и css-ссылки, у меня также есть панель ScriptManager и update на странице.

В коде для страницы:

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);                        
    }
}

Естественно используйте любую тему, подходящую для вашего приложения, удачи! Кроме того, этот подход только загружает уведомление script по мере необходимости (в этом случае после нажатия кнопки), но вы можете связать функцию "ShowStatus" с другими событиями/тестами внутри кода.

Ответ 2

В частности, плагин jGrowl jQuery делает то, что вы просите.

Просто включите скрипты jQuery и jGrowl в свой html и начните генерировать сообщения с помощью функции $.jGrowl().

Пример кода:

<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>

Ответ 3

Для создания эффектов вы можете использовать эти инструменты

Jquery

jQuery библиотека пользовательского интерфейса. Он обеспечивает взаимодействие, виджеты, эффекты и тематику для создания Rich Internet Applications.

вы можете просмотреть некоторые эффекты JQuery здесь

MooTools

Библиотека пользовательского интерфейса веб-приложений, встроенная в среду JavaScript Mootools

Ответ 4

Другим очень приятным плагином для уведомлений JavaScript является Pines Notify

В нем есть также виджет истории уведомлений.

Ответ 5

Плагин Notimoo с использованием mootools.
Используется только вчера, и ему понравились параметры конфигурации.

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