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展开闭合效果演示代码
Jul 24 Javascript
Easyui 之 Treegrid 笔记
Apr 29 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
jquery编写日期选择器
Mar 16 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
js实现金山打字通小游戏
Jul 24 Javascript
JavaScript实现刮刮乐效果
Nov 01 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投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
javascript对talbe进行动态添加、删除、验证实现代码
2012/03/29 Javascript
jquery无缝向上滚动实现代码
2013/03/29 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
Vue实现简单计算器
2021/01/20 Vue.js
在Python中关于中文编码问题的处理建议
2015/04/08 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
畜牧兽医本科生个人的自我评价
2013/10/11 职场文书
白酒市场开发计划书
2014/01/09 职场文书
工作分析计划书
2014/04/30 职场文书
人事任命书范文
2014/06/04 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
优秀高中学生评语
2014/12/30 职场文书
保证金退回承诺函格式
2015/01/21 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
大学生受助感言
2015/08/01 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
java解析XML详解
2021/07/09 Java/Android
排查Tomcat进程假死的问题
2022/05/06 Servers