Новые уроки
Получай новые уроки по RSS

Подписка на рассылку


Голосование
Чего выкладывать больше?
Программ
Уроков
Скриптов
Шаблонов
Макетов
CMS
Видеоуроков
Облако тегов

Jquery → Замена стандартным диалог окнам

Замена стандартным диалог окнам


Демо: смотреть
Скачать: jquery.confirm.zip [21,73 Kb] (cкачиваний: 162)


Продолжая наши поиски для создания настраиваемых альтернатив для элементов управления браузера, на этой неделе мы строим кросс-браузер, пользовательские окна диалогов. Простой в использовании плагин 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>


Пример кода диалога
<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>


А выглядить это будет вот так:
Замена стандартным диалог окнам


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;}


jQuery
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.
                }
            }
        });

    });

});


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);


Заключение

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

Вы даже можете альтернативно использовать этот плагин, как предупреждение чего либо (например об ошибке ) - вам просто необходимо удалить кнопки в выборе действий.
Опубликовал dimas_ua, 19-03-2011, 00:00 Комментариев: 0
 (голосов: 0)