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, 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. 自定义按钮和回调函数。点击这里查看效果。

注意：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'
});