jquery dialog api
来源:互联网 发布:handlebars.js 编辑:程序博客网 时间:2024/06/10 17:58
一、常见的属性、方法、事件
Options
Methods
Extension Points
Events
对话框是一个悬浮窗口,包括一个标题栏和一个内容区域。对话框窗口可以移动,重新调整大小,默认情况下通过 'x' 图标关闭。
如果内容长度超过最大高度,一个滚动条会自动出现。
一个底部按钮栏和一个半透明的模式覆盖层是常见的添加选项。
焦点
当打开一个对话框时,焦点会自动移动到满足下面条件的第一个项目:
- 带有
autofocus
属性的对话框内的第一个元素 - 对话框内容内的第一个
:tabbable
元素 - 对话框按钮面板内的第一个
:tabbable
元素 - 对话框的关闭按钮
- 对话框本身
当打开时,对话框部件(Dialog Widget)确保通过 tab 切换对话框内元素间的焦点,不包括对话框外的元素。模态对话框防止鼠标用户点击对话框外的元素。
当关闭对话框时,焦点自动返回到之前对话框打开时获得焦点的元素上。
隐藏关闭按钮
在一些情况下,您可能想要隐藏关闭按钮,例如,在按钮面板中已经有一个关闭按钮的情况。最好的解决方法是通过 CSS。作为实例,您可以定义一个简单的规则,比如:
.no-close .ui-dialog-titlebar-close {
display: none;
}
然后,您可以添加 no-close
class 到任意的对话框,用来隐藏关闭按钮:
$( "#dialog" ).dialog({
dialogClass: "no-close",
buttons: [
{
text: "OK",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
主题
对话框部件(Dialog Widget)使用 jQuery UI CSS 框架 来定义它的外观和感观的样式。如果需要使用对话框指定的样式,则可以使用下面的 CSS class 名称:
ui-dialog
:对话框的外层容器。ui-dialog-titlebar
:包含对话框标题和关闭按钮的标题栏。ui-dialog-title
:对话框文本标题周围的容器。ui-dialog-titlebar-close
:对话框的关闭按钮。
ui-dialog-content
:对话框内容周围的容器。这也是部件被实例化的元素。ui-dialog-buttonpane
:包含对话按钮的面板。只有当设置了buttons
选项时才呈现。ui-dialog-buttonset
:按钮周围的容器。
此外,当设置了 modal
选项时,一个带有 ui-widget-overlay
class 名称的元素被追加到 <body>
。
依赖
- UI 核心(UI Core)
- 部件库(Widget Factory)
- 定位(Position)
- 按钮部件(Button Widget)
- 可拖拽小部件(Draggable Widget) (可选的;当与
draggable
选项一起使用时) - 可调整尺寸小部件(Resizable Widget) (可选的;当与
resizable
选项一起使用时) - 特效核心(Effects Core)(可选的;当与
show
和hide
选项一起使用时)
其他注意事项:
- 该部件要求一些功能性的 CSS,否则将无法工作。如果您创建了一个自定义的主题,请使用小部件指定的 CSS 文件作为起点。
Options
appendToType: Selector
"body"
dialog(和遮罩层,如果modal存在)应该被追加到哪个元素。
appendTo
选项不应该被改变。初始化带有指定 appendTo
选项的 dialog:
$( ".selector" ).dialog({ appendTo: "#someElem" });
在初始化后,获取或设置appendTo
选项:
// getter
var appendTo = $( ".selector" ).dialog( "option", "appendTo" );
// setter
$( ".selector" ).dialog( "option", "appendTo", "#someElem" );
autoOpenType: Boolean
true
true
时, dialog 会在初始化时自动打开. 如果为 false
dialog 将会继续隐藏直到调用open()
方法 。初始化带有指定 autoOpen
选项的 dialog:
$( ".selector" ).dialog({ autoOpen: false });
在初始化后,获取或设置autoOpen
选项:
// getter
var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
// setter
$( ".selector" ).dialog( "option", "autoOpen", false );
buttonsType: Object or Array
{}
this
指向); 如果你需要访问按钮, 可以利用事件对象的目标元素。- Object: 键是按钮标签,值是点击相关按钮时执行的回调函数。
- Array: 该数组的每个元素必须是 一个定义特性,属性,和按钮上设置的事件处理程序的对象。
初始化带有指定 buttons
选项的 dialog:
$( ".selector" ).dialog({ buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] });
在初始化后,获取或设置buttons
选项:
// getter
var buttons = $( ".selector" ).dialog( "option", "buttons" );
// setter
$( ".selector" ).dialog( "option", "buttons", [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] );
closeOnEscapeType: Boolean
true
初始化带有指定 closeOnEscape
选项的 dialog:
$( ".selector" ).dialog({ closeOnEscape: false });
在初始化后,获取或设置closeOnEscape
选项:
// getter
var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
// setter
$( ".selector" ).dialog( "option", "closeOnEscape", false );
closeTextType: String
"close"
初始化带有指定 closeText
选项的 dialog:
$( ".selector" ).dialog({ closeText: "hide" });
在初始化后,获取或设置closeText
选项:
// getter
var closeText = $( ".selector" ).dialog( "option", "closeText" );
// setter
$( ".selector" ).dialog( "option", "closeText", "hide" );
dialogClassType: String
""
初始化带有指定 dialogClass
选项的 dialog:
$( ".selector" ).dialog({ dialogClass: "alert" });
在初始化后,获取或设置dialogClass
选项:
// getter
var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
// setter
$( ".selector" ).dialog( "option", "dialogClass", "alert" );
draggableType: Boolean
true
true
, dialog将可以使用标题栏实现拖动。需要包含 jQuery UI Draggable 部件。初始化带有指定 draggable
选项的 dialog:
$( ".selector" ).dialog({ draggable: false });
在初始化后,获取或设置draggable
选项:
// getter
var draggable = $( ".selector" ).dialog( "option", "draggable" );
// setter
$( ".selector" ).dialog( "option", "draggable", false );
heightType: Number or String
"auto"
- Number: 高度,单位:像素。
- String: 唯一支持的字符串值为
"auto"
,这将使对话框高度根据其内容进行自动调整。
初始化带有指定 height
选项的 dialog:
$( ".selector" ).dialog({ height: 400 });
在初始化后,获取或设置height
选项:
// getter
var height = $( ".selector" ).dialog( "option", "height" );
// setter
$( ".selector" ).dialog( "option", "height", 400 );
hideType: Boolean or Number or String or Object
null
- Boolean: 当设置为
false
, 将不使用动画效果,该dialog会立即被隐藏。 如果设置为true
, 该dialog将会以默认的持续时间和默认的效果淡出。 - Number: 该dialog将以指定的时间和默认的效果淡出。
- String: 该dialog将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称, 如
"slideUp"
, 或一个 jQuery UI 效果的名称, 如"fold"
。 在这两种情况下,将使用默认持续时间和默认的动画效果。 - Object: 如果该值是一个对象, 那么
effect
,delay
,duration
, 和easing
可能要提供。 如果effect
属性包含一个jQuery方法的名称, 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 , 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration
持续时间或easing
属性被省略, 那么默认值将被使用。 如果effect
被省略, 那么"fadeOut"
将被使用。如果delay
被省略, 那么将不使用延迟。
初始化带有指定 hide
选项的 dialog:
$( ".selector" ).dialog({ hide: { effect: "explode", duration: 1000 } });
在初始化后,获取或设置hide
选项:
// getter
var hide = $( ".selector" ).dialog( "option", "hide" );
// setter
$( ".selector" ).dialog( "option", "hide", { effect: "explode", duration: 1000 } );
maxHeightType: Number
false
初始化带有指定 maxHeight
选项的 dialog:
$( ".selector" ).dialog({ maxHeight: 600 });
在初始化后,获取或设置maxHeight
选项:
// getter
var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
// setter
$( ".selector" ).dialog( "option", "maxHeight", 600 );
maxWidthType: Number
false
初始化带有指定 maxWidth
选项的 dialog:
$( ".selector" ).dialog({ maxWidth: 600 });
在初始化后,获取或设置maxWidth
选项:
// getter
var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
// setter
$( ".selector" ).dialog( "option", "maxWidth", 600 );
minHeightType: Number
150
初始化带有指定 minHeight
选项的 dialog:
$( ".selector" ).dialog({ minHeight: 200 });
在初始化后,获取或设置minHeight
选项:
// getter
var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
// setter
$( ".selector" ).dialog( "option", "minHeight", 200 );
minWidthType: Number
150
初始化带有指定 minWidth
选项的 dialog:
$( ".selector" ).dialog({ minWidth: 200 });
在初始化后,获取或设置minWidth
选项:
// getter
var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
// setter
$( ".selector" ).dialog( "option", "minWidth", 200 );
modalType: Boolean
false
true
,该dialog将会有遮罩层; 页面上的其他项目将被禁用, 即,不能交互。 遮罩层创建对话框下方,但高于其它页面元素。初始化带有指定 modal
选项的 dialog:
$( ".selector" ).dialog({ modal: true });
在初始化后,获取或设置modal
选项:
// getter
var modal = $( ".selector" ).dialog( "option", "modal" );
// setter
$( ".selector" ).dialog( "option", "modal", true );
positionType: Object or String or Array
{ my: "center", at: "center", of: window }
指定dialog显示的位置。该dialog将会处理冲突 ,使得尽可能多的dialog尽可能地可见。
注意: 不赞成使用 String
和 Array
格式。
- Object: 确定dialog打开时的位置。
of
选项默认为窗口, 但您可以指定其他元素定位。 你可以参考jQuery UI Position实用工具,了解各种选项的更多细节。 - String:一个字符串,表示可视区内的位置。可能的值:
"center"
,"left"
,"right"
,"top"
,"bottom"
. - Array: 一个包含相对于可见区域左上角x, y偏移坐标(单位为像素) 的数组, 或 一个可能值的字符串名称。
初始化带有指定 position
选项的 dialog:
$( ".selector" ).dialog({ position: { my: "left top", at: "left bottom", of: button } });
在初始化后,获取或设置position
选项:
// getter
var position = $( ".selector" ).dialog( "option", "position" );
// setter
$( ".selector" ).dialog( "option", "position", { my: "left top", at: "left bottom", of: button } );
resizableType: Boolean
true
true
, 那么dialog允许调整大小。需要包含jQuery UI Resizable widget。初始化带有指定 resizable
选项的 dialog:
$( ".selector" ).dialog({ resizable: false });
在初始化后,获取或设置resizable
选项:
// getter
var resizable = $( ".selector" ).dialog( "option", "resizable" );
// setter
$( ".selector" ).dialog( "option", "resizable", false );
showType: Boolean or Number or String or Object
null
- Boolean: 当设置为
false
, 将不使用动画效果,该dialog会立即被隐藏。 如果设置为true
, 该dialog将会以默认的持续时间和默认的效果淡出。 - Number: 该dialog将以指定的时间和默认的效果淡出。
- String: 该dialog将使用指定的效果被隐藏。 该值可以是一个jQuery内置的动画方法的名称, 如
"slideUp"
, 或一个 jQuery UI 效果的名称, 如"fold"
。 在这两种情况下,将使用默认持续时间和默认的动画效果。 - Object: 如果该值是一个对象, 那么
effect
,delay
,duration
, 和easing
可能要提供。 如果effect
属性包含一个jQuery方法的名称, 那么该方法将被使用; 否则它被假定为是一个jQuery UI的效果的名称。 当使用jQuery UI 支持额外设置 的效果 , 你可以在对象中包含那些设置 并且它们将被传递到的效果。如果duration
持续时间或easing
属性被省略, 那么默认值将被使用。 如果effect
被省略, 那么"fadeOut"
将被使用。如果delay
被省略, 那么将不使用延迟。
初始化带有指定 show
选项的 dialog:
$( ".selector" ).dialog({ show: { effect: "blind", duration: 800 } });
在初始化后,获取或设置show
选项:
// getter
var show = $( ".selector" ).dialog( "option", "show" );
// setter
$( ".selector" ).dialog( "option", "show", { effect: "blind", duration: 800 } );
titleType: String
null
null
,那么该dialog 元素上的title
属性将被使用。初始化带有指定 title
选项的 dialog:
$( ".selector" ).dialog({ title: "Dialog Title" });
在初始化后,获取或设置title
选项:
// getter
var title = $( ".selector" ).dialog( "option", "title" );
// setter
$( ".selector" ).dialog( "option", "title", "Dialog Title" );
widthType: Number
300
初始化带有指定 width
选项的 dialog:
$( ".selector" ).dialog({ width: 500 });
在初始化后,获取或设置width
选项:
// getter
var width = $( ".selector" ).dialog( "option", "width" );
// setter
$( ".selector" ).dialog( "option", "width", 500 );
Methods
close()Returns: jQuery (plugin only)
- 该方法不接受任何参数。
调用 close 方法:
$( ".selector" ).dialog( "close" );
destroy()Returns: jQuery (plugin only)
- 该方法不接受任何参数。
调用 destroy 方法:
$( ".selector" ).dialog( "destroy" );
isOpen()Returns: Boolean
- 该方法不接受任何参数。
调用 isOpen 方法:
var isOpen = $( ".selector" ).dialog( "isOpen" );
moveToTop()Returns: jQuery (plugin only)
- 该方法不接受任何参数。
调用 moveToTop 方法:
$( ".selector" ).dialog( "moveToTop" );
open()Returns: jQuery (plugin only)
- 该方法不接受任何参数。
调用 open 方法:
$( ".selector" ).dialog( "open" );
option( optionName )Returns: Object
optionName
关联的值。- optionNameType: String要获取值的选项的名称。
调用该方法:
var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
option()Returns: PlainObject
- 该方法不接受任何参数。
调用该方法:
var options = $( ".selector" ).dialog( "option" );
option( optionName, value )Returns: jQuery (plugin only)
optionName
关联的 dialog 选项的值。- optionNameType: String要设置的选项的名称。
- valueType: Object要为选项设置的值。
调用该方法:
$( ".selector" ).dialog( "option", "disabled", true );
option( options )Returns: jQuery (plugin only)
- optionsType: Object要设置的 option-value 对。
调用该方法:
$( ".selector" ).dialog( "option", { disabled: true } );
widget()Returns: jQuery
jQuery
对象。- 该方法不接受任何参数。
调用 widget 方法:
var widget = $( ".selector" ).dialog( "widget" );
扩展点(Extension Points)
dialog小部件是widget factory构建的,并且可以扩展。 当扩展部件时, 你必须覆盖或添加新的行为到现有的方法。 下列方法被提供作为扩展点 用相同的API稳定性如上所列的plugin methods。 有关小部件扩展的更多信息, 请参阅使用Widget Factory 扩展小部件。
_allowInteraction( event )Returns: Boolean
_allowInteraction()
方法确定用户是否应被允许与给定的目标元素进行交互; 因此, 它可用于不属于该dialog的子元素白名单中的元素 但你希望用户能够使用。- eventType: Event
允许Select2插件在遮罩对话框中使用。 _super()
调用确保该对话框中的元素仍然可以交互。
_allowInteraction: function( event ) {
return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}
Events
beforeClose( event, ui )Type: dialogbeforeclose
- eventType: Event
- uiType: Object
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
初始化带有指定 beforeClose 回调的 dialog:
$( ".selector" ).dialog({
beforeClose: function( event, ui ) {}
});
绑定一个事件监听器到 dialogbeforeclose 事件:
$( ".selector" ).on( "dialogbeforeclose", function( event, ui ) {} );
close( event, ui )Type: dialogclose
- eventType: Event
- uiType: Object
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
初始化带有指定 close 回调的 dialog:
$( ".selector" ).dialog({
close: function( event, ui ) {}
});
绑定一个事件监听器到 dialogclose 事件:
$( ".selector" ).on( "dialogclose", function( event, ui ) {} );
create( event, ui )Type: dialogcreate
- eventType: Event
- uiType: Object
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
初始化带有指定 create 回调的 dialog:
$( ".selector" ).dialog({
create: function( event, ui ) {}
});
绑定一个事件监听器到 dialogcreate 事件:
$( ".selector" ).on( "dialogcreate", function( event, ui ) {} );
drag( event, ui )Type: dialogdrag
- eventType: Event
- uiType: Object
- positionType: Objectdialog当前的CSS position(位置)对象。
- offsetType: Objectdialog当前的offset position(偏移位置)对象。
初始化带有指定 drag 回调的 dialog:
$( ".selector" ).dialog({
drag: function( event, ui ) {}
});
绑定一个事件监听器到 dialogdrag 事件:
$( ".selector" ).on( "dialogdrag", function( event, ui ) {} );
dragStart( event, ui )Type: dialogdragstart
- eventType: Event
- uiType: Object
- positionType: Objectdialog当前的CSS position(位置)对象。
- offsetType: Objectdialog当前的offset position(偏移位置)对象。
初始化带有指定 dragStart 回调的 dialog:
$( ".selector" ).dialog({
dragStart: function( event, ui ) {}
});
绑定一个事件监听器到 dialogdragstart 事件:
$( ".selector" ).on( "dialogdragstart", function( event, ui ) {} );
dragStop( event, ui )Type: dialogdragstop
- eventType: Event
- uiType: Object
- positionType: Objectdialog当前的CSS position(位置)对象。
- offsetType: Objectdialog当前的offset position(偏移位置)对象。
初始化带有指定 dragStop 回调的 dialog:
$( ".selector" ).dialog({
dragStop: function( event, ui ) {}
});
绑定一个事件监听器到 dialogdragstop 事件:
$( ".selector" ).on( "dialogdragstop", function( event, ui ) {} );
focus( event, ui )Type: dialogfocus
- eventType: Event
- uiType: Object
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
初始化带有指定 focus 回调的 dialog:
$( ".selector" ).dialog({
focus: function( event, ui ) {}
});
绑定一个事件监听器到 dialogfocus 事件:
$( ".selector" ).on( "dialogfocus", function( event, ui ) {} );
open( event, ui )Type: dialogopen
- eventType: Event
- uiType: Object
注意:ui
对象是空的,这里包含它是为了与其他事件保持一致性。
初始化带有指定 open 回调的 dialog:
$( ".selector" ).dialog({
open: function( event, ui ) {}
});
绑定一个事件监听器到 dialogopen 事件:
$( ".selector" ).on( "dialogopen", function( event, ui ) {} );
resize( event, ui )Type: dialogresize
- eventType: Event
- uiType: Object
- originalPositionType: Object对话框被调整大小 之前的CSS position(位置)对象 。
- positionType: Object对话框当前的CSS position(位置)对象。
- originalSizeType: Object对话框被调整大小 之前的size(尺寸)对象 。
- sizeType: Object对话框当前的size(尺寸)对象。
初始化带有指定 resize 回调的 dialog:
$( ".selector" ).dialog({
resize: function( event, ui ) {}
});
绑定一个事件监听器到 dialogresize 事件:
$( ".selector" ).on( "dialogresize", function( event, ui ) {} );
resizeStart( event, ui )Type: dialogresizestart
- eventType: Event
- uiType: Object
- originalPositionType: Object对话框被调整大小 之前的CSS position(位置)对象 。
- positionType: Object对话框当前的CSS position(位置)对象。
- originalSizeType: Object对话框被调整大小 之前的size(尺寸)对象 。
- sizeType: Object对话框当前的size(尺寸)对象。
初始化带有指定 resizeStart 回调的 dialog:
$( ".selector" ).dialog({
resizeStart: function( event, ui ) {}
});
绑定一个事件监听器到 dialogresizestart 事件:
$( ".selector" ).on( "dialogresizestart", function( event, ui ) {} );
resizeStop( event, ui )Type: dialogresizestop
- eventType: Event
- uiType: Object
- originalPositionType: Object对话框被调整大小 之前的CSS position(位置)对象 。
- positionType: Object对话框当前的CSS position(位置)对象。
- originalSizeType: Object对话框被调整大小 之前的size(尺寸)对象 。
- sizeType: Object对话框当前的size(尺寸)对象。
初始化带有指定 resizeStop 回调的 dialog:
$( ".selector" ).dialog({
resizeStop: function( event, ui ) {}
});
绑定一个事件监听器到 dialogresizestop 事件:
$( ".selector" ).on( "dialogresizestop", function( event, ui ) {} );
Example:
一个简单的 jQuery UI 对话框(Dialog)。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>
Demo:
- jQuery Dialog API (一)
- jQuery Dialog API (二)
- jquery dialog api
- jquery dialog
- Jquery dialog
- Jquery Dialog
- jquery-dialog
- jquery dialog
- jQuery Dialog
- jquery dialog
- jquery dialog
- jquery dialog
- JQuery Dialog
- Jquery dialog
- jquery dialog
- Jquery Dialog
- JQuery Dialog
- vc++ api --dialog
- 使用JPDA远程debug
- 如何使用webpack打包vue项目?
- NB-IoT 初识
- BZOJ4170: 极光
- Apache Zeppelin 中 JDBC通用 解释器
- jquery dialog api
- Jquery——将Jquery序列化后的表单值转换成Json
- 列表侧滑删除和点击下滑
- 过滤后端返回的数组每条连续重复一遍问题
- 设计模式之策略
- vue.js安装过程(npm安装)
- tomcat无法识别单双引号的问题
- 遇到问题----MongoDB---JAVA--大批量操作先删后存时偶尔出现保存的文档也被删除
- ubuntu终端su认证失败:允许su到root的方法