jQuery Dialog对话框事件

原创 2012年03月28日 21:10:24

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>&nbsp;&nbsp;<span id=”spanShowTip2”>显示提示</span>&nbsp;&nbsp;

                   <spanid=”spanShowTip3”>显示提示</span>&nbsp;&nbsp; <span id=”spanShowTip4”>显示提示</span>&nbsp;&nbsp;

         </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>&nbsp;&nbsp; &nbsp;&nbsp;

<span id=”spanShowDataTip2” data=”颜色是绿色”>绿色</span>&nbsp;&nbsp;&nbsp;&nbsp;

</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 UI dialog 详解

一 属性 1 autoOpen ,这个属性为true的时候dialog被调用的时候自动打开dialog窗口。当属性为false的时候,一开 始隐藏窗口,知道.dialog("open")的时候...
  • wjc19911118
  • wjc19911118
  • 2012年08月03日 11:01
  • 13593

jquery easyUI dialog事件

扩展自$.fn.window.defaults。使用$.fn.dialog.defaults重写默认值对象。 该对话框是一种特殊类型的窗口,它在顶部有一个工具栏,在底部有一个按钮栏。对话框窗口右上角...
  • xiaozhu0301
  • xiaozhu0301
  • 2015年07月09日 17:06
  • 2116

自定义Dialog如何监听按钮事件

利用回调方法,在调用处,进行Dialog中各按钮的事件处理。 [html] view plaincopyprint? package com.demo;        impo...
  • gaidandan
  • gaidandan
  • 2014年08月15日 08:08
  • 1478

各种Android Dialog创建及其监听事件实现

  • 2013年11月04日 23:04
  • 453KB
  • 下载

jQuery Dialog对话框事件

Dialog对话框事件 对话框应用场景 对话框是最常用、最实用的功能。 1)  静态提示类对话框,对话框的内容是固定的 2)  动态提示类对话框,对话框内容是根据事件源变化的 3)  遮罩类...
  • dingyan954
  • dingyan954
  • 2012年03月28日 21:10
  • 7352

jquery 对话框(Dialog)插件

jQuery 对话框(Dialog) - 模态
  • z991876960
  • z991876960
  • 2016年09月22日 12:57
  • 2143

JQuery Mobile入门——打开和关闭对话框

1、JQuery Mobile 中创建对话框,只需要在指向页面的链接元素中添加一个data-rel属性,并将该属性值设置为dialog。关闭对话框是将data-rel属性值设置为back。 2、示例...
  • liang408015204
  • liang408015204
  • 2013年01月09日 17:33
  • 8016

Dialog点击屏幕其他地方消失的事件

在程序中显示一个Dialog是经常的事情,有些需求就是在dialog消失的时候捕捉到它的事件改变一些变量的值。比如我已经显示了一个dialog,第二个事件来了,得先判断当前是不是已经显示了一个dial...
  • ning_gg
  • ning_gg
  • 2016年05月09日 15:53
  • 2288

结合Dialog的onClick()事件理解Android中的回调函数

刚开始接触Android的时候,经常听见回调函数,但是怎么都不理解,如今感觉自己终于理解了,记录以下博文,供刚刚接触Android的同行参考,纯属本人拙见,如果理解错误之处请指出,不胜感激~ 以下是每...
  • SXW1900
  • SXW1900
  • 2017年02月10日 15:53
  • 1849

chrome不再支持dialog对话框,模仿对话框类似的效果

function openPage(openPageUrl,openPageName){ var iWidth = 600; var iHeight = 700; var iTop = (...
  • zy_281870667
  • zy_281870667
  • 2015年11月09日 16:02
  • 690
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Dialog对话框事件
举报原因:
原因补充:

(最多只允许输入30个字)