zebra_dialog简介可配置的全部参数

最新推荐文章于 2023-05-10 13:52:24 发布

置顶小小的大树

最新推荐文章于 2023-05-10 13:52:24 发布

阅读量2.8k

点赞数

分类专栏：前台文章标签：注册弹窗 zebra dialog 对话框

前台专栏收录该内容

0 篇文章 0 订阅

订阅专栏

原文网址 http://stefangabos.ro/jquery/zebra-dialog/#how-to-use

界面友好，可配置属性多，可以修改css的一款弹窗工具。推荐一下

1.3..8版下载地址http://pan.baidu.com/s/1i37syot

功能特色

漂亮的对话框，开源
5种类型的对话框可用：确认，信息，警告，和问题
支持ajax，inline，iframe
通过编辑CSS容易定制的外观（层叠样式表）文件
创建蒙版对话框和非蒙版对话框
轻松添加自定义按钮
位置灵活默认是在屏幕中间
使用回调函数来处理用户的选择
支持几乎所有浏览器（Firefox，opera，Safari，Chrome，Internet Explorer 6 +）

使用方法

1.导入css和js

    < link rel="stylesheet"
    href="${pageContext.request.contextPath}/style/zebra_dialog.css"
    type="text/css" />
    <script type="text/javascript"
    src="${pageContext.request.contextPath}/js/zebra_dialog.js"></script>

2. 调用函数

$.Zebra_Dialog('<p style="font-size:180%;position: relative;left: 4px;top: 4px;font-weight:bold;">注册成功</p>',
	{'onClose' : function() {window.top.location.href = "${pageContext.request.contextPath}/index/init";},
						'modal' : false,
						 'show_close_button':false,
 						'center_buttons':true,
 						'width':280,
 						});

全部的配置参数

写在前面

对于提示信息可以通过对文字格式的控制来达到控制显示效果的目的。

通过控制参数和改变css基本可以达到任何需要的显示效果

参数名类型解释

animation_speed_hide integer ms为单位的关闭速度，defalut 250

animation_speed_show integer ms为单位的显示速度，defalut 0

auto_close mixed ms单位后自动关闭对话框，defalut false

buttons mixed 添加自定义按钮如果设置为TRUE，使用默认的按钮。

默认为true

$.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')}}
                ]
});

callback返回false阻止对话框关闭

设为false将不显示按钮

center_buttons boolean 设为true按钮居中。默认flase，放在左下角。

      custom_class                  mixed           添加自己的样式，simple：.mycustom zebradialog_title{background red}
                                                                                            zebradialog_body。 {background： URL（“coffee_48.png”)}
                                                                                       “custom_class”：“MyClass”

通过修改样式可以得到自己行要的效果，范围很大。

      keyboard                     boolean            设置为true时，按下ESC键将关闭对话框。默认是true

      max_height                                      integer               最大高度，超过会显示进度条
                                                   0的话一直增加
                                                   默认是0

      message                          string               对话框中显示的内容

      model                                                boolean           是否显示遮盖层，默认显示true

overlay_close boolean 当遮盖层被点击时对话框关闭
默认true

overlay_opacity double 遮盖层的不透明度（0至1），默认0.9

position mixed 对话框呆的位置['left+20','right-20','bttom-20','center+20']

reposition_speed integer ms单位调整窗口大小的时间默认100

show_close_button boolean 是否显示右上角的×默认true

      source                                               mixed               通过ajax，iframe，inline添加数据
                                                                                             source：{'ajax '：{“URL”：' HTTP：/ / myurl COM /’，cache：false}}
                                                                                              source：{'iframe'：{“src”：' HTTP：/ / myurl COM /’，width：460，heigth：450，scrolling：true}}
                                                                                              如果内联html使用$("heml1").html()
                                                                                              source：{'inline '：$（“# myelement”）}

      title                       string                 对话框的标题默认“”

      type                                                   mixed                   不需要图标设为flase默认为information

vcenter_short_message boolean 消息居中，默认true

width integer 对话框的宽度

onclose
close 调用此方法手动关闭对话框。

第一次写文章不足之处欢迎指正