`
- 浏览:
340681 次
- 性别:
- 来自:
南宁
-
-
·概述
-
一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标
'×'
。
-
如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。
-
除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。
-
官方示例地址：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'
)
分享到：
相关推荐
接着，`jquery-ui.js`是jQuery UI的核心JavaScript库，它包含了所有UI组件的实现。这个文件包含了实现交互性和动态效果的代码，如拖放、动画和事件处理。通过引入这个文件，你可以轻松地在页面上添加各种交互元素，...
1. **jQuery UI Dialog简介** jQuery UI Dialog是一个高度可定制的模态对话框组件，它基于jQuery库构建，提供了优雅的界面和流畅的交互体验。其官方网站为：http://docs.jquery.com/UI/Dialog。Dialog插件不仅可以...
在提供的文件`jquery dialog.js`中，很可能包含了实现这个功能的JavaScript代码。通常，这样的脚本会包括以下步骤： - 初始化Dialog，设置基本配置。 - 创建最大化和最小化按钮，并绑定点击事件。 - 在点击事件中，...
经过摸索进行了扩展，增加“自动记住关闭时的位置”的功能，源码如下： 代码如下: //myJquery.ui.dialog.ex.js //////////////////////////////////// //自动记住 jquery.ui.dialog关闭时的位置 ///////////////////...
Jqui插件是基于jQuery UI库的扩展，用于增强网页的交互性和视觉效果。jQuery UI是一个功能丰富的开源JavaScript库，提供了各种用户界面组件，如拖放功能、对话框、滑块、日期选择器等。本压缩包提供的"jqui插件"可能...
首先，jQuery Dialog是jQuery UI库的一部分，它提供了丰富的可配置选项，如自动调整大小、拖动、模态窗口等，使得开发者能够创建交互性强的对话框。封装这个功能意味着将这些基本功能进行抽象，形成一个统一的接口，...
jQuery UI 是一个基于 jQuery JavaScript 库的可扩展用户界面库。它提供了多种交互控件、可拖动、可排序的元素、日期选择器、对话框、滑块、菜单等丰富的功能，极大地简化了网页的界面开发工作。在本文中，我们将...
【jQuery UI】是一个基于JavaScript库jQuery的用户界面插件集合，它提供了丰富的交互效果和可自定义的主题，用于创建美观且功能丰富的Web应用程序界面。这个“整套JQ UI下载”包含的是jQuery UI的特定版本——1.10.4...
首先，jQuery UI是基于JavaScript库jQuery构建的，它扩展了jQuery的功能，为开发者提供了诸如对话框（Dialog）、工具提示（Tooltip）、可拖动（Draggable）和可缩放（Resizable）等交互式元素。在"jq-ui弹出层效果...
在本文中，我们将深入探讨"JQ-ui-1.11.1.custom"这个主题包，它包含了CSS、HTML和JS源代码，为开发者提供了便捷的UI插件调用方式。 一、JQuery UI 1.11.1概述 JQuery UI 1.11.1是该库的一个稳定版本，它修复了前一...
在使用jQuery UI库时，Dialog组件是一个非常实用的弹出框功能，用于显示各种类型的信息或者交互内容。然而，有时我们需要对Dialog的位置进行调整，特别是在用户拖动Dialog时，可能会导致Dialog部分区域超出可视范围...
1. **jQuery UI组件**：jQuery UI包含了多种组件，如日期选择器(Datepicker)、对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、可叠放(Droppable)、滑块(Slider)、进度条(Progressbar)、菜单(Menu)等。...
提供了如对话框（Dialog）、日历（Datepicker）、进度条（Progressbar）、下拉菜单（Selectmenu）、滑块（Slider）、可折叠面板（Accordion）、tabs（选项卡）等常见UI元素，这些组件都封装了复杂的JavaScript逻辑...
在"jquery及ui包"中，包含两个关键文件：`jquery-1.7.2.min.js`和`jquery-ui.min.js`。 **jQuery库** `jquery-1.7.2.min.js`是jQuery库的一个版本，它以压缩和优化的形式提供。1.7.2是jQuery的一个稳定版本，它...
JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 代码如下: var $el = ...
而 `jquery-ui.theme.min.js` 则是对应主题的 CSS 样式转换为 JavaScript 对象，方便动态应用。 4. **图片资源**：在某些组件中，如进度条、滑块或图标按钮，会使用到图片资源。这些图片通常位于 CSS 文件中引用，...
jQuery UI 是一个强大的开源库，它是基于 jQuery JavaScript 库构建的，提供了丰富的用户界面组件，如日期选择器、对话框、拖放功能、排序列表等。这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI...
要使用jQuery Dialog插件，首先确保已引入jQuery库和jQuery UI库的CSS及JS文件。接着，选择一个HTML元素，比如div，将其作为对话框的基础，并设置相应的ID。然后，通过JavaScript代码初始化对话框，如： ```...
**jQuery对话框（jQuery Dialog）**是jQuery UI库中的一个组件，它提供了一种优雅的方式来创建弹出式窗口，如警告、确认或信息提示，以及更复杂的交互式对话框。这个功能强大的工具允许开发者轻松地将网页内容封装到...
jQuery UI是一个强大的JavaScript库，它扩展了基础的jQuery库，提供了丰富的用户界面组件，包括Dialog组件。我们将通过具体的代码示例来了解如何实现这一功能。 首先，为了创建弹窗特效，我们需要在HTML中定义一个...