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之IE的fireEvent方法详细解析
Nov 20 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python开发简易版在线音乐播放器
2017/03/03 Python
基于Python的关键字监控及告警
2017/07/06 Python
用Python实现KNN分类算法
2017/12/22 Python
Anaconda入门使用总结
2018/04/05 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
毕业生护理专业个人求职信范文
2014/01/04 职场文书
转预备党员政审材料
2014/02/06 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang