开发者社区> 啊里上海> 正文

jQuery UI dialog 参数说明[转发]

简介: 初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框。 没有参数,表示按照默认的设置初始化对话框,在当前最新版本的 jQuery UI 1.8.9 中, dialog 支持下列属性。
+关注继续查看

初始化参数

对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,或者传递了一个对象,那么就表示在初始化一个对话框。

没有参数,表示按照默认的设置初始化对话框,在当前最新版本的 jQuery UI 1.8.9 中, dialog 支持下列属性。

autoOpen   初始化之后,是否立即显示对话框,默认为 true

modal        是否模式对话框,默认为 false

closeOnEscape   当用户按 Esc 键之后,是否应该关闭对话框,默认为 true

draggable  是否允许拖动,默认为 true

resizable    是否可以调整对话框的大小,默认为 true

title           对话框的标题,可以是 html 串,例如一个超级链接。

position     用来设置对话框的位置,有三种设置方法

     1.  一个字符串,允许的值为  'center', 'left', 'right', 'top', 'bottom'.  此属性的默认值即为 'center',表示对话框居中。      2.  一个数组,包含两个以像素为单位的位置,例如, 

var dialogOpts = {     position: [100100] };

     3. 一个字符串组成的数组,例如, ['right','top'],表示对话框将会位于窗口的右上角。

var dialogOpts = {     position: ["left""bottom"] };

 

一组关于尺寸的属性,以像素为单位。

width     宽度, 默认 300

height    高度,默认 'auto'

minWidth     最小宽度,默认 150

minHeight    最小高度,默认 150

maxWidth   最大宽度

maxHeight   最大高度

 

还有关于关闭的效果

hide       当对话框关闭时的效果,默认为 null, 例如, hide: 'slide'

show     当对话框打开时的效果。默认为 null

 

堆叠

stack     对话框是否叠在其他对话框之上。默认为 true

zIndex   对话框的 z-index 值,一个整数,越大越在上面。默认 1000

 

按钮

buttons   一个对象,属性名将会被作为按钮的提示文字,属性值为一个函数,即按钮的处理函数。

var dialogOpts = {    buttons: {       "Ok"function() { } ,       "Cancel"function() {}    } } $("#myDialog").dialog(dialogOpts);

 

IE6 的 select 元素穿透问题

bgiframe     解决 IE6 的 select 元素穿透问题,通过增加一个 iframe 来解决。默认为  true

这一功能需要使用脚本 jquery.bgiframe-2.1.2,脚本在 jQuery UI 压缩包中 development-bundle/external 文件夹中,需要将这个文件加入到页面中。

<script src="../jquery-1.4.4.js"></script><script src="../external/jquery.bgiframe-2.1.2.js"></script><script src="../ui/jquery.ui.core.js"></script>

 

这个控件现在有一个bug,在弹出窗口有遮罩层的情况下,在chrome下,如果出现纵向滚动条,无法用鼠标拖动,只能使用滚轮。

上边的说明来自 王洋

设置前

设置后

 

示例

$("#dialog").dialog({     bgiframe: true,     resizable: false,     height:140,     modal: true,     overlay: {         backgroundColor: '#000',         opacity: 0.5     },     buttons: {         'Delete all items in recycle bin'function() {             $(this).dialog('close');         },         Cancel: function() {             $(this).dialog('close');         }     } });

效果如下。

 

对话框的方法

初始化之后,就可以使用对话框了,比如说打开对话框,关闭对话框,这需要通过对话框的方法来完成。

对话框的方法需要通过调用 dialog 函数,并传递字符串形式的方法来完成。例如,dialog( "open" )  表示调用对话框的 open 方法。

open     打开对话框,需要注意的是,并没有 open() 方法,而是通过 dialog( "open" ) 来调用。例如,  .dialog( "open" )

close     关闭对话框

$(this).dialog('close');

destroy  摧毁一个对话框,去除对话框功能,将元素还原为初始化之前的状态。

isOpen   检查对话框的状态,如果已经打开,返回 true.

moveToTop  将对话框移到对话框的顶端

option    设置或者读取对话框某个属性的值,有两种用法。

    如果第二个参数为字符串,如果提供了三个参数,表示设置,如果两个参数,表示读取。 例如 .dialog( "option" , optionName , [value] )

    如果第二个参数为对象,表示一次性设置多个属性。

enable   启用对话框

disable  禁用对话框

对话框的事件

在对话框使用过程中,还将触发多种事件,我们可以自定义事件处理函数进行响应。

create

open

focus

dragStart

drag

dragStop

resizeStart

resize

