Zebra_Dialog-简单实用的jQuery模态对话框插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

Zebra_Dialog是一款简单实用的jQuery模态对话框插件。用它可以替代原生JavaScript的警告框和确认框，也可以用它来制作消息提示框。它兼容IE6+浏览器，支持Ajax加载内容和iFrame框架等。Zebra_Dialog的特点还有：

对话框外观漂亮，有2种可选的主题效果。
支持5种类型的对话框：confirmation, information, warning, error 和 question。
对话框的内容可以通过AJAX、iFrome或内联元素来调用。
通过样式表可以很容易修改对话框的外观。
可以创建模态和非模态对话框。
可以添加自定义按钮。
消息框的显示位置可以任意定制。
通过回调函数来处理用户的选择。
兼容所有的现代浏览器：Firefox, Opera, Safari, Chrome, Internet Explorer 6+。

安装

可以通过bower来安装Zebra_Dialog插件。

bower install zebra_dialog

使用方法

或者下载压缩包，在页面中引入jquery(需要1.4.1+版本)，zebra_dialog.js以及对于主题的CSS样式。

<link rel="stylesheet" href="path/to/themes/default/zebra_dialog.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="path/to/zebra_dialog.js"></script>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化Zebra_Dialog插件。

$(document).ready(function() {

    // 当点击某个链接时显示对话框
    $(anchor).bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('The link was clicked!');
    });

});

配置参数

所有的配置参数都是可选的。

animation_speed_hide：模态遮罩和对话框在关闭时的动画速度，单位毫秒。默认值为250。
animation_speed_show：模态遮罩和对话框在显示时的动画速度，单位毫秒。默认值为0。
auto_close：在多少毫秒之后自动关闭对话框，或设置为false不自动关闭对话框。默认值为false。
buttons：自定义按钮。如果设置为true，将使用默认的按钮：“question”对话框为[‘Yes’, ‘No’]，其它类型对话框为[‘Ok’]。
要自定义按钮，可以使用一个数组，数组中的值为按钮的标题，例如：['按钮1','按钮2']。

如果不需要按钮设置为false。

当用户点击了对话框中的某个按钮时，对话框关闭，onClose事件会被触发，回调函数会接收到被点击按钮的标题。

你也可以使用一个对象数组为单独的按钮附加事件：
```
[
{caption: '按钮1', callback: function() { // code }},
{caption: '按钮2', callback: function() { // code }}
]  
```
它们之间的区别是，使用这种方法附加的事件会在按钮被点击的同时就被执行，而不是在对话框被关闭之后才执行。

按钮的回调函数接收这个对话框的jQuery对象作为参数。

在回调函数中返回false将阻止对话框的关闭。
center_buttons：设置为true，将所有的按钮在对话框中居中显示。默认值为false。
custom_class：对话框容器的外部CSS样式。可以用于在运行是修改对话框的样式。默认为false。
keyboard：设置为true可以使用键盘的ESC将来关闭对话框。默认为true。
max_height：对话框的最大高度，单位像素，超出这个高度将显示滚动条。默认为0。
message：对话框中的信息。
modal：是否显示模态遮罩层，默认为true。
overlay_close：是否点击遮罩层时关闭对话框？默认为true。
overlay_opacity：遮罩层的透明度，默认为0.9。
position：对话框的位置。
可以是center或者带2个元素的数组： ['horizontal_position +/- offset', 'vertical_position +/- offset']。horizontal_position可以是“left”, “right” 或 “center”，vertical_position可以是 “top”, “bottom” 或 “middle”，offset是水平或垂直的偏移数量。

位置是相对于viewport来计算的，例如：

['left + 20','top + 20']会将对话框放置在视口左上角，向左和向下偏移20像素。

默认值为['center','middle']。
reposition_speed：当浏览器窗口尺寸改变的时候重新定位对话框位置的持续时间。单位毫秒，默认值为100。
show_close_button：设置为true时会在对话框的左上角显示一个关闭按钮（“X”），默认为true。
source：通过AJAX, iFrames或内联元素添加对话框内容。这个属性可以是下面的其中一种形式：
1、'ajax':object
```
source: {'ajax':'http://myurl.com/'}

source: {'ajax': {
  'url': 'http://myurl.com/',
  'cache': false
}}  
```
注意，你不能使用success属性，因为它会被插件覆盖。你可以使用complete属性来替代。

2、'iframe': object
```
source: {'iframe':'http://myurl.com'}

source: {'iframe': {
'src': 'http://myurl.com/',
'width': 480,
'height': 320,
'scrolling': 'no'
}}  
```
注意：必须设置iFrome的宽度和高度，并相应的调整对话框的宽度属性。

3、'inline'：selector
```
source: {'inline': $('#myelement')}  
```
默认为false。
title：对话框的标题，默认为""。
type：对话框的类型。可以是：confirmation、error、information、question或warning。
如果你不需要图标，可以设置该参数为false。

默认情况下，除了“question”类型外，其它类型的对话框都是带“OK”按钮，question”类型对话框带“OK”和“Cancel”两个按钮。
vcenter_short_message：短消息是否垂直居中。默认为true。
width：对话框的宽度。默认对话框的宽度通过CSS来设置，使用该参数可以在运行使覆盖CSS中的设置。