默认对话框扁平风格

Zebra_Dialog Demo：默认对话框

1.默认不带参数配置的对话框。点击这里查看效果。 
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');

 

2.以下是5种类型的对话框: error, warning, question, informationand 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.自定义按钮和回调函数。点击这里查看效果。

注意：onClose事件在对话框关闭后才被执行。你可以参考下一个例子如何在关闭对话框之前来执行函数。 
$.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自定义带回调函数的按钮。点击 这里查看效果。

注意：附加到按钮上的函数会在对话框关闭前触发（按钮一点就就触发）。 
$.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.将对话框放置在屏幕的右上角位置。点击这里查看效果。 
$.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.使用消息提示模式-不带按钮，2秒后自动消失。

注意：这种模式需要使用new关键字来实例化对象，最后打开的对话框将被关闭。
点击这里查看效果。 
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.通过AJAX加载外部内容。 点击这里查看效果。 
new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {'source':  {'ajax': 'ajax.html'},width: 600,'title': 'External content loaded via AJAX'});

 

6.1在iFrame中加载外部内容。 点击 这里查看效果。 
new $.Zebra_Dialog('<strong>Content loaded via AJAX:</strong>', {source: {'iframe': {       'src':  'http://en.m.wikipedia.org/wiki/Dialog_box',    'height': 500}},width: 800,title:  'External content loaded in an iFrame'});

 

7.自定义外观-标题为蓝黑色背景，以及一个自定义图标。

CSS样式为： 
/* 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') }
点击 这里查看效果。
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {'custom_class':  'myclass','title': 'Customizing the appearance'});