resizeStop

beforeClose

close

例如,下面的设置了 open,close,beforeClose 的事件处理,显示窗口的状态。

var dialogOpts = {      open: function() {              $("#status").find(".ui-widget-content").text("The dialog is open");          },      close: function() {              $("#status").find(".ui-widget-content").text("The dialog is closed");          },      beforeclose: function() {              if (parseInt($(".ui-dialog").css("width")) == 300 ||                  parseInt($(".ui-dialog").css("height")) == 300) {                return false              }          } }; $("#myDialog").dialog(dialogOpts);

 效果如下

 

对话框使用常见问题

常见的问题就是多次初始化一个对话框。

对话框仅仅需要初始化一次,多次初始化会有问题。

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">  
    function test()
    {
        alert("调用");
    }  
    $(function(){
             $('#dialog').dialog({
     autoOpen: true,//如果设置为true,则默认页面加载完毕后,就自动弹出对话框;相反则处理hidden状态。 
     bgiframe: true, //解决ie6中遮罩层盖不住select的问题  
     width: 600,
     modal:true,//这个就是遮罩效果   
     buttons: {
      "Ok": function() { 
          test();//在这里调用函数
       $(this).dialog("close"); 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }
    });
    
             $('#btn').click(function(){
     $('#dialog').dialog('open');
     return false;
    });
       });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="demo">
            <div>
                <input type="button" id="btn" value="点我啊" />
                <div>
                    <div id="dialog" title="嘿嘿" style="">
                        <p>
                            你个废物</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

概述   
一个浮动的窗口,包含标题和内容两部分。可以移动,调整大小,以及关闭图标'×'。   
如果内容长度超过了对话框内容区域的显示,则会自动出现滚动条。   
除此之外,还有一些常用的选项,如:添加底部按钮栏、模式窗口屏蔽层等。   
官方示例地址:http://jqueryui.com/demos/dialog/   
    
·参数(名称 : 参数类型 : 默认值)   
autoOpen : Boolean : true   
  如果设置为true,则默认页面加载完毕后,就自动弹出对话框;相反则处理hidden状态。   
  初始:$('.selector').dialog({ autoOpen: false });   
  获取:var autoOpen = $('.selector').dialog('option', 'autoOpen');   
  设置:$('.selector').dialog('option', 'autoOpen', false);   
    
bgiframe : Boolean : false   
  如果设置为true,则调用bgiframe插件,用于修复在IE6浏览器中无法显示于其它控件(select,flash)之上的问题。   
  初始:$('.selector').dialog({ bgiframe: true });   
  获取:var bgiframe = $('.selector').dialog('option', 'bgiframe');   
  设置:$('.selector').dialog('option', 'bgiframe', true);   
    
buttons : Object : { }   
  为对话框添加相应的按钮及处理函数。   
  初始:$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });   
  获取:var buttons = $('.selector').dialog('option', 'buttons');   
  设置:$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });   
    
closeOnEscape : Boolean : true   
  设置当对话框打开的时候,用户按ESC键是否关闭对话框。   
  初始:$('.selector').dialog({ closeOnEscape: false });   
  获取:var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');   
  设置:$('.selector').dialog('option', 'closeOnEscape', false);   
    
dialogClass : String : ''   
  设置指定的类名称,它将显示于对话框的标题处。   
  初始:$('.selector').dialog({ dialogClass: 'alert' });   
  获取:var dialogClass = $('.selector').dialog('option', 'dialogClass');   
  设置:$('.selector').dialog('option', 'dialogClass', 'alert');   
    
draggable : Boolean : true   
  如果设置为true,则允许拖动对话框的标题栏移动窗口。   
  初始:$('.selector').dialog({ draggable: false });   
  获取:var draggable = $('.selector').dialog('option', 'draggable');   
  设置:$('.selector').dialog('option', 'draggable', false);   
    
height : Number : 'auto'   
  设置对话框的高度(单位:像素)。   
  初始:$('.selector').dialog({ height: 530 });   
  获取:var height = $('.selector').dialog('option', 'height');   
  设置:$('.selector').dialog('option', 'height', 530);   
    
hide : String : null   
  使对话框关闭(隐藏),可添加动画效果。   
  初始:$('.selector').dialog({ hide: 'slide' });   
  获取:var hide = $('.selector').dialog('option', 'hide');   
  设置:$('.selector').dialog('option', 'hide', 'slide');   
    
maxHeight : Number : false   
  设置对话框的最大高度(单位:像素)。   
  初始:$('.selector').dialog({ maxHeight: 400 });   
  获取:var maxHeight = $('.selector').dialog('option', 'maxHeight');   
  设置:$('.selector').dialog('option', 'maxHeight', 400);   
    
