jQuery Dialog对话框事件用法实例分析


Posted in Javascript onMay 10, 2016

本文实例讲述了jQuery Dialog对话框事件用法。分享给大家供大家参考,具体如下:

Dialog对话框事件

对话框应用场景

对话框是最常用、最实用的功能。

1) 静态提示类对话框,对话框的内容是固定的
2) 动态提示类对话框,对话框内容是根据事件源变化的
3) 遮罩类对话框,对话框弹出时背景变灰并且不可选

使用jQuery UI的Dialog 组件可以轻松实现上面三种效果

Dialog组件的主要特点是可以拖动(Draggable),可以改变大小(Resizable)。

Dialog对话框的使用也十分简单,选中了一个元素后,可以通过对这个元素使用".dialog()"让其变成一个对话框,通过传递各种options属性类修改对话框的各种行为。

通常一个对话框是一个div元素:

<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>

下面的语句将使用默认的options属性生成一个对话框。

jQuery("#divTip").dialog();

执行完上面的语句后,这个div元素变成了一个可以拖动、可以拉伸的对话框。

当然这只是最简单的应用。下面通过一个完整的实例来快速上手dialog对话框组件。

使用Dialog控件实现三种具体的弹出框。

一种是静态弹出层,即弹出层的内容是固定的。

一种是动态弹出层,即弹出层的内容根据事件的触发者而不同。

另外一种是常见的遮罩类弹出层,即弹出层显示后,页面上除了弹出层以外的元素都不能操作。

首先看一下页面上的几个元素的HTML片段。

<!—Demo 静态提示类弹出层—>
<div class="ui-widget ui widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.共享同一个静态弹出层,弹出层内容固定:</h3>
  <div>
   <spanid="spanShowTip1">显示提示</span>  <span id="spanShowTip2">显示提示</span>  
   <spanid="spanShowTip3">显示提示</span>   <span id="spanShowTip4">显示提示</span>  
  </div>
  <br/>
  <br/>
<!—Demo动态显示类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px; padding:5px">
  <h3>Demo.每个弹出层内容不同,弹出层内容存在事件源的元素属性中:</h3>
  <div>
   <spanid="spanShowDataTip1" data="颜色是红色">红色</span>     
<span id="spanShowDataTip2" data="颜色是绿色">绿色</span>    
</div>
</div>
<br />
<br />
<!—Demo.遮罩类弹出层-->
<div class="ui-widget ui-widget-contentui-corner-all" style="width:700px;padding:5px">
  <h3>Demo.弹出IFrame</h3>
  <div>
   <inputtype="button" id="bunShowIframe" name=" bunShowIframe" value="显示弹出层" />
  </div>
</div>

元素页面上显示的元素,用来触发显示弹出层的事件。

弹出层的html代码如下:

<!—提示类弹出层—>
<div id="divTip" title="自定义标题">
  <p>弹出层</p>
</div>
<!—遮罩类弹出层—>
<div id="divIframe" title="iFrame 弹出层" style="text-align:center">
  <iframesrc="http://www.hbcsdn.tk" width="480px"height="250px" frameborder="0"></iframe>
</div>

弹出层就是一个个div元素。会根据需要显示或隐藏。

准备好了HTML元素,接下来就是应用jQuery UI的Dialog控件。首先,在initializeDom中,获取稍后需要操作的页面元素。

initializeDom:function(){//初始化DOM
  this.$spanShowTip=$("span[id^=spanShowTip]");
  this.$spanShowDataTip=$("span[id^=spanShowDataTip]");
  this.$btnShowIframe=$("#btnShowIframe");
  this.$divTip=$("#divTip");
  tis.$divIframe=$("#divIframe");
}

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript引用对象的方法代码
Aug 13 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
json的前台操作和后台操作实现代码
Jan 20 Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
js实现拖拽效果(构造函数)
Dec 14 Javascript
BootStrap glyphicons 字体图标实现方法
May 01 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
layui layer select 选择被遮挡的解决方法
Sep 21 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
bootstrap网页框架的使用方法
May 10 #Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 #Javascript
jQuery的文档处理程序详解
May 10 #Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 #Javascript
jQuery对象与DOM对象转换方法详解
May 10 #Javascript
jQuery对象的链式操作用法分析
May 10 #Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 #Javascript
You might like
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
答题辅助python代码实现
2018/01/16 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python GUI编程完整示例
2019/04/04 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
请说出你所知道的线程同步的方法
2013/04/19 面试题
C#如何进行LDAP用户校验
2012/11/21 面试题
小学生放飞梦想演讲稿
2014/08/26 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
公司财务部岗位职责
2015/04/14 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB