—»     —»   Плагин оповещения BounceBox на jQuery и CSS3
  Раздел: Меню и Навигация, Руководства, События   Нет комментариев  

Плагин оповещения BounceBox на jQuery и CSS3



Недавно мы попали в ситуацию, когда нам нужно было динамично создавать и демонстрировать окно сообщения для пользователей. Повседневная рутина заключалась бы в рытье среди кучи jQuery-плагинов и закончилось бы всё это применением альтернативы lightbox’у, но мы решили потратить немного времени и собственноручно «соорудить» решение, которым мы сегодня с вами поделимся.

Этап 1 – XHTML

Начнём с прямого вопроса «Для чего вам нужен данный эффект?»

Единственное, что от вас нужно – это создать на собственной странице div, и разместить в нём кое-какое содержимое. Например, так:

<div id="box">
<p><b>Title!</b>Boring explanation.</p>
</div>

В нашем примере заголовок сообщения, тело текста, а также иконка оповещения созданы посредством простого тэга «p» с некоторым оформлением CSS-кодом. Иконка оповещения – это фон блока, а заголовок – это простой полужирный тэг, который внутри себя содержит абзац.

Плагин оповещения BounceBox на jQuery и CSS3

Этап 2 – CSS

Плагин, который мы сегодня разрабатываем, добавляет собственное CSS-правило позиционирования блока, что делает возможным эффект «выпрыгивания». Но нам по прежнему нужно написать код оформления блока в нашем файле каскадных таблиц стилей.

Styles.css – часть 1

/* The bouncing box */

#box{
    background:url('img/box_bg.jpg') repeat-x center top #fcfcfc;
    height:115px;
    padding:20px;
    margin-top:-10px;
    padding-top:30px;
    width:400px;
    border:1px solid #fcfcfc;
    color:#494848;
    text-shadow:1px 1px 0 white;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
}

#box p{
    font-size:25px;
    background:url('img/warning.png') no-repeat 10px center;
    padding-left:90px;
}

#box p b{
    font-size:52px;
    display:block;
}

#box,
#main,
a.button{
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}

Здесь мы будем оформлять дизайн bounceBox. Здесь также есть несколько правил, которые напрямую применяются посредством jQuery. Они задают фиксированное позиционирование блока и центрируют его на странице – это нужно для анимации. Таким образом, мы сокращаем различия в дизайне страницы и блока.

Styles.css – часть 2

/* Styling the big button */

a.button{
    color:white;
    letter-spacing:-2px;
    padding:20px;
    display:block;
    text-shadow:1px 1px 0 #145982;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    font-size:80px;
    font-weight:bold;
    text-align:center;
    width:350px;
    border:1px solid #60b4e5;

    margin:60px auto;

    /*
        CSS3 gradients for webkit and mozilla browsers,
        fallback color for the rest:
    */

    background-color: #59aada;
    background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
}

a.button:hover{
    /* Lighter gradients for the hover effect */
    text-decoration:none;
    background-color: #5eb2e2;
    background-image: -moz-linear-gradient(#6bbbe9, #57a5d4);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6bbbe9), to(#57a5d4));
}

Во второй части кода мы применяем несколько CSS3-правил к кнопке для того, чтобы улучшить её внешний вид. Обратите внимание на две градации, которые указаны для Mozilla Firefox и браузеров семейства WebKit (Safari и Chrome). К сожалению, в отличие от других правил CSS3, они не содержат общего синтаксиса для отображения градаций, что значительно усложняет работу разработчиков.

Также важно указать версию для отката. Установить цвет фона в случае, когда браузер не поддерживает градации, реализованные посредством CSS.

Плагин оповещения BounceBox на jQuery и CSS3

Этап 3 – jQuery

Давайте начнём с создания плагина bounceBox. Как нам встречалось ранее, создание плагина в jQuery заключается в расширении объекта $.fn посредством новой функции. Параметр новой функции «this» представляет собой эквивалент параметров элементов jQuery относительно названия метода.

bouncebox-plugin/jquery.bouncebox.1.0.js

(function($){

    /* The plugin extends the jQuery Core with four methods */

    /* Converting an element into a bounce box: */
    $.fn.bounceBox = function(){

        /*
            Applying some CSS rules that center the
            element in the middle of the page and
            move it above the view area of the browser.
        */

        this.css({
            top        : -this.outerHeight(),
            marginLeft    : -this.outerWidth()/2,
            position    : 'fixed',
            left        : '50%'
        });

        return this;
    }

    /* The boxShow method */
    $.fn.bounceBoxShow = function(){

        /* Starting a downward animation */

        this.stop().animate({top:0},{easing:'easeOutBounce'});
        this.data('bounceShown',true);
        return this;
    }

    /* The boxHide method */
    $.fn.bounceBoxHide = function(){

        /* Starting an upward animation */

        this.stop().animate({top:-this.outerHeight()});
        this.data('bounceShown',false);
        return this;
    }

    /* And the boxToggle method */
    $.fn.bounceBoxToggle = function(){

        /*
            Show or hide the bounceBox depending
            on the 'bounceShown' data variable
        */

        if(this.data('bounceShown'))
            this.bounceBoxHide();
        else
            this.bounceBoxShow();

        return this;
    }

})(jQuery);

Мы определяем 4 отдельных метода, которые будут конвертировать div в bounceBox (и задаем позиционирование посредством правил CSS), отобразить его, скрыть и давать возможность переключения между двумя вариантами посредством метода jQuery animate().

Для переключения мы поддерживаем внутреннюю переменную посредством метода обработки данных, которые определяют, отображен ли блок или нет.

Все эти возможности будут доступны вам после того, как вы включите библиотеку jQuery и файл jquery.bounce.1.0.js на страницу. Для привлекательного эффекта вздрагивания вам понадобится jQuery Easing плагин, который включен в директорию плагина в архиве.

Данный плагин крайне просто использовать. Это вы можете видеть по коду, представленному ниже.

Script.js

$(document).ready(function(){

    /* Converting the #box div into a bounceBox: */
    $('#box').bounceBox();

    /* Listening for the click event and toggling the box: */
    $('a.button').click(function(e){

        $('#box').bounceBoxToggle();
        e.preventDefault();
    });

    /* When the box is clicked, hide it: */
    $('#box').click(function(){
        $('#box').bounceBoxHide();
    });
});

Этот код выполняется тогда, когда обнаружено событие document ready (т.е. полная загрузка документа). Таким образом, мы можем быть полностью уверенными в том, что все элементы в состоянии подгрузить jQuery. Далее мы первым делом конвертируем div #box в bounceBox, а также задействуем приёмники сигнала о нажатии на кнопку и на сам блок.

Вы можете внести любой желаемый код HTML в div, а он автоматически превратится в bounceBox. Вы также можете использовать больше, чем один bouncebox на странице одновременно.

На этом наш плагин завершён!

Заключение

Вы можете использовать данный плагин jQuery для реализации оповещений, которые точно будут заметны. Вы также можете внести в блок форму регистрации, подписку на рассылку, либо рекламные объявления. Не бойтесь экспериментировать, а также не забывайте рассказывать нам о проделанной работе в комментариях!

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Mysterious Master   Прочитано (раз): 6289   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930