jq ui.dialog.js简介

一个浮动的窗口，包含标题和内容两部分。可以移动，调整大小，以及关闭图标 '×' 。
如果内容长度超过了对话框内容区域的显示，则会自动出现滚动条。
除此之外，还有一些常用的选项，如：添加底部按钮栏、模式窗口屏蔽层等。
官方示例地址：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' )

jq ui.dialog.js简介相关推荐

Jquery UI dialog 详解
还是先看例子吧.另外如果要拖动.改变dialog的大小的话要加上ui.draggble.js和ui.resizable.js <!DOCTYPE html> <html> &l ...
JQuery1.2.6 ui.dialog控件在IE6下标题栏显示不正常的问题解决
由于项目中用到了jquery1.2.6版的dialog控件,可以较好地解决一些用户选择.单位选择的问题,也比较美观,但后来发现在IE6下显示有点不正常,截图请参见最后,经过查看源代码发现只要将css里 ...
jQuery UI dialog实现dialog弹框显示
实现弹框,比较精美的jQuery.ui.*:来实现,弹框显示: jsp页面代码[jqueryuidialog.jsp]: <%@ page language="java" i ...
Jquery UI dialog 详解 (中文)
1 属性 1.11 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口.当属性为false的时候,一开始隐藏窗口,知道.dialog("open&q ...
解决Select2控件不能在jQuery UI Dialog中不能搜索的bug
本文使用博客园Markdown编辑器进行编辑 1.问题呈现项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面.逻辑是修改一个广告的图片和标题. 效果截图如 ...
easy ui dialog 关闭之后的怪异问题
最近在工作中使用easy ui做东西,然后发现了一些不可思议的现象,笔记一下,前事不忘后事之师! 事故现场: 增加页面和修改页面是分离的两个jsp文件. 在页面加载时会用jquery去控制一些数据加载 ...
jQuery UI Dialog
jQuery UI Dialog是jQuery UI的弹出对话框组件,使用它可以创建各种美观的弹出对话框:它可以设置对话框的标题.内容,并且使对话框可以拖动.调整大小.及关闭:平常主要用来替代浏览嚣自 ...
Jquery UI dialog弹出层插件
必须先下载Jquery UI插件然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...
iOS开发UI篇—CALayer简介
iOS开发UI篇-CALayer简介一.简单介绍在iOS中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. 其实UI ...
Zepto.js简介
Zepto.js简介一.总结一句话总结: Zepto.js语法和jquery起码百分之90相似,主要做移动端框架,和jquery mobile是一个类型的概念 1.Zepto.js做移动端的特点? ...

jq ui.dialog.js简介

jq ui.dialog.js简介相关推荐

最新文章

热门文章