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 相关文章推荐
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
JS中 用户登录系统的解决办法
Apr 15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
JavaScript实现简单的弹窗效果
May 19 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
jquery取子节点及当前节点属性值的方法
2014/09/09 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[03:16]DOTA2完美大师赛主赛事首日集锦
2017/11/23 DOTA
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
通过cmd进入python的步骤
2020/06/16 Python
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
移动通信行业实习自我鉴定
2013/09/28 职场文书
会计与审计专业大专生求职信
2013/10/03 职场文书
电信专业毕业生推荐信
2013/11/18 职场文书