Блог

Главная - Вопросы по программированию - Сообщение заголовка, как при переполнении стека

Сообщение заголовка, как при переполнении стека

#jquery #asp.net-mvc-3

#javascript #HTML #css #заголовок

Вопрос:

Это первый раз, когда я посетил stack overflow, и я увидел красивое сообщение в заголовке, в котором отображается текст и кнопка закрытия.

Строка заголовка является фиксированной и отлично подходит для привлечения внимания посетителя. Мне было интересно, знает ли кто-нибудь из вас, ребята, код для получения такой же строки заголовка.

Ответ №1:

Быстрая реализация чистого JavaScript:

 function MessageBar() {
    // CSS styling:
    var css = function(el,s) {
        for (var i in s) {
            el.style[i] = s[i];
        }
        return el;
    },
    // Create the element:
    bar = css(document.createElement('div'), {
        top: 0,
        left: 0,
        position: 'fixed',
        background: 'orange',
        width: '100%',
        padding: '10px',
        textAlign: 'center'
    });
    // Inject it:
    document.body.appendChild(bar);
    // Provide a way to set the message:
    this.setMessage = function(message) {
        // Clear contents:
        while(bar.firstChild) {
            bar.removeChild(bar.firstChild);
        }
        // Append new message:
        bar.appendChild(document.createTextNode(message));
    };
    // Provide a way to toggle visibility:
    this.toggleVisibility = function() {
        bar.style.display = bar.style.display === 'none' ? 'block' : 'none';
    };
}

Как его использовать:

 var myMessageBar = new MessageBar();
myMessageBar.setMessage('hello');
// Toggling visibility is simple:
myMessageBar.toggleVisibility();

Комментарии:

1. Вместо того, чтобы переключать после строки добавления, просто сделайте это: bar.style.display = message === » ? ‘none’ : ‘block’; Затем, когда вы захотите избавиться от панели, просто: myMessageBar.setMessage(«);

2. Переключение видимости кажется мне гораздо более интуитивным API; Я бы ожидал, что пустое сообщение будет отображаться как пустое сообщение, а не без панели вообще.

3. Как бы вы вызвали myMessageBar.toggleVisibility() в качестве onclick для панели?

4. @leif81 Обработчик onclick. Поэтому добавьте bar.onclick = this.toggleVisibility; в последнюю строку панели сообщений. @999 — Приятно. jsfiddle.net/pajtai/VUCpK (имеет onclick для панели)

Ответ №2:

Обновить:

Посмотрите ДЕМОНСТРАЦИЮ

Используемый код:

 $(function(){
  $('#smsg_link').click(function(){
  showMessage('#9BED87', 'black', 'This is sample success message');
  return false;
});

$('#imsg_link').click(function(){
  showMessage('#FFE16B', 'black', 'This is sample info message');
  return false;
});

$('#emsg_link').click(function(){
  showMessage('#ED869B', 'black', 'This is sample error message');
  return false;
});
});



/*
showMessage function by Sarfraz:
-------------------------
Shows fancy message on top of the window

params:
  - bgcolor:     The background color for the message box
  - color:     The text color of the message box
  - msg:       The message text
*/
var interval = null;

function showMessage(bgcolor, color, msg)
{
    $('#smsg').remove();
    clearInterval(interval);

    if (!$('#smsg').is(':visible'))
    {
        if (!$('#smsg').length)
        {
            $('<div id="smsg">' msg '</div>').appendTo($('body')).css({
                position:'fixed',
                top:0,
                left:0,
                width:'98%',
                height:'30px',
                lineHeight:'30px',
                background:bgcolor,
                color:color,
                zIndex:1000,
                padding:'10px',
                fontWeight:'bold',
                fontSize:'18px',
                textAlign:'center',
                opacity:0.8,
                margin:'auto',
                display:'none'
            }).slideDown('show');

            interval = setTimeout(function(){
                $('#smsg').animate({'width':'hide'}, function(){
                    $('#smsg').remove();
                });
            }, 3000);
        }
    }
}

Если вы хотите создать свой собственный, ознакомьтесь с slideToggle функцией jQuery.

Комментарии:

1. я ищу что-то, что перемещает весь веб-сайт вниз, а не как выпадающее меню

2. @harrison: Тогда не уверен, что ты имеешь в виду, можешь привести пример?

3. да, подожди. я поищу такое в Интернете.

4. я полагаю, это называется flash messages? я не могу найти пример, за исключением случаев, когда я обнаруживаю новый значок в stackoverflow

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

Ответ №3:

Соответствующий css будет включать:

 position: fixed;
top: 0;
width: 100%;

Дополнительная информация о position:fixed :

Элемент с position: fixed расположен в указанных координатах относительно окна браузера. Позиция элемента указывается с помощью свойств «left», «top», «right» и «bottom». Элемент остается в этой позиции независимо от прокрутки. Работает в IE7 (строгий режим)

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

Ответ №4:

Вот альтернативный метод с использованием jQuery, который также будет скользить вверх / вниз при показе / скрытии.

Добавьте следующий HTML-код сразу после <body> тега на вашей странице:

 <div id="msgBox">
    <span id="msgText">My Message</span>           
    <a id="msgCloseButton" href='#'>close</a>
</div>

Добавьте этот CSS в свою таблицу стилей

 #msgBox {
    padding:10px; 
    background-color:Orange; 
    text-align:center; 
    display:none; 
    font:bold 1.4em Verdana;
}
#msgCloseButton{
    float:right;    
}

И, наконец, вот javascript для настройки кнопки закрытия и функций для отображения и скрытия панели сообщений:

 /* Document Ready */
$(function () {
    SetupNotifications();
});

SetupNotifications = function () {
    //setup close button in msgBox
    $("#msgCloseButton").click(function (e) {
        e.preventDefault();
        CloseMsg();
    });
}

DisplayMsg = function (sMsg) {
    //set the message text
    $("#msgText").text(sMsg);
    //show the message
    $('#msgBox').slideDown();
}

CloseMsg = function () {
    //hide the message
    $('#msgBox').slideUp();
    //clear msg text
    $("#msgtText").val("");
}

Чтобы выполнить простой тест, вы могли бы попробовать это:

 <a href='#' onclick="javascript: DisplayMsg('Testing');">Show Message!</a>

Комментарии:

1. я думаю, что это лучшее решение, просто потому, что оно перемещает всю страницу вниз!

Ответ №5:

Что-то вроде этого?

 $("#bar").slideUp();

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

 $("#bar").fadeOut(function(){
    $("#container").animate({"top":"0px"});
});