Сообщите панели, аналогичной stackoverflow's

Question

Помните маленький div, который отображается вверху страницы, чтобы уведомить нас о вещах (например, о новых значках)?

Я хотел бы реализовать что-то подобное, и я ищу некоторые лучшие практики или шаблоны.

Мой сайт - это приложение ASP.NET MVC. В идеале ответы будут включать в себя такие особенности, как «поставить на этот на главной странице» и «сделать этот в контроллерах».

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

<div class="notify" style=""> 
    <span> 
    First time at Stack Overflow? Check out the 
    <a href="/messages/mark-as-read?returnurl=%2ffaq">FAQ</a>! 
    </span> 
    <a class="close-notify" onclick="notify.close(true)" title="dismiss this notification">×</a> 
</div> 

<script type="text/javascript"> 

    $().ready(function() { 
    notify.show(); 
    }); 

</script> 

Я хотел бы добавить, что я это прекрасно понимаю и также понимаю участие jquery. Меня просто интересует, кто помещает код в разметку и когда («кто», как в объектах в приложении ASP.NET MVC).

Спасибо!

Answer 1

После шныряли кода немного, вот догадка:

Следующий контейнер уведомления всегда в разметке:

<div id="notify-container"> </div> 

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

Если пользователь не вошли в системе

Постоянство: Печенье используется для отслеживания, отображаются ли сообщение или нет.

стороне сервера сгенерированный код в представлении: Я думаю, что StackOverflow показывает только одно сообщение, если вы не вошли в следующий код вводится в поле зрения:.

<script type="text/javascript"> 
    $(function() { notify.showFirstTime(); }); 
</script> 

The showFirstTime() Метод javascript просто определяет, показывать ли это «Это ваш первый раз здесь?» сообщение, основанное на том, установлено ли cookie или нет. Если файл cookie отсутствует, отображается сообщение. Если пользователь принимает меры, cookie устанавливается, и сообщение не будет отображаться в будущем. Функция nofity.showFirstTime() обрабатывает проверку файла cookie.

Если пользователь вошел в систему

Постоянство: база данных используется для отслеживания того, было ли показано сообщение или нет.

стороне сервера сгенерированный код в представлении: При запросе страницы, на стороне сервера код проверяет базу данных, чтобы увидеть, какие сообщения должны отображаться. Затем серверный код вводит сообщения в формате json в представление и помещает вызов javascript в showMessages().

Например, если я вошел в представление, я вижу следующее в разметке на SO:

<script type="text/javascript"> 
1 
2 var msgArray = [{"id":49611,"messageTypeId":8,"text":"Welcome to Super User! Visit your \u003ca href=\"https://stackoverflow.com/users/00000?tab=accounts\"\u003eaccounts tab\u003c/a\u003e to associate with our other websites!","userId":00000,"showProfile":false}]; 
3 $(function() { notify.showMessages(msgArray); }); 
4 
</script> 

Таким образом, код на стороне сервера либо впрыскивает код для вызова метода «showFirstTime», если пользователь не входит в систему или вводит сообщения и вызывает «showMessages» для зарегистрированного пользователя.

Подробнее о коде на стороне клиента

Другим ключевым компонентом является «оповещать» JavaScript модуль Picflight имеет ДЭ-уменьшенная (вы можете сделать то же самое с помощью YSlow для Firebug). Модуль notify обрабатывает заполнение блока уведомлений на основе созданного на стороне сервера javascript.

не вошли в систему, на стороне клиента

Если пользователь не вошел в систему, то модуль обрабатывает события, когда пользователь иксы из уведомления или идет в FAQ, создавая печенье. Он также определяет, показывать ли первое сообщение, проверяя наличие файла cookie.

Помнить, на стороне клиента

Если пользователь вошел в систему, то уведомляет модуль добавляет все сообщения, генерируемые сервером в уведомлении дел. Он также, скорее всего, использует ajax для обновления базы данных, когда пользователь отклоняет сообщение.

Answer 2

