Zebra_Dialog

Zebra_Dialog has no dependencies other than jQuery 1.4.1+

website:https://github.com/stefangabos/Zebra_Dialog/

截止目前为止，该项目已经一年多没有人维护了。

1.加载

<!--link rel="stylesheet" href="public/css/reset.css" type="text/css"-->
    <link rel="stylesheet" href="public/css/flat/zebra_dialog.css" type="text/css">
    <!--link rel="stylesheet" href="public/css/style.css" type="text/css"-->
    <link rel="stylesheet" href="libraries/highlight/public/css/ir_black.css" type="text/css">


    <script type="text/javascript" src="public/js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="libraries/highlight/public/javascript/highlight.js"></script>
    <script type="text/javascript" src="public/js/zebra_dialog.js"></script>
    <script type="text/javascript" src="public/js/main.js"></script>

    <script type="text/javascript">
    hljs.initHighlightingOnLoad();
    </script>

2. 默认对话框

 

<strong>1.</strong> Default dialog box, no custom settings. Click <a href="javascript:void(0)" id="example1">here</a> to open.

 

$('#example1').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
    });

效果：

3. 对话框类型

3.1 error

$('#example2_1').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong> has no dependencies other than <em>jQuery 1.5.2+</em> and works in all major' +
            ' browsers like<br>- Firefox<br>- Opera<br>- Safari<br>- Chrome<br>- Internet Explorer 6+', {
            'type':     'error',
            'title':    'Error'
        });
    });

效果：

3.2 warning

$('#example2_2').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong> is meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em>' +
            ' dialog boxes. <br><br> Can also be used as a notification widget - when configured to show no buttons and to close' +
            ' automatically - for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.', {
            'type':     'warning',
            'title':    'Warning'
        });
    });

3.3 question

$('#example2_3').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong> can generate 5 types of dialog boxes: confirmation, information, ' +
            ' warning, error and question.<br><br>The appearance of the dialog boxes is easily customizable by changing the CSS file ', {
            'type':     'question',
            'title':    'Question'
        });
    });

效果：

3.4 information

$('#example2_4').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong> dialog boxes can be positioned anywhere on the screen - not just in the middle!' +
            '<br><br>By default, dialog boxes can be closed by pressing the ESC key or by clicking anywhere on the overlay.', {
            'type':     'information',
            'title':    'Information'
        });
    });

效果：

3.5 confirm

$('#example2_5').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong> is a small (6KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+)' +
            ' and highly configurable dialog box plugin for jQuery meant to replace JavaScript\'s <em>alert</em> and <em>confirmation</em> dialog boxes.', {
            'type':     'confirmation',
            'title':    'Confirmation'
        });
    });

效果：

4. 对话框回调

$('#example31').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
            'type':     'question',
            'title':    'Custom buttons',
            'buttons':  [
                            {caption: 'Yes', callback: function() { alert('"Yes" was clicked')}},
                            {caption: 'No', callback: function() { alert('"No" was clicked')}},
                            {caption: 'Cancel', callback: function() { alert('"Cancel" was clicked')}}
                        ]
        });
    });

效果：

5. iframe

$('#example61').bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('<strong>A Wikipedia page</strong><br><br>', {
            source: {'iframe': {
                'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',
                'height': 500
            }},
            width: 800,
            title:  'External content loaded in an iFrame'
        });
    });

效果：