初始化参数

对于 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: [100, 100] };

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);

效果如下

对话框使用常见问题

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

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

Nemikor 在 Blog 中说明了这个问题,Basic usage of the jQuery UI dialog,并且给出了一个示例,示例的地址

学习资源

人民邮电出版社的 jQuery用户界面库学习指南 是目前唯一的一本中文资料。只不过版本有点老,是 1.6 版。

JQuery中的dialog使用介绍的更多相关文章

  1. 转载 Jquery中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  2. Jquery中AJAX参数详细介绍

    Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ...

  3. jQuery中的index方法介绍

    从jq api手册摘过来的内容,index这个方法在写 tab silder 之类的组件还是比较有用的说. js没有传统的函数重载的概念,但是根据传入参数的不同,js的函数可以完成不同的功能,也可说是 ...

  4. jquery中 $.expr使用实例介绍

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JQuery中的AJAX参数详细介绍

    Jquery中AJAX参数详细介绍 参数名 类型 描述 url String    (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方 ...

  6. JQuery中的工具类(五)

    一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...

  7. jquery ui中的dialog,官网上经典的例子

    jquery ui中的dialog,官网上经典的例子   jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这 ...

  8. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  9. jquery eval解析JSON中的注意点介绍

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式:使用eval()函数.使用Function对象来进行返回解析,下面有个示例,感兴趣的朋友可以参考下   在JS中将JSON的字符串解析 ...

随机推荐

  1. javase-->多线程--线程池

    java的线程池理解 在面向对象编程中,对象创建和销毁是很费时间的,因为创建一个对象要获取内存资源或者其它更多资源.在Java中更是如此,虚拟机将试图跟踪每一个对象,以便能够在对象销毁后进行垃圾回收. ...

  2. SQL谜题(加减符号替代)

    问题:将以下字符串”.1.2.3.4.5.6.7.8.9 = 1“中的符号点(.)更改为符号加(+)或符号(-),有多少种方法?请用SQL解决此问题 计算过程: CREATE TABLE #(VAL ...

  3. CozyRSS开发记录17-Html2Xaml

    CozyRSS开发记录17-Html2Xaml 1.RssContentView还需要优化 上回做了RssContentView的显示,但是对于rss返回的描述(摘要),连换行的没有,更别说里面还有h ...

  4. HDU 5945 / BestCoder Round #89 1002 Fxx and game 单调队列优化DP

    Fxx and game 问题描述   青年理论计算机科学家Fxx给的学生设计了一款数字游戏. 一开始你将会得到一个数\:XX,每次游戏将给定两个参数\:k,tk,t, 任意时刻你可以对你的数执行下面 ...

  5. web安全入门书单

  6. fmt 标签格式化 日期

    <td class='center'> <fmt:formatDate value="${RecordMail.SendTime }" pattern=" ...

  7. poj3311 TSP经典状压dp(Traveling Saleman Problem)

    题目链接:http://poj.org/problem?id=3311 题意:一个人到一些地方送披萨,要求找到一条路径能够遍历每一个城市后返回出发点,并且路径距离最短.最后输出最短距离即可.注意:每一 ...

  8. PDA手持扫描资产标签,盘点完成后将数据上传到PC端,固定资产系统查看盘点结果

    固定资产管理系统介绍: 致力于研发条码技术.集成条码系统的专业性公司,针对客户的不同需求,提供一站式的企业条码系统解决方案:包括功能强大的软件系统.安全可靠的无线网络.坚固耐用的硬件系统.灵活易用的管 ...

  9. Arduino下LCD1602综合探究(下)——如何减少1602的连线,LiquidCrystal库,LiquidCrystal库中bug的解决方法

    一.前言: 上文中,笔者系统的阐述了1602的两种驱动方式,并简单的提到了Arduino的LiquidCrystal库.本文紧接上文,对以下两个问题进行更加深入的探讨:如何能够使1602对Arduin ...

  10. Codeforces Round #257 (Div. 2)

    A - Jzzhu and Children 找到最大的ceil(ai/m)即可 #include <iostream> #include <cmath> using name ...