Хотя это отнюдь не официальной, общие методы, которые я следую приведет к чему-то вроде этого:

• Создайте элемент, который будет выступать в качестве уведомления контейнера в разметке, но скрыть его по умолчанию (это можно сделать разными способами - JavaScript, внешний CSS или встроенные стили).
• Храните сценарии, ответственные за поведение уведомления за пределами разметки. В приведенном выше примере вы можете увидеть, что есть onclick, а также другая функция, которая срабатывает при загрузке страницы, содержащейся в разметке. Хотя это работает, я вижу это как смешение презентации и поведения.
• Сохраните презентацию уведомления, содержащуюся во внешней таблице стилей.

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

Answer 3

StackOverflow использует jQuery - код JS, который вы отправили из SO, является вызовом jQuery. Он будет делать именно то, что вы хотите, без кода. Настоятельно рекомендуется.

Answer 4

This answer имеет полное решение.

Copy-склеивание:

Это разметки, изначально скрыты, поэтому мы можем постепенно исчезать в:

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

Здесь применяются стили:

#message { 
    font-family:Arial,Helvetica,sans-serif; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

#message span { 
    text-align: center; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    float:right; 
    margin-right:10px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left:3px; 
    padding-right:3px 
} 

.close-notify a { 
    color: #fff; 
} 

И это Javascript (с использованием jQuery):

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

И вуаля. В зависимости от настроек вашей страницы вы также можете редактировать отображаемый край тела.

Here is a demo of it in action.

Answer 5

Я вижу следующую функцию jQuery? Я верю, что вводит html в div с id notify-container.

Я не понимаю, как этот JS используется и называется на основе определенных событий, возможно, кто-то может объяснить.

