当前位置: 首页 > 工具软件 > Zebra_Dialog > 使用案例 >

zebra_dialog简介可配置的全部参数

祁曦哲
2023-12-01

   原文网址  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    
                                                                             调用此方法手动关闭对话框。


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


 类似资料: