`

jquery dialog 详解

阅读更多


还是先看例子吧。另外如果要拖动、改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>

<script>
$("#dialog").dialog({autoOpen:false,buttons:{"确 定":function() {$(this).dialog("close");}},closeOnEscape:true,hide:"slide",modal:true,title:" 对 话 框"}).dialog("open");
</script>

<div id="dialog" title="Dialog Title">你是个猪头!</div>

1 属性
1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开始隐藏窗口,知 道.dialog("open")的时候才弹出dialog窗口。默认为:true。
1.12 初始化例:请注意,$('.selector')是dialog 的类名,在本例中.selector=#dialoag,以后不再说明。
$('.selector').dialog({ autoOpen: false });
1.13 初始化后,得到和设置此属性例:
//获得
var autoOpen = $('.selector').dialog('option', 'autoOpen');
//设置
$('.selector').dialog('option', 'autoOpen', false);

1.21 bgiframe 默认为false ,When true, the bgiframe plugin will be used, to fix the issue in IE6 where select boxes show on top of other elements, regardless of zIndex. Requires including the bgiframe plugin. Future versions may not require a separate plugin.暂时没有弄明白是做什么用的。谁知道的话,请告诉我啊。
补充说明:bgiframe 用来设置dialog 和 select 等层控件的相对位置````` 不设置的时候,就会出现select等控件挡在你的dialog上面 ,在IE6中。

1.22 初始化例:
$('.selector').dialog({ bgiframe: true });
1.23 初始化后,得到和设置:
//获取
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//设置
$('.selector').dialog('option', 'bgiframe', true);

1.31 buttons 显示一个按钮,并写上按钮的文本,设置按钮点击函数。默认为{},没有按钮。
最上面的例子中已经有buttons属性的用法,请注意。
1.32 初始化例:
$('.selector').dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
1.33 初始化后,得到和设置:
//获取
var buttons = $('.selector').dialog('option', 'buttons');
//设置
$('.selector').dialog('option', 'buttons', { "Ok": function() { $(this).dialog("close"); } });

1.41 closeOnEscape 为true的时候,点击键盘ESC键关闭dialog,默认为true;
1.42 初始化例:
$('.selector').dialog({ closeOnEscape: false });
1.43 初始化后,得到和设置:
//获取
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape');
//设置
$('.selector').dialog('option', 'closeOnEscape', false);

1.51 dialogClass 类型将被添加到dialog,默认为空
1.52 初始化例:
$('.selector').dialog({ dialogClass: 'alert' });
1.53
初始化后,得到和设置:
//获取
var dialogClass = $('.selector').dialog('option', 'dialogClass');
//设置
$('.selector').dialog('option', 'dialogClass', 'alert');

1.61 draggable、resizable : draggable是否可以使用标题头进行拖动,默认为true,可以拖动;resizable是否可以改变dialog的大小,默认为true,可以改 变大小。
1.62 初始化例:
$('.selector').dialog({ draggable: false,resizable:false });
1.63 初始化后,得到和设置:
//获取
var draggable = $('.selector').dialog('option', 'draggable');
//设置
$('.selector').dialog('option', 'draggable', false);

1.71 width、height ,dialog的宽和高,默认为auto,自动。
1.72 初始化例:
$('.selector').dialog({ height: 530,width:200 });
1.73 初始化后,得到和设置:请参考1.63

1.81 maxWidth、maxHeight、minWidth、minHeight
,dialog可改变的最大宽度、最大高度、最小宽度、最小高度。maxWidth、maxHeight的默认为false,为不限。minWidth、 minHeight的默认为150。要使用这些属性需要ui.resizable.js 的支持。
1.82 初始化例:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 });
1.83 初始化后,得到和设置:请参考1.63

1.91 hide、show ,当dialog关闭和打开时候的效果。默认为null,无效果
1.92 初始化例:最上面的实例中用到,请自己看吧。
1.93 初始化后,得到和设置:请参考1.63

1.101 modal
,是否使用模式窗口,模式窗口打 开后,页面其他元素将不能点击,直到关闭模式窗口。默认为false不是模式窗口。
1.102 初始化例:$('.selector').dialog({ modal: true });
1.103 初始化后,得到和设置:请参考1.63

1.111 title ,dialog的标题文字,默认 为空。
1.112 初始化例:见最上面的实例。1.113 初始化后,得到和设置:请参考1.63

1.121 position
,dialog的显示位置:可以是'center', 'left', 'right', 'top', 'bottom',也可以是top和left的偏移量也可以是一个字符串数组例如['right','top']。
1.122 初始化例:$('.selector').dialog({ position: ['top','right'] }); 1.123 初始化后,得到和设置:请参考1.63

1.131 zIndex
, dialog的zindex值,默认值为1000.
1.132 初始化例:$('.selector').dialog({ zIndex: 3999 }); 1.133 初始化后,得到和设置:请参考1.63

1.141 stack 默认值为true,当dialog获得焦点是,dialog将在最上面。

1.142 初始化例:$('.selector').dialog({ stack: false }); 1.143 初始化后,得到和设置:请参考1.63

2 事件
2.11 beforeclose 类 型dialogbeforeclose , 当dialog尝试关闭的时候此事件将被触发,如果返回false,那么关闭将被阻止。
2.12 初始化例:$('.selector').dialog({
   beforeclose: function(event, ui) { ... }
});
2.13 使用类型绑定此事件例:$('.selector').bind('dialogbeforeclose', function(event, ui) {
...
});

2.21 close
类 型:dialogclose ,当dialog被关闭后触发此事件。
2.22 初始化例:$('.selector').dialog({
   close: function(event, ui) { ... }
});
2.23 使用类型绑定此事件例:$('.selector').bind('dialogclose', function(event, ui) {
...
});

2.3 open 类型:dialogopen ,当dialog打开时触发。(篇幅有限,该省略的就省略了啊,初始化例和使用类型绑定事件可以向上参考。)
2.4 focus 类型:dialogfocus ,当dialog获得焦点时触发。
2.5 dragStart 类型:dragStart , 当dialog拖动开始时触发。
2.6 drag 类型:drag ,当dialog被拖动时触发。
2.7 dragStop 类型:dragStop ,当dialog拖动完成时触发。
2.8 resizeStart 类型:resizeStart ,当dialog开始改变窗体大小时触发。
2.9 resize 类型:resize ,当 dialog被改变大小时触发。
2.10 resizeStop 类型:resizeStop , 当改变完大小时触发。

3 方法
3.1
destroy ,我喜欢这个哦,摧毁地球。。。 例: .dialog( 'destroy' )
3.2 disable ,dialog不可用, 例:.dialog('disable');
3.3 enable ,dialog可用,例,如3.2
3.4 close ,open,关闭、打开dialog
3.5 option ,设置和获取dialog属性,例如:.dialog( 'option' , optionName , [ value] ) ,如果没有value,将是获取。
3.6 isOpen ,如果dialog打开则返回true,例如:.dialog('isOpen')
3.7 moveToTop ,将dialog移到最上层,例如:.dialog( 'moveToTop' )

分享到:
评论

