zoukankan      html  css  js  c++  java
  • Zebra_Dialog 弹出层插件

    1. Default dialog box, no custom settings. Click here to open.
    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
     
    
    2. The five dialog box types, with titles: error, warning, question, information and confirmation.
    // this example is for the "error" box only
    // for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
    // and the text for the "title" property also changes
    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
        'type':     'error',
        'title':    'Error'
    });
     
    
    3. Custom buttons and the callback function. Click here to open.
    Note that the onClose event is executed *after* the dialog box is closed! see the next example for executing functions *before* the closing of the dialog box
    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
        'type':     'question',
        'title':    'Custom buttons',
        'buttons':  ['Yes', 'No', 'Help'],
        'onClose':  function(caption) {
            alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
        }
    });
     
    
    3.1 Custom buttons with attached callback functions. Click here to open.
    Note that the callback functions attached to custom buttons are executed *before* the dialog box is closed and as soon as a button is clicked! see the previous example for executing functions *after* the closing of the dialog box
    $.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')}}
                    ]
    });
     
    
    4. Position the dialog box in the top-right corner. Click here to open.
    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
        'title':    'Custom positioning',
        'position': ['right - 20', 'top + 20']
    });
     
    
    5. Use as a notification widget - no buttons and close automatically after 2 seconds. 
    Note how the plugin needs to be instantiated with the "new" keyword or only the last opened box will close!
    Click here to open.
    new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
        'buttons':  false,
        'modal': false,
        'position': ['right - 20', 'top + 20'],
        'auto_close': 2000
    });
     
    
    6. External content loaded via AJAX. Click here to open.
    new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {
        'source':  {'ajax': 'ajax.html'},
         600,
        'title': 'External content loaded via AJAX'
    });
     
    
    6.1 External content loaded in an iFrame. Click here to open.
    new $.Zebra_Dialog('<strong>Content loaded via AJAX:</strong>', {
        source: {'iframe': {
            'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',
            'height': 500
        }},
         800,
        title:  'External content loaded in an iFrame'
    });
     
    
    7. Customizing the appearance - make the title bar have a dark-blue background and show a custom icon! 
    
    The CSS is
    /* Notice how we're targting the dialog box's title bar through the custom class */
    .myclass .ZebraDialog_Title { background: #DEDEDE; border-bottom: 1px solid #222 }
    .myclass .ZebraDialog_Body { background-image: url('coffee_48.png') }
    Click here to open.
    new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
        'custom_class':  'myclass',
        'title': 'Customizing the appearance'
    });
    (function ($) {
        $.psAlert = function (info, type,setting,title) {
            var alerttype = '';
            var alerttitle = '';
            switch (type) {
                case 1:
                    alerttype = 'error';
                    alerttitle = '错误提示';
                    break;
                case 2:
                    alerttype = 'warning';
                    alerttitle = '警告提示';
                    break;
                case 3:
                    alerttype = 'information';
                    alerttitle = '消息提示';
                    break;
                case 4:
                    alerttype = 'confirmation';
                    alerttitle = '正确提示';
                    break;
                default:
                    alerttitle = title;
                    break;
            }
            var defaults = {
                'type': alerttype,
                'title': alerttitle
            };
            var opts = $.extend(defaults, setting);
            new $.Zebra_Dialog(info, opts);
        };
    })(jQuery);
    //$.psAlert('请输入回复内容!', 2);
    
    //if (result.DoFlag) {
    //    $.psAlert(result.DoResult, 4, {
    //        'buttons': [
    //        {
    //            caption: '确定', callback: function () {
    //                location.reload();
    //            }
    //        }
    //        ]
    //    });
    //}
    
    //$.psAlert(rejectcontentbox, 0, {
    //    'modal': true,
    //    'overlay_close': false,
    //    'custom_class': 'dialog',
    //    'overlay_opacity': 0.5,
    //    'width': 300,
    //    'height': 200,
    //    'buttons': [
    //        {
    //            caption: '确认',
    //            callback: function () {
    //                refusedReason = $.trim(($("#refusedre").val()));
    //                if ($.trim(refusedReason).length == 0) {
    //                    $.psAlert('请注明拒绝理由!', 2);
    //                } else {
    //                    auditComment();
    //                }
    //            }
    //        }
    //    ]
    //}, "拒绝理由");
  • 相关阅读:
    700. Search in a Binary Search Tree
    100. Same Tree
    543. Diameter of Binary Tree
    257. Binary Tree Paths
    572. Subtree of Another Tree
    226. Invert Binary Tree
    104. Maximum Depth of Binary Tree
    1、解决sublime打开文档,出现中文乱码问题
    移植seetafaceengine-master、opencv到ARM板
    ubuntu16.04-交叉编译-SeetaFaceEngine-master
  • 原文地址:https://www.cnblogs.com/shy1766IT/p/5330987.html
Copyright © 2011-2022 走看看