—»     —»   Заменяем диалоговое окно с подтверждением посредством jQuery
  Раздел: Руководства   Нет комментариев  

Заменяем диалоговое окно с подтверждением посредством jQuery



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

HTML-код

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

Index.php

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>

<!-- Including the Cuprum font with @font-face from Google's webfont API  -->

<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />

</head>
<body>

<div id="page">

        <div class="item">
            <a href="http://tutorialzine.com/?p=1274">
                <img src="http://cdn.tutorialzine.com/img/featured/1274.jpg" title="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" alt="Coding a Rotating Image Slideshow w/ CSS3 and jQuery" width="620" height="340" />
            </a>
            <div class="delete"></div>
        </div>

        <!-- Other "item" divs -->

</div>

<!-- Including jQuery and our jQuery Confirm plugin -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>

</body>
</html>


В верхнем отделе документа мы включили шрифт Cuprum из каталога шрифтов от Google, jQuery.confirm.css (каскадные таблицы стилей для диалогового окна), а также styles.css – каскадные таблицы стилей нашей страницы.

В самом низу тела документа мы включили библиотеку jQuery, jquery.confirm.js (основной файл плагина), а также script.js, который отслеживает событие клика по кнопке и запускает плагин. В заключающем этапе нашей сегодняшней обучающей статьи мы расскажем вам об этих двух файлах.

Для того чтобы включить окно подтверждения в свой веб-сайт, вам надо будет скопировать папку jquery.confirm из скачанного архива, и включить jquery.confirm.css в головную часть кода, а также файл jquery.confirm.js перед тэгом, завершающим тело документа + библиотеку jQuery.


Само по себе диалоговое окно представляет ничто иное, как пару строк кода HTML. Ниже вы можете видеть код, вставленный плагином для отображения диалогового окна.

Пример кода диалогового окна

<div id="confirmOverlay">
    <div id="confirmBox">

        <h1>Title of the confirm dialog</h1>
        <p>Description of what is about to happen</p>

        <div id="confirmButtons">
            <a class="button blue" href="#">Yes<span></span></a>
            <a class="button gray" href="#">No<span></span></a>
        </div>
    </div>
</div>


Код добавлен в тело документа. confirmOverlay отображен поверх остальной страницы, что предотвращает любое взаимодействие с элементами страницы, если диалоговое окно отображено. h1, p и div confirmButtons расставлены в соответствии структуры, внесённое в настройки плагина. Далее в статье вы ещё подробнее ознакомитесь с этим.

Заменяем диалоговое окно с подтверждением посредством jQuery

CSS-код

Оформление диалогового окна содержится в файле jquery.confirm.css. Это значительно упрощает процесс интеграции в уже готовый проект, и стилизация выполнена таким образом, что вы можете быть уверены, что стили не смешаются с теми, которые уже имеются на странице.

jquery.confirm.css

#confirmOverlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    background:url('ie.png');
    background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) repeat-x rgba(11,11,11,0.2);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11,11,11,0.6))) repeat-x rgba(11,11,11,0.2);
    z-index:100000;
}

#confirmBox{
    background:url('body_bg.jpg') repeat-x left bottom #e5e5e5;
    width:460px;
    position:fixed;
    left:50%;
    top:50%;
    margin:-130px 0 0 -230px;
    border: 1px solid rgba(33, 33, 33, 0.6);

    -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
    -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset;
}

#confirmBox h1,
#confirmBox p{
    font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    background:url('header_bg.jpg') repeat-x left bottom #f5f5f5;
    padding: 18px 25px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
    color:#666;
}

#confirmBox h1{
    letter-spacing:0.3px;
    color:#888;
}

#confirmBox p{
    background:none;
    font-size:16px;
    line-height:1.4;
    padding-top: 35px;
}

#confirmButtons{
    padding:15px 0 25px;
    text-align:center;
}

#confirmBox .button{
    display:inline-block;
    background:url('buttons.png') no-repeat;
    color:white;
    position:relative;
    height: 33px;

    font:17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif;

    margin-right: 15px;
    padding: 0 35px 0 40px;
    text-decoration:none;
    border:none;
}

#confirmBox .button:last-child{    margin-right:0;}

#confirmBox .button span{
    position:absolute;
    top:0;
    right:-5px;
    background:url('buttons.png') no-repeat;
    width:5px;
    height:33px
}

#confirmBox .blue{                background-position:left top;text-shadow:1px 1px 0 #5889a2;}
#confirmBox .blue span{            background-position:-195px 0;}
#confirmBox .blue:hover{        background-position:left bottom;}
#confirmBox .blue:hover span{    background-position:-195px bottom;}

#confirmBox .gray{                background-position:-200px top;text-shadow:1px 1px 0 #707070;}
#confirmBox .gray span{            background-position:-395px 0;}
#confirmBox .gray:hover{        background-position:-200px bottom;}
#confirmBox .gray:hover span{    background-position:-395px bottom;}


Здесь используются преимущества нового CSS3. В определении #confirmOverlay мы используем градации CSS3 (которые работают только Firefox, Safari и Chrome) с предусмотренным откатом в виде прозрачного PNG.

Далее, в расположенном по центру дисплея #confirmBox, мы добавили внутреннюю тень блока (нечто похожее на внутреннее свечение в Photoshop). Мы также использовали шрифт Cuprum, который был добавлен из каталога шрифтов от Google.

Наряду с тенями текста, вы можете увидеть стилизацию кнопок. Они реализованы при помощи скользящих дверок. На данный момент доступно два типа дизайна – синий и серый. Вы можете добавить новый цвет кнопки посредством добавления новых объявлений в код.

jQuery

Перед тем, как мы перейдём к исходному коду плагина, давайте сначала посмотрим немного дальше. В script.js вы можете увидеть, как запускается плагин.

Script.js

$(document).ready(function(){

    $('.item .delete').click(function(){

        var elem = $(this).closest('.item');

        $.confirm({
            'title'        : 'Delete Confirmation',
            'message'    : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons'    : {
                'Yes'    : {
                    'class'    : 'blue',
                    'action': function(){
                        elem.slideUp();
                    }
                },
                'No'    : {
                    'class'    : 'gray',
                    'action': function(){}    // Nothing to do in this case. You can as well omit the action property.
                }
            }
        });

    });

});


Когда в нашем примере нажимается div .deleted, скрипт выполняет определённую плагином функцию $.confirm. Далее приводится заголовок диалогового окна, описание, а также объект с кнопками. Каждая кнопка имеет имя класса CSS, а также параметр действия. Действие представляет собой функцию, которая запускается при нажатии кнопки.

Теперь давайте перейдём к интересной части. В jquery.confirm.js вы можете увидеть исходный код нашего диалогового окна.

Jquery.confirm.js

(function($){

    $.confirm = function(params){

        if($('#confirmOverlay').length){
            // A confirm is already shown on the page:
            return false;
        }

        var buttonHTML = '';
        $.each(params.buttons,function(name,obj){

            // Generating the markup for the buttons:

            buttonHTML += '<a href="#" class="button '+obj['class']+'">'+name+'<span></span></a>';

            if(!obj.action){
                obj.action = function(){};
            }
        });

        var markup = [
            '<div id="confirmOverlay">',
            '<div id="confirmBox">',
            '<h1>',params.title,'</h1>',
            '<p>',params.message,'</p>',
            '<div id="confirmButtons">',
            buttonHTML,
            '</div></div></div>'
        ].join('');

        $(markup).hide().appendTo('body').fadeIn();

        var buttons = $('#confirmBox .button'),
            i = 0;

        $.each(params.buttons,function(name,obj){
            buttons.eq(i++).click(function(){

                // Calling the action attribute when a
                // click occurs, and hiding the confirm.

                obj.action();
                $.confirm.hide();
                return false;
            });
        });
    }

    $.confirm.hide = function(){
        $('#confirmOverlay').fadeOut(function(){
            $(this).remove();
        });
    }

})(jQuery);


Наш плагин определяет метод $.confirm(). Данный метод обрабатывает данные, которые вы внесли, конструирует разметку, а затем добавляет всё это на страницу. Так как div #confirmOverlay имеет фиксированную позицию посредством CSS-объявления, мы оставим процесс центрирования браузеру, а затем перемещать его при прокрутке страницы пользователем.

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

На этом наше диалоговое окно завешено!

Подытожим

Вы можете отредактировать внешний вид диалогового окна посредством файла jquery.confirm.css. Так как атрибут сообщения в диалоговом окне использует HTML-код, вы можете добавлять туда изображения или иконки.

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

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

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

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

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


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

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031