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 相关文章推荐
Node.js的包详细介绍
Jan 14 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
vue实现tab切换外加样式切换方法
Mar 16 Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
VueJS实现用户管理系统
May 29 Javascript
Nuxt的动态路由和参数校验操作
Nov 09 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
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
基于php-fpm 参数的深入理解
2013/06/03 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
[05:05]DOTA2亚洲邀请赛 战队出场仪式
2015/02/07 DOTA
[01:02:48]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Liquid
2018/04/03 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
运动会跳远加油稿
2014/02/20 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
新闻编辑求职信
2014/04/09 职场文书
家长通知书教师评语
2014/04/17 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
房产遗嘱范本
2015/08/06 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Python import模块的缓存问题解决方案
2021/06/02 Python
使用springMVC所需要的pom配置
2021/09/15 Java/Android
vue中data里面的数据相互使用方式
2022/06/05 Vue.js