Показано с 1 по 4 из 4

Тема: Оповещения

  1. #1
    Пользователь
    Регистрация
    17.06.2015
    Возраст
    27
    Сообщений
    14
    Репутация: 12

    Звание: на пути к лучшему

    Оповещения

    Нечего было делать, сделал систему оповещений. Их можно использовать например для оповещения при авторизации (Успешно вошли или Произошла ошибка).
    Требуеться подключенная библиотека Jquery!
    PHP код:
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 

    Создаем папку js.
    В папке создаем файл notifications.js.
    Открываем этот файл и вставляем в него содержимое:
    PHP код:
    var GlobalInfo = {id0}
    function 
    CreateMessage(info)
    {
        if(
    GlobalInfo.id >= 5) return console.error("More five message for page.");
        
    GlobalInfo.id++;
        switch(
    info.type)
        {
            case 
    1:
            {
                $(
    '#message-items').append('<li class="message message-default" id="message_box'GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'info.name +'</b><p>'info.text +'</p></li>');
                break;
            }
            case 
    2:
            {
                $(
    '#message-items').append('<li class="message message-success" id="message_box'GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'info.name +'</b><p>'info.text +'</p></li>');
                break;
            }
            case 
    3:
            {
                $(
    '#message-items').append('<li class="message message-error" id="message_box'GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'info.name +'</b><p>'info.text +'</p></li>');
                break;
            }
            case 
    4:
            {
                $(
    '#message-items').append('<li class="message message-warning" id="message_box'GlobalInfo.id+'"><span class="close" OnClick="MessageRemove('+GlobalInfo.id+');">x</span><b>'info.name +'</b><p>'info.text +'</p></li>');
                break;
            }
        }
        if(
    info.time != -1setTimeout(function(){ MessageRemove(GlobalInfo.id) }, info.time*1000);
    }
    function 
    MessageRemove(id)
    {
        $(
    '#message_box'id).fadeOut(1000);
        
    setTimeout(function(){ $('#message_box'id).remove() }, 1000);
        
    GlobalInfo.id--;
        return 
    true;



    PHP код:
    .message 
    {
        
    positionrealtive;
        
    displayblock;
        
    left0;
        
    right20px;
        
    width300px;
        
    z-index9999;
        
    padding15px;
        
    margin10px;
        
    border1px solid transparent;
        
    border-radius4px;
        
    color#fff;
    }
    .
    message-default
    {
        
    backgroundrgba(39,44,49,0.7);
    }
    .
    message-success
    {
        
    backgroundrgba(025500.7);
    }
    .
    message-error
    {
        
    backgroundrgba(255000.7);
    }
    .
    message-warning
    {
        
    backgroundrgba(25523400.7);
    }
    #message-items
    {
        
    float:left
        
    positionabsolute
        
    displayinline-block
        
    left0;
        
    bottom15px;
    }
    .
    close
    {
        
    floatright;
        
    padding0;
        
    cursorpointer;
        
    backgroundtransparent;
        
    border0;
        -
    webkit-appearancenone;



    PHP код:
    .message 
    {
        
    positionrealtive;
        
    displayblock;
        
    left0;
        
    right20px;
        
    width300px;
        
    z-index9999;
        
    padding15px;
        
    margin10px;
        
    border1px solid transparent;
        
    border-radius4px;
        
    color#fff;
    }
    .
    message-default
    {
        
    backgroundrgba(39,44,49,0.7);
    }
    .
    message-success
    {
        
    backgroundrgba(025500.7);
    }
    .
    message-error
    {
        
    backgroundrgba(255000.7);
    }
    .
    message-warning
    {
        
    backgroundrgba(25523400.7);
    }
    #message-items
    {
        
    float:right
        
    positionabsolute
        
    displayinline-block
        
    right0;
    }
    .
    close
    {
        
    floatright;
        
    padding0;
        
    cursorpointer;
        
    backgroundtransparent;
        
    border0;
        -
    webkit-appearancenone;




    PHP код:
    <div id="message-items"></div



    Вызов функции:
    CreateMessage({ name:'Приветствуем вас!', text:'Вы зашли на сайт', time: -1, type: 1});

    Параметры:
    name - заголовок оповещения
    text - текс оповещения
    time - Время до исчезновения в секундах.Без исчезновения -1.
    type - Тип оповещения:

    1 - Стандартный.
    2 - Успешно.
    3 - Ошибка.
    4 - Предупреждение.


    Перед </body>
    PHP код:
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="/js/notifications.js"></script>
    <script>
            CreateMessage({ name:'Приветствуем вас!', text:'Вы зашли на сайт.', time: 1, type: 1});
            CreateMessage({ name:'Успех!', text:'Операция прошла успешно.', time: 2, type: 2});
            CreateMessage({ name:'Ошибка!', text:'Произошла ошибка.', time: 3, type: 3});
            CreateMessage({ name:'Предупреждение', text:'Может произойти ошибка.', time: 4, type: 4});
    </script> 



    После исчезновения оповещения (opacity) блок с оповещением уничтожаеться
    Автор: yuriy5022

    Последний раз редактировалось yuriy5022; 12.01.2016 в 21:01.

  2. #2

  3. #3
    Пользователь
    Регистрация
    17.06.2015
    Возраст
    27
    Сообщений
    14
    Репутация: 12

    Звание: на пути к лучшему
    Цитата Сообщение от Fallen A. Посмотреть сообщение
    Скриншот примера где?
    Сейчас будет

  4. #4

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •