jQuery.dialog
今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下。
准备 jQuery 环境
首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。
<input type="button" value="删除" id="btn" />
为了设置这个按钮点击的事件,需要准备 jQuery 的环境。
<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
在 ready 中设置按钮的点击事件。
// 初始化
$("#btn").click(function() {
alert("btn 被点击啦!");
}
);
确认这一步没有问题。
准备对话框
第二步,需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
为了使用 jQuery UI 的对话框,需要增加这些文件的引用。
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.button.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.dialog.js"></script>
增加样式
jQuery UI 中使用了大量的样式来修饰,需要引用 jQuery UI 的样式,注意,jquery.ui.all.css 这个文件引用了大量的其他样式文件,将 jQuery UI 中 \development-bundle\themes\base 文件夹中的内容都复制过来。
<link type="text/css" href="styles/jquery.ui.all.css" rel="stylesheet" />
在 ready 函数中,同时也初始化这个对话框。
// 初始化
$("#btn").click(function() {
alert("btn 被点击啦!");
});
// 初始化对话框
$("#dialog-confirm").dialog();
});
现在,打开这个页面的时候,就已经可以看到对话框了。
通过按钮弹出对话框
我们希望页面上初始化的时候看不到这个对话框,在点击按钮的时候再出现。那么需要这几个工作。
先给对话框增加一个默认不显示的样式。style="display: none",这样默认就不会看到这一部分。
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
然后,在初始化对话框的时候,也不显示,仅仅完成初始化工作。
在初始化对话框的时候,传递一个参数 autoOpen: false
{
autoOpen: false
}
);
在按钮的点击事件中,弹出这个对话框。
// alert("btn 被点击啦!");
$("#dialog-confirm").dialog("open");
});
如果传递 close ,将会关闭对话框。
实现模式对话框
在实际应用中,我们经常需要实现模式对话框,在 Web 中需要增加一个遮罩层来挡住底层的元素,模拟模式效果,这可以在初始化对话框的时候,传递一个参数 modal: true 来实现。修改之后的初始化代码成为:
{
modal: true, // 创建模式对话框
autoOpen: false, // 只初始化,不显示
}
);
增加对话框的按钮
可以为对话框增加任意的按钮,并自定义按钮的事件处理。我们先增加两个按钮,一个确定,一个取消,并让他们先关闭对话框。
$("#dialog-confirm").dialog(
{
modal: true, // 创建模式对话框
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
jQuery.dialog的更多相关文章
- jquery dialog open后,服务器端控件失效的快速解决方法
jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的op ...
- jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...
- JQuery Dialog 禁用X按钮关闭对话框,-摘自网络
JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({ closeOnEscape: false, open: ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- 使用jquery dialog
网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… ...
- jquery dialog的一些坑
jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 ...
- jQuery dialog 简介
dialog是jQuery UI 库的一个UI组件,所以使用dialog时,不仅要引入jQuery.js(因为它只是轻量级的基础框架),还需要引入jQueryUI的js及相关css文件 示例: < ...
- JQUERY dialog的用法详细解析
本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...
- 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态
在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...
随机推荐
- Tomcat工作原理(转)
Tomcat简介 作者:杨晓(http://blog.sina.com.cn/u/1237288325) 一.Tomcat背景 自从JSP发布之后,推出了各式各样的JSP引擎.Apache Group ...
- windows下安装pip
1.在安装pip前,请确认win系统中已经安装好了python,和easy_install工具,如果系统安装成功,easy_install在目录C:\Python27\Scripts 下面,确认截图如 ...
- 提高你的Java代码质量吧:正确使用String、StringBuffer、StringBuilder
一.建议 CharSequence接口有三个实现类与字符串相关:String.StringBuffer.StringBuilder,虽然它们都与字符串相关,但是其处理机制不同. 根据不同的场景,建议 ...
- 数据结构 : Hash Table
http://www.cnblogs.com/lucifer1982/archive/2008/06/18/1224319.html 作者:Angel Lucifer 引子 这篇仍然不讲并行/并发. ...
- 如何在windows/wamp环境下在本机配置站点
1. 在D:\wamp\bin\apache\Apache2.5.4\conf文件夹下,找到httpd.conf,使用记事bej打开它,搜索#Include conf/extra/httpd-vhos ...
- CentOS使用sendmail发送邮件
1.安装sendmail yum -y install sendmail 2.启动sendmail服务 service sendmail start 3.将发件内容写入mail.txt mail -s ...
- html 新元素
html5新元素 html5语义元素 <header> 定义了文档或者文档的一部分区域的页眉 <nav> 定义了导航链接的部分 <section> 定义了文档的某个 ...
- java开发webservice的几种方式(转载)
webservice的应用已经越来越广泛了,下面介绍几种在Java体系中开发webservice的方式,相当于做个记录. 1.Axis2方式 Axis是apache下一个开源的webservice开发 ...
- PHP 中xampp不能启动服务器的问题
有时候别人电脑上面的XAMPP,你把安装文件拷贝下来后,会发现,自己的电脑上用不了 这个时候有很多种情况 1. 关闭你自己电脑上有可能暂用80端口的程序 2.D:\xampp\apache\conf\ ...
- 拦截器getmodel方法什么时候被调用(没搞懂有什么鸟用,自己搭的项目中用到了这个)
拦截器是Struts2最强大的特性之一,它是一种可以让用户在Action执行之前和Result执行之后进行一些功能处理的机制.Struts2 的预定义拦截器 modelDriven 如果action实 ...