maxWidth : Number : false   
  设置对话框的最大宽度(单位:像素)。   
  初始:$('.selector').dialog({ maxWidth: 600 });   
  获取:var maxWidth = $('.selector').dialog('option', 'maxWidth');   
  设置:$('.selector').dialog('option', 'maxWidth', 600);   
    
minHeight : Number : 150   
  设置对话框的最小高度(单位:像素)。   
  初始:$('.selector').dialog({ minHeight: 300 });   
  获取:var minHeight = $('.selector').dialog('option', 'minHeight');   
  设置:$('.selector').dialog('option', 'minHeight', 300);   
    
minWidth : Number : 150   
  设置对话框的最小宽度(单位:像素)。   
  初始:$('.selector').dialog({ minWidth: 400 });   
  获取:var minWidth = $('.selector').dialog('option', 'minWidth');   
  设置:$('.selector').dialog('option', 'minWidth', 400);   
    
modal : Boolean : false   
  是否为模式窗口。如果设置为true,则在页面所有元素之前有个屏蔽层。   
  初始:$('.selector').dialog({ modal: true });   
  获取:var modal = $('.selector').dialog('option', 'modal');   
  设置:$('.selector').dialog('option', 'modal', true);   
    
position : String, Array : 'center'   
  设置对话框的初始显示位置。可选值: 'center', 'left', 'right', 'top', 'bottom', 或是一个数组['right','top']   
  初始:$('.selector').dialog({ position: 'top' });   
  获取:var position = $('.selector').dialog('option', 'position');   
  设置:$('.selector').dialog('option', 'position', 'top');   
    
resizable : Boolean : true   
  设置对话框是否可以调整大小。   
  初始:$('.selector').dialog({ resizable: false });   
  获取:var resizable = $('.selector').dialog('option', 'resizable');   
  设置:$('.selector').dialog('option', 'resizable', false);   
    
show : String : null   
  用于显示对话框。   
  初始:$('.selector').dialog({ show: 'slide' });   
  获取:var show = $('.selector').dialog('option', 'show');   
  设置:$('.selector').dialog('option', 'show', 'slide');   
    
stack : Boolean : true   
  设置移动时对话框是否前置于其它的对话框前面。   
  初始:$('.selector').dialog({ stack: false });   
  获取:var stack = $('.selector').dialog('option', 'stack');   
  设置:$('.selector').dialog('option', 'stack', false);   
    
title : String : ''   
  指定对话框的标题,也可以在对话框附加元素的title属性中设置标题。   
  初始:$('.selector').dialog({ title: 'Dialog Title' });   
  获取:var title = $('.selector').dialog('option', 'title');   
  设置:$('.selector').dialog('option', 'title', 'Dialog Title');   
    
width : Number : 300   
  设置对话框的宽度(单位:像素)。   
  $('.selector').dialog({ width: 460 });   
  获取:var width = $('.selector').dialog('option', 'width');   
  设置:$('.selector').dialog('option', 'width', 460);   
    
zIndex : Integer : 1000   
  设置对话框的zindex值。   
  初始:$('.selector').dialog({ zIndex: 3999 });   
  获取:var zIndex = $('.selector').dialog('option', 'zIndex');   
  设置:$('.selector').dialog('option', 'zIndex', 3999);   
    
    
·事件   
beforeclose : dialogbeforeclose   
  当对话框关闭之前,触发此事件。如果返回false,则对话框仍然显示。   
  初始:$('.selector').dialog({ beforeclose: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dialogbeforeclose', function(event, ui) { ... });   
    
open : dialogopen   
  当对话框打开后,触发此事件。   
  初始:$('.selector').dialog({ open: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dialogopen', function(event, ui) { ... });   
    
focus : dialogfocus   
  当对话框获取焦点时,触发此事件。   
  初始:$('.selector').dialog({ focus: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dialogfocus', function(event, ui) { ... });   
    
dragStart : dragStart   
  当开始拖拽对话框移动时,触发此事件。   
  初始:$('.selector').dialog({ dragStart: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dragStart', function(event, ui) { ... });   
    
drag : drag   
  当拖拽对话框移动时,触发此事件。   
  初始:$('.selector').dialog({ drag: function(event, ui) { ... } });   
  绑定:$('.selector').bind('drag', function(event, ui) { ... });   
    
dragStop : dragStop   
  当拖拽对话框动作结束时,触发此事件。   
  初始:$('.selector').dialog({ dragStop: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dragStop', function(event, ui) { ... });   
    
resizeStart : resizeStart   
  当开始改变对话框大小时,触发此事件。   
  初始:$('.selector').dialog({ resizeStart: function(event, ui) { ... } });   
  绑定:$('.selector').bind('resizeStart', function(event, ui) { ... });   
    
resize : resize   
  当对话框大小改变时,触发此事件。   
  初始:$('.selector').dialog({ resize: function(event, ui) { ... } });   
  绑定:$('.selector').bind('resize', function(event, ui) { ... });   
    
resizeStop : resizeStop   
  当对话框大小改变结束时,触发此事件。   
  初始:$('.selector').dialog({ resizeStop: function(event, ui) { ... } });   
  绑定:$('.selector').bind('resizeStop', function(event, ui) { ... });   
    
close : dialogclose   
  当对话框关闭后,触发此事件。   
  初始:$('.selector').dialog({ close: function(event, ui) { ... } });   
  绑定:$('.selector').bind('dialogclose', function(event, ui) { ... });   
    
    
·属性   
destroy   
  销毁对话框对象。   
  用法:.dialog( 'destroy' )   
    
disable   
  禁用对话框。   
  用法:.dialog( 'disable' )   
    
enable   
  启用对话框。   
  用法:.dialog( 'enable' )   
    
option   
  获取或设置对话框的属性。   
  用法:.dialog( 'option' , optionName , [value] )   
    
close   
  关闭对话框。   
  用法:.dialog( 'close' )   
    
isOpen   
  用于判断对话框是否处理打开状态。   
  用法:.dialog( 'isOpen' )   
    
moveToTop   
  将对话框移至最顶层显示。   
  用法:.dialog( 'moveToTop' )   
    
open   
  打开对话框。   
  用法:.dialog( 'open' )

学习交流群:364976091

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
利用Weblogic的iisproxy、iisforward插件实现IIS转发
默认情况下,IIS只能提供http重定向功能,而无法满足转发需求。 举例:http://localhost/app1 利用http重定向到 http://www.abc.com/app1 访问 http://loalhost/app1/abc.html 最终浏览器地址栏里的url会变成http://www.abc.com/app1/abc.html 这就是重定向(类似jsp中的SendRedirect),如果浏览器地址栏不变,那才叫转发(类似jsp中的forward)。
811 0
[docker]通过rsyslog记录日志并转发nginx日志到python程序
记录我是如何把rsyslog做成docker镜像,获取nginx的accesslog并且转发到python的
68 0
配置 SSH 端口转发,并设置开机启动
SSH 为了降低运维成本,提高可靠性,物理服务器往往都不再部署在本地,IDC 托管成了更多企业的选择。服务器托管在 IDC 后,出于安全的考虑,不会直接开放所有服务器的外部访问,而是使用跳板机,跳板机可以直接从外部访问,而其他服务器只能在登录到跳板机后才能连接得上。
1592 0
阿里云物联网平台数据转发到函数计算示例
使用物联网平台规则引擎的数据流转功能,可将Topic中的数据消息转发至其他Topic或其他阿里云产品进行存储或处理。本文主要演示通过规则引擎将设备上行消息流转到函数计算,并通过函数计算发送消息到钉钉机器人。
2326 0
转发:某些函数需要将其一个或多个实参连同类型不变地转发给其他函数
16.47 编写你自己版本的翻转函数,通过调用接受左值和右值引用参数的函数来测试它。 #include #include #include using namespace std; template int compare(const T &a ,const T &b) { ...
585 0
nfs共享文件夹参数说明
NFS服务的主配置文件: /etc/exports: 格式:[共享的目录] [主机名或IP(参数,参数)] 例如可以编辑/etc/exports为: /data    *(sync,rw,no_root_squash) /test  192.
827 0
Java命令参数说明大全
序言:  Java 在运行已编译完成的类时,是通过 java 虚拟机来装载和执行的,java 虚拟机通过操作系统命令 JAVA_HOME/bin/java –option 来启动,-option 为虚拟机参数,JAVA_HOME 为JDK安装路径,通过这些参数可对虚拟机的运行状态进行调整,掌握参数的含义可对虚拟机的运行模式有更深入理解。
826 0
三大连接池的参数说明
1. Apache-DBCP Ø BasicDataSource 相关的参数说明 dataSource: 要连接的 datasource (通常我们不会定义在 server.xml) defaultAutoCommit: 对于事务是否 autoCommit, 默认值为 true ...
959 0
gdy
jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法
  最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如下: public void doGet(HttpServletRequest reque...
1432 0
+关注
222
文章
5
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载