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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
js怎么覆盖原有方法实现重写
Sep 04 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
全面解析JavaScript中“&amp;&amp;”和“||”操作符(总结篇)
Jul 18 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 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入门之常量简介和系统常量
2014/05/12 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
PHP _construct()函数讲解
2019/02/03 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript实现函数返回多个值的方法
2015/06/09 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
Python批量查询域名是否被注册过
2017/06/21 Python
详解python Todo清单实战
2018/11/01 Python
python3爬虫怎样构建请求header
2018/12/23 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
2014的自我评价
2014/01/13 职场文书
求职面试个人自我评价
2014/02/28 职场文书
大学生创业项目方案
2014/03/08 职场文书
办公设备采购方案
2014/03/16 职场文书
创先争优承诺书范文
2014/03/31 职场文书
实习公司领导推荐函
2014/05/21 职场文书
教师职位说明书
2014/07/29 职场文书
作风转变心得体会
2014/09/02 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
找规律教学反思
2016/02/23 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang