jQuery UI库中dialog对话框功能使用全解析

对话框（dialog），是jQuery UI 非常重要的一个功能。它彻底的代替了JavaScript
的alert()、prompt()等方法，也避免了新窗口或页面的繁杂冗余。

一．开启多个dialog
   只要设置不同的id 即可实现。

$('#x').dialog();
$('#y').dialog();

二．修改dialog 样式
   在弹出的dialog 对话框中，在火狐浏览器中打开Firebug 或者右击->查看
元素。可以看看dialog 的样式，对dialog 的标题背景进行修改。

//无须修改ui 里的CSS，直接用style.css 替代掉
.ui-widget-header { 

  background:url(../img/xxx.png); 

}

三．dialog()方法的属性
   对话框方法有两种形式：1.dialog(options)，options 是以对象键值对的形式
传参，每个键值对表示一个选项；2.dialog('action', param)，action 是操作对
话框方法的字符串，param则是options 的某个选项。

dialog 外观选项
属性 默认值/类型 说明
title 无/字符串 对话框的标题，可以直接设置在DOM 元素上
buttons 无/对象
以对象键值对方式，给dialog 添加按钮。键是按钮

的名称，值是用户点击后调用的回调函数 

$('#reg').dialog({ 

 title : '注册', 

 buttons : { 

   '按钮' : function () {} 

 } 

);
dialog 页面位置选项
属性 默认值/类型 说明
position center/字符串
设置一个对话框窗口的坐标位置，默认为center。

其他设置值为：left top、top right、bottom left、

right bottom（四个角）、top、bottom（顶部或底

部，宽度居中）、left 或right（左边或右边，高度

居中）、center（默认值） 

$('#reg').dialog({ 

  position : 'left top' 

});
dialog 大小选项
属性 默认值/类型 说明
width 300/数值 对话框的宽度。默认为300，单位是像素。
height  auto/数值 对话框的高度。默认为auto，单位是像素。
minWidth  150/数值 对话框的最小宽度。默认150，单位是像素。
minHeight  150/数值 对话框的最小高度。默认150，单位是像素。
maxWidth  auto/数值 对话框的最大宽度。默认auto，单位是像素。
maxHeight  auto/数值 对话框的最大高度。默认auto，单位是像素。 
$('#reg').dialog({ 

  height : 500, 

  width : 500, 

  minWidth : 300, 

  minHeight : 300, 

  maxWidth : 800, 

  maxHeight : 600 

});
dialog 视觉选项
属性 默认值/类型 说明
show  false/布尔值 显示对话框时，默认采用淡入效果。
hide  false 布尔值 关闭对话框时，默认采用淡出效果。 
$('#reg').dialog({ 

  show : true, 

  hide : true 

});

注意：设置true 后，默认为淡入淡出，如果想使用别的特效，可以使用以下表格中的字符串参数。

show 和hide 可选特效
特效名称 说明
blind  对话框从顶部显示或消失
bounce  对话框断断续续地显示或消失，垂直运动
clip  对话框从中心垂直地显示或消失
slide  对话框从左边显示或消失
drop  对话框从左边显示或消失，有透明度变化
fold  对话框从左上角显示或消失
highlight  对话框显示或消失，伴随着透明度和背景色的变化
puff  对话框从中心开始缩放。显示时“收缩”，消失时“生长”
scale  对话框从中心开始缩放。显示时“生长”，消失时“收缩”
pulsate  对话框以闪烁形式显示或消失 
$('#reg').dialog({ 

  show : 'blind', 

  hide : 'blind' 

});
dialog 行为选项
属性 默认值/类型 说明
autoOpen  true/布尔值
默认为true，调用dialog()方法时就会打开对话框；

如果为false，对话框不可见，但对话框已创建，可

以通过dialog('open')才能可见。

draggable  true/布尔值 默认为true，可以移动对话框，false 无法移动。
resizable  true/布尔值 默认为true，可以调整对话框大小，false 无法调整
modal  false/布尔值
默认为false，对话框外可操作，true 对话框会遮罩

一层灰纱，无法操作。

closeText 无/字符串 设置关闭按钮的title 文字 
$('#reg').dialog({ 

  autoOpen : false, 

  draggable : false, 

  resizable : false, 

  modal : true, 

  closeText : '关闭' 

});

四．dialog()方法的事件
   除了属性设置外，dialog()方法也提供了大量的事件。这些事件可以给各种不同状态
时提供回调函数。这些回调函数中的this 值等于对话框内容的div 对象，不是整个对话框
的div。

dialog 事件选项
事件名 说明
focus
当对话框被激活时（首次显示以及每次在上面点击）会

调用focus 方法，该方法有两个参数(event, ui)。此事件中

的ui 参数为空。

create
当对话框被创建时会调用create 方法，该方法有两个参

数(event, ui)。此事件中的ui 参数为空。

open
当对话框被显示时（首次显示或调用dialog('open')方法）

会调用open 方法，该方法有两个参数(event, ui)。此事件

中的ui 参数为空。

beforeClose
当对话框将要关闭时（ 当单击关闭按钮或调用

dialog('close')方法），会调用beforeclose 方法。如果该函

数返回false，对话框将不会被关闭。关闭的对话框可以

用dialog('open')重新打开。该方法有两个参数(event, ui)。

此事件中的ui 参数为空。

close
当对话框将要关闭时（ 当单击关闭按钮或调用

dialog('close')方法），会调用close 方法。关闭的对话框可

以用dialog('open')重新打开。该方法有两个参数(event,

ui)。此事件中的ui 参数为空。

drag
当对话框移动时，每次移动一点均会调用drag 方法。该

方法有两个参数。该方法有两个参数(event, ui)。此事件

中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和

left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。

dragStart
当开始移动对话框时，会调用dragStart 方法。该方法有

两个参数(event, ui)。此事件中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和

left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。

dragStop
当开始移动对话框时，会调用dragStop 方法。该方法有

两个参数(event, ui)。此事件中的ui 有两个属性对象：

1.position，得到当前移动的坐标，有两个子属性：top 和

left。

2.offset，得到当前移动的坐标，有两个子属性：top 和left。

resize
当对话框拉升大小的时候，每一次拖拉都会调用resize

方法。该方法有两个参数(event, ui)。此事件中的ui 有四

个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和

height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：

width 和height。

4.originalPosition，得到对话框原始的坐标，有两个子属

性：top 和left。

resizeStart
当开始拖拉对话框时，会调用resizeStart 方法。该方法有

两个参数(event, ui)。此事件中的ui 有四个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和

height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：

width 和height。

4.originalPosition，得到对话框原始的坐标，有两个子属

性：top 和left。

resizeStop
当结束拖拉对话框时，会调用resizeStart 方法。该方法有

两个参数(event, ui)。此事件中的ui 有四个属性对象：

1.size，得到对话框的大小，有两个子属性：width 和

height。

2.position，得到对话框的坐标，有两个子属性：top 和left。

3.originalSize，得到对话框原始的大小，有两个子属性：

width 和height。

4.originalPosition，得到对话框原始的坐标，有两个子属

性：top 和left。 

//当对话框获得焦点后
$('#reg').dialog({ 

  focus : function (e, ui) { 

   alert('获得焦点'); 

  } 

}); 

//当创建对话框时
$('#reg').dialog({ 

  create : function (e, ui) { 

   alert('创建对话框'); 

  } 

}); 

//当将要关闭时
$('#reg').dialog({ 

  beforeClose : function (e, ui) { 

   alert('关闭前做的事！'); 

   return flag; 

  } 

}); 

//关闭对话框时
$('#reg').dialog({ 

  close : function (e, ui) { 

   alert('关闭！'); 

  } 

}); 

//对话框移动时
$('#reg').dialog({ 

  drag : function (e, ui) { 

   alert('top:' + ui.position.top + '\n' 

        + 'left:' + ui.position.left); 

  } 

}); 

//对话框开始移动时
$('#reg').dialog({ 

  dragStart : function (e, ui) { 

   alert('top:' + ui.position.top + '\n' 

        + 'left:' + ui.position.left); 

  } 

}); 

//对话框结束移动时
$('#reg').dialog({ 

  dragStop : function (e, ui) { 

   alert('top:' + ui.position.top + '\n' 

        + 'left:' + ui.position.left); 

  } 

}); 

//调整对话框大小时
$('#reg').dialog({ 

  resize : function (e, ui) { 

   alert('size:' + ui.size.width + '\n' 

        + 'originalSize:' + ui.originalSize.width); 

  } 

}); 

//开始调整对话框大小时
$('#reg').dialog({ 

  resizeStart : function (e, ui) { 

   alert('size:' + ui.size.width + '\n' 

        + 'originalSize:' + ui.originalSize.width); 

  } 

}); 

//结束调整对话框大小时
$('#reg').dialog({ 

  resizeStop : function (e, ui) { 

   alert('size:' + ui.size.width + '\n' 

        + 'originalSize:' + ui.originalSize.width); 

  } 

});
dialog('action', param)方法
方法 返回值 说明
dialog('open')  jQuery 对象 打开对话框
dialog('close') jQuery 对象 关闭对话框
dialog('destroy')  jQuery 对象 删除对话框，直接阻断了dialog
dialog('isOpen')  布尔值 判断对话框是否打开状态
dialog('widget')  jQuery 对象 获取对话框的jQuery 对象
dialog('option', param)  一般值 获取options 属性的值
dialog('option', param, value) jQuery 对象 设置options 属性的值 
//初始隐藏对话框
$('#reg').dialog({ 

  autoOpen : false 

}); 

//打开对话框
$('#reg_a').click(function () { 

  $('#reg').dialog('open'); 

}); 

//关闭对话框
$('#reg').click(function () { 

  $('#reg').dialog('close'); 

}); 

//判断对话框打开或关闭状态
$(document).click(function () { 

  alert($('#reg').dialog('isOpen')); 

}); 

//将指定对话框置前
$(document).click(function () { 

  $('#reg').dialog('moveToTop'); 

}); 

//获取某个options 的param 选项的值
var title = $('#reg').dialog('option', 'title'); 

alert(title); 

//设置某个options 的param 选项的值
$('#reg').dialog('option', 'title', '注册');

五．dialog 中使用on()
   在dialog 的事件中，提供了使用on()方法处理的事件方法。

on()方法触发的对话框事件
特效名称 说明
dialogfocus  得到焦点时触发
dialogopen  显示时触发
dialogbeforeclose  将要关闭时触发
dialogclose  关闭时触发
dialogdrag  每一次移动时触发
dialogdragstart 开始移动时触发
dialogdragstop  移动结束后触发
dialogresize  每次调整大小时触发
dialogresizestart  开始调整大小时触发
dialogresizestop  结束调整大小时触发 
$('#reg').on('dialogclose', function () { 

  alert('关闭'); 

});
赞 (0)

相关推荐

  • jQuery弹出框代码封装DialogHelper

    看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙.思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见. 复制代码 代码如下: //require ScrollHelper.js function DialogHelper() {     var _this

  • jQuery实现dialog设置focus焦点的方法

    本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法

    背景:想通过Esc键关闭展示中的Dialog对话框,发现有些对话框可以,有些会失效. 原因分析: 1.对话框上可以输入内容的标签元素可以,反之不行. 2.如果鼠标点击对话框后,也可以Esc键关闭. 可以看出对话框上是需要聚焦就可以了. 解决方案: 方案一: focus:function(){ $("#id").focus(); } 方案二: 延迟聚焦 setTimeout(function() { $("#id").focus(); }, 500); 以上所述是小编

  • jquery弹出框插件jquery.ui.dialog用法分析

    本文实例讲述了jquery弹出框插件jquery.ui.dialog用法.分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: http://docs.jquery.com/UI/Dialog 2. 文件引用 要使用jquery.ui.dialog,需要引用两个文件,1个是js,另外1个是css 在contentpage中添加: <scr

  • 修改jquery中dialog的title属性方法(推荐)

    好久都没办法尝试成功 在网上找的经测试也不行 于是在官方文档上看到了 结果终于成功了 $("#overTime").dialog({ autoOpen: false, width: 400, modal: true, title: "Dialog Title", buttons: { "确定": function () { }, "取消": function () { } } }); 在初始化的时候要写title属性(官方文档

  • 修改Jquery Dialog 位置的实现方法

    今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了. 我今天解决的就是这个问题:解决这种问题有两种方式(个人认为) 1.修改属性让可拖动局域可见,进行拖动 2.不让出现可拖动区域不可见的情况. 针对第一种情况,我没有想到合适的办法.下面给出第二种情况

  • jQuery UI库中dialog对话框功能使用全解析

    对话框(dialog),是jQuery UI 非常重要的一个功能.它彻底的代替了JavaScript 的alert().prompt()等方法,也避免了新窗口或页面的繁杂冗余. 一．开启多个dialog    只要设置不同的id 即可实现. $('#x').dialog(); $('#y').dialog(); 二．修改dialog 样式    在弹出的dialog 对话框中,在火狐浏览器中打开Firebug 或者右击->查看 元素.可以看看dialog 的样式,对dialog 的标题背景进行修

  • 详解jQuery UI库中文本输入自动补全功能的用法

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI 工具.一般在 输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 一．调用autocomplete()方法 $('#email').autocomplete({ source : ['aaa@163.com', 'bbb@163.com', 'ccc@163.com'], }); 二．修改autocomplete()样式    由于autocomplete()方法是弹窗,然后鼠标悬停的样式.通过Firebug

  • 使用jQuery UI库开发Web界面的简单入门指引

    一．jQuery UI jQuery UI 是以jQuery 为基础的开源JavaScript 网页用户界面代码库.包 含底层用户交互.动画.特效和可更换主题的可视控件.我们可以直接用它来构建具有很 好交互性的web 应用程序. jQuery UI 的官网网站为:http://jqueryui.com/ jquery-ui-x.xx.x.custom.zip .里面目录结构如下: 1.css,包含与jQuery UI 相关的CSS 文件: 2.js,包含jQuery UI 相关的JavaScri

  • jquery ui resize 中border-box的bug修正

    jquery ui resize 中的alsoresize在有样式border-box时,如在与 bootstrap 一起使用时会发生问题,每次 resize 时,alsoresize 对应的控件都会自动缩小几个像素. 现有人修复了这个问题,但 jquery ui 貌似没有把这个修复加到当前版本中,也不知什么原因(要在1.11.5版本后再修复?).修复的代码在: https://github.com/jquery/jquery-ui/pull/1451 以上就是本文给大家分享的全部内容了,希望大

  • 去除element-ui中Dialog对话框遮罩层方法详解

    目录 前言 modal 属性 示例代码: 前言 本文主要介绍了如何去除 element-ui 中 Dialog 对话框遮罩层的方法,并给出了示例代码以及页面效果作为参考. modal 属性 在使用element-ui的Dialog时,默认会有遮罩层,想要去除遮罩层,官方文档给出了 modal 属性: modal 是一个布尔值,表示是否需要遮罩层: 然而,将 modal 赋值为 false 时并不生效: 这里官方文档也给出了提示: 当 modal 的值为 false 时,请一定要确保 append

  • jquery.ui.draggable中文文档

    注意事项:     1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议     2. 格式中的所有项都是选填, 如果没有, 不写就是了.     3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上 <!--[CDATA[这中间写内容]]>     4. 翻译过程中, 一块对应的是一个<translate />标签.     5. 希望大家工作愉快. 复制代码 代码如下: <?xml v

  • jquery.ui.progressbar 中文文档

    复制代码 代码如下: <?xml version="1.0" encoding="UTF-8" ?> <!-- 注意事项: 1. 以下格式为既定的格式, 为了统一性, 需要修改时, 大家商议 2. 格式中的所有项都是选填, 如果没有, 不写就是了. 3. 由于是XML格式的, 所以, 所有标签中间填写文本的地方(最重要是代码, 一定要加, 不然以后解析有困难), 都需要加上<![CDATA[这中间写内容]]> 4. 翻译过程中, 一块对

  • jquery.ui.draggable中文文档(原文翻译)

    [原文翻译]JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受影响css: ui-draggable, 拖动过程中的css: ui-draggable-dragging.如果需要的不仅仅是拖, 而是一个完整的拖放功能, 请参阅JQuery UI 的Droppable插件, 该插件提供了一个draggable放的目标.所有的回调函数(start, stop, drag等事件)接受两个参数: event: 浏览器原生的事件ui: 一个JQuery的

  • Android中Dialog对话框的使用小结

    Android中Dialog对话框的使用小结

    前言 最近有些空时间,所以花了一个小时对Dialog对话框使用小结一下,比较基础,希望对你学习有帮助,大牛请直接关闭网页.如果你是新手,建议你亲自敲一遍代码. 先看一下效果: Dialog对话框使用小结 一.普通对话框 AlertDialog.Builder builder = new AlertDialog.Builder(activity); builder.setTitle("温馨提示");//标题 builder.setMessage("天气冷,注意保暖")

  • 使用jQuery实现Web页面换肤功能的要点解析

    使用jQuery实现Web页面换肤功能的要点解析

    网页换肤是一门老技术了,老的现在都不怎么流行了.但是,有时候有些客户就是想要这个换肤功能.于是就实践做了一下网页换肤,结果遇到了很多问题. 网页换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie

随机推荐