Создайте «тост» сообщения, такие как StackOverflow - PullRequest
Новая
       9

Создайте «тост» сообщения, такие как StackOverflow

18 голосов
/ 21 ноября 2010

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

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

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

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

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

Заранее спасибо.

Ответы [ 5 ]

17 голосов
/ 12 декабря 2010

В частности, плагин 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>
12 голосов
/ 21 ноября 2010

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

Jquery

jQuery Библиотека пользовательского интерфейса.Он предоставляет взаимодействия, виджеты, эффекты и темы для создания многофункциональных интернет-приложений

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

MooTools

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

9 голосов
/ 13 декабря 2010

Что ж, один из способов использовать jGrowl (для расширения ответа Шейна) через .cs показан ниже.

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

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

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

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

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

2 голосов
/ 16 декабря 2010

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

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

1 голос
/ 16 декабря 2010

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

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

...