JQUERY dialog的用法详细解析


Posted in Javascript onDecember 19, 2013

今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下。

准备 jQuery 环境

首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框。

<input type="button" value="删除" id="btn" />

为了设置这个按钮点击的事件,需要准备 jQuery 的环境。

<script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>

在 ready 中设置按钮的点击事件。

 $(function() {
    // 初始化
    $("#btn").click(function() {
        alert("btn 被点击啦!");
   }
 );

确认这一步没有问题。

准备对话框
第二步,需要准备对话框的内容。这些内容来自 jQuery UI 的演示文件。

 <div id="dialog-confirm" title="Empty the recycle bin?" >
         <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 函数中,同时也初始化这个对话框。

 $(function() {
     // 初始化
     $("#btn").click(function() {
         alert("btn 被点击啦!");
     });     // 初始化对话框
     $("#dialog-confirm").dialog();
 });

现在,打开这个页面的时候,就已经可以看到对话框了。

通过按钮弹出对话框
我们希望页面上初始化的时候看不到这个对话框,在点击按钮的时候再出现。那么需要这几个工作。

先给对话框增加一个默认不显示的样式。style="display: none",这样默认就不会看到这一部分。

 <div id="dialog-confirm" title="Empty the recycle bin?" 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

 $("#dialog-confirm").dialog(
     {
         autoOpen: false
     }
 );

在按钮的点击事件中,弹出这个对话框。
 $("#btn").click(function() {
     // alert("btn 被点击啦!");
     $("#dialog-confirm").dialog("open");
 });

如果传递 close ,将会关闭对话框。

实现模式对话框
在实际应用中,我们经常需要实现模式对话框,在 Web 中需要增加一个遮罩层来挡住底层的元素,模拟模式效果,这可以在初始化对话框的时候,传递一个参数 modal: true 来实现。修改之后的初始化代码成为:

 $("#dialog-confirm").dialog(
     {
         modal: true,             // 创建模式对话框
         autoOpen: false,         // 只初始化,不显示
      }
 );

增加对话框的按钮
可以为对话框增加任意的按钮,并自定义按钮的事件处理。我们先增加两个按钮,一个确定,一个取消,并让他们先关闭对话框。
 // 初始化对话框
 $("#dialog-confirm").dialog(
 {
     modal: true,             // 创建模式对话框
     autoOpen: false,
     buttons: {
         "Ok": function() {
              $(this).dialog('close');
         },
         "Cancel": function() {
             $(this).dialog('close');
         }
     }
 });
Javascript 相关文章推荐
js异或加解密效果代码
Jun 25 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
详解webpack 热更新优化
Sep 13 Javascript
laypage+SpringMVC实现后端分页
Jul 27 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 #Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 #Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 #Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 #Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 #Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 #Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 #Javascript
You might like
我常用的几个类
2006/10/09 PHP
php删除数组元素示例分享
2014/02/17 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
windows下python和pip安装教程
2018/05/25 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
浅析PEP572: 海象运算符
2019/10/15 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
食品营养与检测应届生求职信
2013/11/08 职场文书
销售简历自我评价
2014/01/24 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
优秀班主任申报材料
2014/12/16 职场文书
办公室禁烟通知
2015/04/23 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
雷锋的故事观后感
2015/06/10 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript