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

效果:

时间: 2024-10-04 04:15:53

Zebra_Dialog的相关文章

javascript开源大全

javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的JavaScript脚本-Node.js jQuery图表插件-jQchart HTML5-开发框架-jQuery-Mobile 跨浏览器的RIA框架-ExtJS Flash视频播放器-JW-PLAYER jQuery表单插件-jQuery.form jQuery-File-Upload 可视化HT

jstree的基本使用例子

var menu = (function() { var _menu = {data:{}, initMenu : function() { $.jstree.defaults.core.themes.variant = "large"; $.jstree.defaults.core.themes.responsive = true; $.jstree.defaults.sort=function(a,b){ return this.get_node(a).original.order

Jquery form验证

手机号验证 //验证11位手机号 1开头 function CheckMobile(str) { var re = /^1\d{10}$/ if (re.test(str)) { return true; } else { return false; } }; 手机号验证 /*验证电话号码 验证规则:区号+号码,区号以0开头,3位或4位 号码由7位或8位数字组成 区号与号码之间可以无连接符,也可以“-”连接 如01088888888,010-88888888,0955-7777777 */ fu

JQuery 弹出式对话框组件

1.fancybox website:http://fancyapps.com/fancybox/ 具体使用方法:http://www.cnblogs.com/mumutouv/p/4267408.html 2.Lightbox 3.CeraBox 4.artDialog 5.FaceBox 6.JModel 7.JQuery showDialog 8.LeanModal 该对话框控件比较简单.不在优先选择的范围之内. 9.Zebra_Dialog Zebra_Dialog 是一个小型的对话框插

ltt.js

var dailyBox = $('.daily-box-office'), curDate = new Date(), curYear = curDate.getFullYear(), curMonth = curDate.getMonth()+1; dailyBox.find('.month').text('('+curMonth+'月)'); try{ $.ajax({ url : "http://ltt.1905.com/rank/getranklist", dataType

【精品推荐】web开发人员应该知道的31个jQuery模态对话框

在网站开发中经常会用到模态窗口,如果直接利用javascirpt的window.showModalDialog()打开一个模式窗口,虽然实现了模式窗口的功能,但十分的不好看.当我们遇到这样的需求时很多人会从网上寻找这些jQuery的模态对话框,有时候搜索了很多,但都不是很合适,那为什么人们喜欢模态窗口呢?那模态窗口到底有什么优点呢? 当一个模态窗口包含一个较小的元素时,用户并不需要加载一个完成的全新新页面就可以访问它.(达到同样效果的另一种方式来是使用基于AJAX的标签) . 通过模态窗口,您提