var notify = function() { 
var d = false; 
var e = 0; 
var c = -1; 
var f = "m"; 
var a = function(h) { 
    if (!d) { 
     $("#notify-container").append('<table id="notify-table"></table>'); 
     d = true 
    } 
    var g = "<tr" + (h.messageTypeId ? ' id="notify-' + h.messageTypeId + '"' : ""); 
    g += ' class="notify" style="display:none"><td class="notify">' + h.text; 
    if (h.showProfile) { 
     var i = escape("https://stackoverflow.com/users/" + h.userId); 
     g += ' See your <a href="/messages/mark-as-read?messagetypeid=' + h.messageTypeId + "&returnurl=" + i + '">profile</a>.' 
    } 
    g += '</td><td class="notify-close"><a title="dismiss this notification" onclick="notify.close('; 
    g += (h.messageTypeId ? h.messageTypeId : "") + ')">&times;</a></td></tr>'; 
    $("#notify-table").append(g) 
}; 
var b = function() { 
    $.cookie("m", "-1", { 
     expires: 90, 
     path: "/" 
    }) 
}; 
return { 
    showFirstTime: function() { 
     if ($.cookie("new")) { 
      $.cookie("new", "0", { 
       expires: -1, 
       path: "/" 
      }); 
      b() 
     } 
     if ($.cookie("m")) { 
      return 
     } 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      messageTypeId: c, 
      text: 'First time here? Check out the <a onclick="notify.closeFirstTime()">FAQ</a>!' 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    showMessages: function(g) { 
     for (var h = 0; h < g.length; h++) { 
      a(g[h]) 
     } 
     $(".notify").fadeIn("slow"); 
     e = g.length 
    }, 
    show: function(g) { 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      text: g 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    close: function(g) { 
     var i; 
     var h = 0; 
     if (g && g != c) { 
      $.post("/messages/mark-as-read", { 
       messagetypeid: g 
      }); 
      i = $("#notify-" + g); 
      if (e > 1) { 
       h = parseInt($("body").css("margin-top").match(/\d+/)); 
       h = h - (h/e) 
      } 
     } else { 
      if (g && g == c) { 
       b() 
      } 
      i = $(".notify") 
     } 
     i.children("td").css("border-bottom", "none").end().fadeOut("fast", function() { 
      $("body").css("margin-top", h + "px"); 
      i.remove() 
     }) 
    }, 
    closeFirstTime: function() { 
     b(); 
     document.location = "/faq" 
    } 
} 
}(); 

Answer 6

Я написал этот кусок Javascript, который делает только то, что включает в себя укладку, оставаясь с вами, когда вы прокручиваете, как это делает Stack Overflow, и нажатие всей страницы вниз при добавлении новой панели. Бары также истекают. Штанги также расширяются.

// Show a message bar at the top of the screen to tell the user that something is going on. 
// hideAfterMS - Optional argument. When supplied it hides the bar after a set number of milliseconds. 
    function AdvancedMessageBar(hideAfterMS) { 
     // Add an element to the top of the page to hold all of these bars. 
     if ($('#barNotificationContainer').length == 0) 
     {    

     var barContainer = $('<div id="barNotificationContainer" style="width: 100%; margin: 0px; padding: 0px;"></div>'); 
     barContainer.prependTo('body'); 

     var barContainerFixed = $('<div id="barNotificationContainerFixed" style="width: 100%; position: fixed; top: 0; left: 0;"></div>'); 
     barContainerFixed.prependTo('body'); 
    } 

    this.barTopOfPage = $('<div style="margin: 0px; background: orange; width: 100%; text-align: center; display: none; font-size: 15px; font-weight: bold; border-bottom-style: solid; border-bottom-color: darkorange;"><table style="width: 100%; padding: 5px;" cellpadding="0" cellspacing="0"><tr><td style="width: 20%; font-size: 10px; font-weight: normal;" class="leftMessage" ></td><td style="width: 60%; text-align: center;" class="messageCell"></td><td class="rightMessage" style="width: 20%; font-size: 10px; font-weight: normal;"></td></tr></table></div>'); 
    this.barTopOfScreen = this.barTopOfPage.clone(); 

    this.barTopOfPage.css("background", "transparent"); 
    this.barTopOfPage.css("border-bottom-color", "transparent"); 
    this.barTopOfPage.css("color", "transparent"); 

    this.barTopOfPage.prependTo('#barNotificationContainer'); 
    this.barTopOfScreen.appendTo('#barNotificationContainerFixed'); 


    this.setBarColor = function (backgroundColor, borderColor) {  

     this.barTopOfScreen.css("background", backgroundColor); 
     this.barTopOfScreen.css("border-bottom-color", borderColor); 
    }; 

    // Sets the message in the center of the screen. 
    // leftMesage - optional 
    // rightMessage - optional 
    this.setMessage = function (message, leftMessage, rightMessage) { 
     this.barTopOfPage.find('.messageCell').html(message); 
     this.barTopOfPage.find('.leftMessage').html(leftMessage); 
     this.barTopOfPage.find('.rightMessage').html(rightMessage); 

     this.barTopOfScreen.find('.messageCell').html(message); 
     this.barTopOfScreen.find('.leftMessage').html(leftMessage); 
     this.barTopOfScreen.find('.rightMessage').html(rightMessage); 
    }; 


    this.show = function() { 
     this.barTopOfPage.slideDown(1000); 
     this.barTopOfScreen.slideDown(1000); 
    }; 

    this.hide = function() { 
     this.barTopOfPage.slideUp(1000); 
     this.barTopOfScreen.slideUp(1000); 
    }; 

    var self = this; 


    if (hideAfterMS != undefined) { 
     setTimeout(function() { self.hide(); }, hideAfterMS); 
    }  
} 

Чтобы использовать его, вы должны использовать JQuery и убедитесь, нет полей или обивка на теле страницы.

Параметр, который использует элемент AdvancedMessageBar, является необязательным. Если это предусмотрено, это приведет к исчезновению полосы через определенное время в миллисекундах.

var mBar = new AdvancedMessageBar(10000); 
mBar.setMessage('This is my message', 'Left Message', 'Right Message'); 
mBar.show(); 

Если вы хотите их уложить, просто создайте объекты AdvancedMessageBar, и они будут автоматически складываться.