本篇文章主要是对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 中设置按钮的点击事件。

复制代码代码如下:
 $(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');
         }
     }
 }); 

jQuery.dialog的更多相关文章

  1. jquery dialog open后,服务器端控件失效的快速解决方法

    jquery dialog为我们提供了非常漂亮实用的对话框,比单调的alert.confirm.prompt好用很多. 在使用jquery与.net共同开发时,直接调用jquery dialog的op ...

  2. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  3. JQuery Dialog 禁用X按钮关闭对话框,-摘自网络

    JQuery Dialog 禁用X按钮关闭对话框,禁用ESC键关闭代码如下:$("#div1").dialog({   closeOnEscape: false,   open: ...

  4. MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查

    MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的:   1.MVC3项目简单配置EF code first生成并初始化数据 ...

  5. 使用jquery dialog

    网页开发中,弹窗还是很有必要的.本人比较喜欢jquery ui的dialog. 但是jquery dialog中也有一些略显不方便的,如:没有z-index的参数设置,脚部的按钮样式没办法自定义…… ...

  6. jquery dialog的一些坑

    jquery dialog工具可以方便的生成一个弹出框,但是在一些需要多个弹出框的应用场景上会有一些bug 具体场景: 当使用过一次模态框之后,使用另外的一个模态框时,已经消失不见的模态框会重新出来 ...

  7. jQuery dialog 简介

    dialog是jQuery UI 库的一个UI组件,所以使用dialog时,不仅要引入jQuery.js(因为它只是轻量级的基础框架),还需要引入jQueryUI的js及相关css文件 示例: < ...

  8. JQUERY dialog的用法详细解析

    本篇文章主要是对JQUERY中dialog的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQ ...

  9. 解决 jquery dialog 弹框destroy销毁方法不能把弹出元素设置成初始状态

    在使用jquery ui中的dialog弹出窗口的时候遇到一个问题,就是页面弹出窗口关闭后希望表单元素能回到初始状态 例如文本框输入内容后关闭dialog后里面的内容清除,使用了destroy方法也不 ...

随机推荐

  1. spring项目中监听器作用-ContextLoaderListener(转)

    1 spring框架的启动入口 ContextLoaderListener 2 作用:在启动Web 容器时,自动装配Spring applicationContext.xml 的配置信息. 因为它实现 ...

  2. 使用FileSystemWatcher监视文件变化

    本文转载:http://www.cnblogs.com/zanxiaofeng/archive/2011/01/08/1930583.html FileSystemWatcher基础 属性: Path ...

  3. JAVA Web学习篇--Servlet

    Servlet由来 做过BS项目的人都知道,浏览器可以依据HTML静态标记语言来显示各式各样的网页.可是假设我们须要在网页上完毕一些业务逻辑:比方登陆验证.或者说网页显示的内容在server的数据库中 ...

  4. Bootstrap-基于bootstrap的后台二级垂直菜单

    最近做一个后台的管理项目,用到了Twitter推出的bootstrap前端开发工具包,是一个基于css3/html5的框架.花周末时间,写了一个非常简单后台的菜单.首先,看一下菜单的结构: 预览地址  ...

  5. docker 下 安装rancher 笔记

    sudo yum update 更新系统环境 curl -sSL https://get.docker.com/ | sh 安装最新docker版本 systemctl start docker.se ...

  6. Sysstat LINUX工具包址

    http://sebastien.godard.pagesperso-orange.fr/

  7. SDL 实现透明悬浮窗

    最近一直想用SDL实现弹幕功能,但是一直没法实现悬浮窗和透明背景功能. 在一个老外的博客上发现了思路:EthioProgrammer: Applying transparency using win3 ...

  8. STL的基本使用之关联容器:set和multiSet的基本使用

    STL的基本使用之关联容器:set和multiSet的基本使用 简介 set 和 multiSet 内部都是使用红黑树来实现,会自动将元素进行排序.两者不同在于set 不允许重复,而multiSet ...

  9. dnw for linux: Ubuntu下可用,无需编译驱动,mini2440可用

    1.安装所需库文件 sudo apt-get install libusb-dev 2.源代码如下 /* dnw2 linux main file. This depends on libusb. * ...

  10. HTTP请求返回的NSData无法转换为NSString

    最近在做的一个项目中有一个功能是有一个网页,模拟http请求获取到这个网页返回的相应的数据. 在请求完成后获取到的数据为NSData类型,按照我们通常的转换为NSString的方法: NSString ...