jQuery Dialog对话框事件

iteye_3606

墨衍会员 · AI 创作全网分发码龄8年

关注

最新推荐文章于 2025-08-07 16:24:01 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Dialog对话框事件

对话框应用场景

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

1）静态提示类对话框，对话框的内容是固定的

2）动态提示类对话框，对话框内容是根据事件源变化的

3）遮罩类对话框，对话框弹出时背景变灰并且不可选

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

Dialog组件的主要特点是可以拖动（Draggable），可以改变大小（Resizable）。

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

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

</div>

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

jQuery(“#divTip”).dialog();

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

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

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

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

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

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

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

<!—Demo 静态提示类弹出层—>

<h3>Demo.共享同一个静态弹出层，弹出层内容固定：</h3>

<div>

<spanid=”spanShowTip1”>显示提示</span>  <span id=”spanShowTip2”>显示提示</span>  

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

</div>

<br/>

<!—Demo动态显示类弹出层-->

<h3>Demo.每个弹出层内容不同，弹出层内容存在事件源的元素属性中：</h3>

<div>

<spanid=”spanShowDataTip1” data=”颜色是红色”>红色</span>     

</div>

<br />

<!—Demo.遮罩类弹出层-->

<h3>Demo.弹出IFrame</h3>

<div>

<inputtype=”button” id=”bunShowIframe” name=” bunShowIframe” value=”显示弹出层” />

</div>

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

弹出层的html代码如下：

<!—提示类弹出层—>

</div>

<!—遮罩类弹出层—>

<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”);

}

标签

#javascript #ui #ViewUI

掌握jQuery创建特效对话框实战技巧 jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它通过简化 HTML 文档遍历、事件处理、动画和 Ajax 交互，使得 JavaScript 编程更加容易。简而言之，jQuery 为开发者提供了一种优雅的方式来操作 DOM、处理事件、构建动画以及发送 HTTP 请求。在 jQuery 中，选择器是用来选取 HTML 元素的一种方法，它基于元素的 ID、类、类型、属性、属性值等来选取一个或多个元素。阅读详情

jQuery Dialog对话框事件

相关推荐