相关推荐

    Jquery UI dialog 详解 (弹出层)

    ### Jquery UI Dialog 详解(弹出层) #### 一、引言 Jquery UI Dialog 是 jQuery UI 库中的一个重要组件,它提供了一个简洁而强大的界面来创建对话框或者弹出层。通过简单的配置和使用,开发人员可以轻松地集成...

    JQuery UI Dialog使用样例

    **jQuery UI Dialog 使用详解** jQuery UI 是一个基于 jQuery 的用户界面库,提供了丰富的交互组件,其中 Dialog(对话框)是一个非常实用的功能。Dialog 可以用于创建模态或非模态窗口,通常用于显示警告、确认...

    JQUERY之Dialog+Uploadify综合API详解

    **jQuery Dialog API详解** jQuery Dialog 是 jQuery UI 库中的一个组件,它提供了一种方便的方式来创建模态或非模态对话框。Dialog 可用于显示警告、确认消息、输入框等,增强了用户交互体验。 1. **初始化 ...

    jquery.dialog插件参数说明

    ### jQuery Dialog插件参数详解 在前端开发领域,jQuery因其简单、灵活且强大的特性而备受开发者青睐。其中,`jQuery.dialog`插件更是为创建弹出对话框提供了丰富的功能和高度的自定义选项,极大地提升了网页的交互...

    jquery ui dialog 扩展

    《jQuery UI Dialog扩展详解》 在前端开发中,jQuery UI Dialog是一个非常实用的组件,它提供了弹出对话框的功能,可以用于警告、确认、信息提示等场景。这篇内容将深入探讨jQuery UI Dialog的扩展,包括如何自定义...

    jquery.dialog控件

    **jQuery Dialog 控件详解** jQuery Dialog 是 jQuery UI 库中的一个核心组件,它提供了一种在网页上创建可自定义的对话框(弹窗)的方法。这个控件用于展示信息、提示用户输入或者进行交互操作,是网页界面设计中...

    jquery.dialogBox.js动画对话框插件

    《jQuery.dialogBox.js动画对话框插件详解及应用实践》 在网页开发中,对话框是一种常见的用户交互元素,用于提示信息、确认操作或者展示详细内容。jQuery.dialogBox.js插件是一个轻量级且功能丰富的动画对话框工具...

    jquery confirm dialog

    **jQuery Confirm Dialog 知识点详解** 在网页开发中,我们常常需要在用户进行关键操作前弹出确认对话框,以防止意外的数据丢失或错误操作。jQuery Confirm Dialog 是一款轻量级的jQuery插件,它提供了自定义化的...

    dialog:一个jquery dialog插件

    **jQuery Dialog插件详解** jQuery Dialog插件是jQuery UI库中的一个重要组件,它提供了一种在网页上创建可自定义的对话框(弹窗)的方法。这个插件使得开发者能够轻松地实现模态对话框、非模态窗口、提示框等功能...

    jquery-dialog-drag.rar

    《jQuery Dialog 拖动功能详解》 在Web开发中,jQuery库因其简洁易用的API和丰富的插件生态,成为许多开发者首选的JavaScript库。其中,jQuery UI库中的Dialog组件是一个非常实用的功能,用于创建可自定义的对话框...

    Jquery_ui的dialog使用文档概述

    ### Jquery UI 的 Dialog 使用详解 #### 概述 Jquery UI 的 `Dialog` 是一个非常实用且功能丰富的用户界面组件,它可以帮助开发者快速创建一个浮动的窗口,该窗口包括标题和内容两个主要部分。此外,`Dialog` 组件...

    demo_jquery-dialog

    **jQuery UI Dialog 知识详解** 在Web开发中,对话框(Dialog)是一种常见的交互元素,用于提供用户与页面的互动界面,如警告、确认、信息提示等。jQuery UI库中的Dialog组件则提供了丰富的功能和自定义选项,使得...

    JQuery UI Dialog

    JQuery UI Dialog 对话框属性详解 JQuery UI Dialog 是一个功能强大且灵活的对话框组件,它提供了许多有用的属性和方法来帮助开发者快速创建自定义的对话框。在本文中,我们将详细介绍 JQuery UI Dialog 的一些重要...

    jquery.dialogBox.js插件下载.zip

    《jQuery.dialogBox.js插件详解及其在初学者中的应用》 在Web开发领域,JavaScript库如jQuery极大地简化了前端交互的复杂性,其中jQuery.ui、jQuery.modal等对话框插件为开发者提供了丰富的对话框解决方案。然而,...

    JQuery-通用dialog_popup

    **jQuery - 通用dialog_popup详解** `jQuery`是一种广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在Web开发中,`jQuery`经常被用来创建用户友好的交互界面,其中`popup`或...

    jQuery.dialog.js网页弹出对话框美化特效插件.zip

    《jQuery.dialog.js网页弹出对话框美化特效插件详解》 在网页开发中,弹出对话框是一种常见的交互设计,用于向用户展示重要的信息或进行关键操作。jQuery库以其简洁的API和强大的功能,成为了JavaScript开发者们...

    jquery.modaldialog.1.0.0.zip_JQuery模式窗体例子

    《jQuery模态对话框插件应用详解》 在网页开发中,模态对话框是一种常见的交互元素,用于向用户展示重要信息或者进行确认操作。jQuery Modal Dialog插件就是这样一个工具,它提供了一种简单易用的方式来创建弹出式...

    jquery_modaldialog.rar

    《jQuery ModalDialog插件详解与应用实践》 在网页开发中,交互性的增强往往能提升用户的体验感。jQuery ModalDialog插件就是一款优秀的工具,它能够帮助开发者轻松创建功能丰富的弹出对话框,使得信息提示、用户...

    jquery.dialogBox.js动画对话框插件.zip

    《jQuery.dialogBox.js动画对话框插件详解及应用实践》 在Web开发中,对话框是一种常见的用户交互元素,用于提示、确认或者展示详细信息。jQuery.dialogBox.js是一款优秀的JavaScript插件,它提供了丰富的动画效果...

    jquery.ui.dialog修改版,支持closable

    《jQuery UI Dialog 修改版:支持可关闭性控制详解》 jQuery UI 是一个强大的JavaScript库,提供了许多用户界面组件,其中包括Dialog(对话框)模块。Dialog组件可以用来创建模态或非模态的弹出窗口,常用于显示...

Global site tag (gtag.js) - Google Analytics