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 继承使用分析
May 12 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
vue项目中微信登录的实现操作
Sep 08 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数组输出html表格的方法
2014/02/24 PHP
3款值得推荐的微信开发开源框架
2014/10/28 PHP
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python树的同构学习笔记
2019/09/14 Python
Python FFT合成波形的实例
2019/12/04 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
本科生详细的自我评价
2013/09/19 职场文书
人力资源管理专业应届生求职信
2013/09/28 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书