jquery网页开发实例精解教学-第9章设计对话框

第9章设计对话框AJAX的出现给B/S结构的应用程序注入了新的活力，因为它能在无刷新页面的情况下就得到了新的数据内容。富客户端也就是RIA中比较常见的就是页面对话框。本章主要讲解通过jQuery实现对话框的设计原理及主要对话框插件的使用。9.1设计基本对话框本节主要讲解对话框的基本实现过程。对话框的实现其原理主要是弹出层操作，当需要触发对话框时将隐藏的层显示出来。下面来看一下最基本的对话框实现。其中，要使用到的jQuery函数ready()、click()、css()、show()、hide()。其功能实现如下：（1）为页面中触发弹出对话框的元素添加单击事件，在事件中触发对话框所在层显示，并定位对话框的具体显示位置。（2）为对话框添加触发隐藏的单击事件。首先，利用HTML创建静态页面，CSS样式设定部分请参考光盘内容。然后，加入jQuery库文件：<scripttype="text/javascript"src="jslib/jquery.js"></script>最后，加入Javascript代码。效果如图所示。9.2模式对话框模式对话框的实现原理是：在触发对话框的同时创建一个所谓遮盖层。遮盖层覆盖在页面的所有内容之上，除了对话框，但是遮盖层需要设定一定的透明度。其中，要使用的jQuery函数ready()、click()、css()、show()、hide()。其功能实现如下：（1）为页面中触发弹出对话框的元素，添加单击事件，在事件中触发对话框所在层显示，并定位对话框的具体显示位置。（2）在触发对话框事件中显示遮盖层。（3）为对话框添加触发隐藏的单击事件，同时隐藏遮盖层。首先，在上节例子的基础上添加遮盖层：<divid="background"></div>然后修改Javascript功能代码。效果如图所示。9.3输入对话框前面在介绍Javascript的时候，曾介绍过它的三个基本对话框alert()、confirm()、prompt()。它们分别表示提示对话框、确认对话框、输入对话框。从本节开始介绍如何通过jQuery来模拟创建这三个对话框。本节创建输入对话框，其实现原理是：利用弹出层，在层上添加用户输入功能，并在层隐藏后将用户输入内容显示在页面上。其中，使用到的jQuery函数ready()、click()、css()、show()、hide()、text()、val()。其功能实现如下：（1）为页面中触发弹出对话框的元素添加单击事件，在事件中触发对话框所在层显示，并定位对话框的具体显示位置。（2）在触发对话框事件中显示遮盖层。（3）为对话框添加触发隐藏的单击事件，同时隐藏遮盖层。（4）为对话框的内容提交按钮，添加隐藏对话框和遮盖层功能，并将用户输入的内容在页面中显示。首先，将上一节的对话框中的样式进行修改，然后修改Javascript功能代码：效果如图1和2所示。图1图2

9.4提示对话框这一节来看一下提示对话框，提示对话框主要是提示信息的显示。它的基本工作原理和第二节所介绍的模式对话框类似，当用户输入相应内容并触发对话框弹出时，自动将用户的内容携带进对话框。其中，要使用到的jQuery函数ready()、click()、css()、show()、hide()、attr()。其功能实现如下：（1）为页面中触发弹出对话框的元素添加单击事件，在事件中触发对话框所在层显示，并定位对话框的具体显示位置，将用户输入内容填入对话框。（2）在触发对话框事件中显示遮盖层。（3）为对话框添加触发隐藏的单击事件，同时隐藏遮盖层。首先，将上一节的对话框中的样式进行修改。然后修改Javascript功能代码。效果如图1和2所示。图1图2

9.5确认对话框确认对话框为用户提供两种选择结果，并且用户的选择会直接影响到页面上的操作。它的实现原理是：从页面提取用户操作内容在对话框显示时，提示用户是否确认自己操作。当用户对对话框作出确认或者否定操作时，又返回来直接修改页面内容。其中，使用到的jQuery函数ready()、click()、css()、show()、hide()、attr()。其功能实现如下：（1）为页面中触发弹出对话框的元素添加单击事件，在事件中触发对话框所在层显示，并定位对话框的具体显示位置，将用户输入内容填入对话框。（2）在触发对话框事件中显示遮盖层。（3）为对话框的确认按钮添加触发隐藏的单击事件，同时隐藏遮盖层。（4）为对话框的取消添加触发隐藏的单击事件，同时隐藏遮盖层。当用户勾选了页面内容，则取消勾选操作。首先，将上一节的对话框中的样式进行修改。然后修改Javascript功能代码。效果如图所示。9.6对话框插件对话框插件是一种在网页页面上模拟跳出模式或者非模式对话框的插件。它可以帮助我们完成更多的用户交互操作，并节省我们开发自定义对话框的时间。本节介绍两个对话框插件。它们的基本功能和前面几节介绍的自定义对话框类似。9.6.1jqModal对话框插件这个jQuery插件帮助我们在浏览器中显示告示、对话框、模式窗口。它富有弹性，小巧就如同“瑞士军刀”一样。它的英文介绍网址。jqModal特点：（1）设计友好，不用复杂的操作。（2）翻译友好，不用硬编码英文字符串。（3）开发友好，利用回调函数实现多功能。（4）支持远程家在内容。（5）多模块支持。jqModal基本使用步骤：（1）添加对话框容器。（2）初始化对话框。（3）触发对话框。jqModal中使用的函数如表所示。jqModal中使用到的参数说明如表所示。下面通过几个例子来了解这个插件的使用方法，这里不涉及到Ajax内容。1.默认对话框形式这种对话框的使用是完全套用了所有属性为默认值的情况。首先，需要建立静态页面。效果如图所示。2．可拖动的带特殊背景的模式对话框这种对话框使用了jqModal的一部分属性，并加入了对话框的拖动功能。效果如图1和2所示。图1图23.jqModal的显示与隐藏这个例子使用了插件的显示与隐藏方法控制弹出对话框层，同时使用了添加触发对话框的元素和关闭对话框元素方法。静态页面和CSS代码请参考光盘内容。主要讨论一下Javascript的功能代码。效果如图1和2所示。图1图29.6.2jQuery.UI.Dialog对话框插件这个插件是jQuery官方网站提供的一整套UI插件中的一部分。它的主要功能是提供利用jQuery生成动态浮动对话框。这个插件需要以下jQuery文件的支持：jquery.ui.core.js、jquery.ui.widget.js、jquery.ui.position.js、jquery.ui.mouse.js（可选，当需要通过鼠标拖动对话框或者改变对话框的大小时使用）、jquery.ui.draggable.js（可选）、jquery.ui.resizable.js。这个插件有一些相关属性，可以设置对话框的样式和行为，参考表所示。与这个对话框相关的还有事件选项，参考表所示。对话框有一些行为可以控制对话框的相关操作，参考表所示。下面用例子来介绍一下这个插件的使用。1.默认对话框这个例子使用Dialog的默认参数形式，只调用了Dialog插件的初始化函数。其中，HTML代码和CSS代码请参考光盘内容。效果如图所示。2.动画效果对话框这个例子使用了关于Dialog打开与关闭的属性设置和相关方法调用，实现Dialog动画效果打开和关闭。其中，HTML代码和CSS代码请参考光盘内容。具体效果如图1和2所示。图1图23.模式对话框前面两个例子所看到的对话框都是非模式对话框，也就是当对话框出现时，对话框后面页面上的内容还是可以操作的。这里我们介绍通过Dialog创建模式对话框。其中，HTML代码和CSS代码请参考光盘内容。效果如图所示。4.模式确认对话框这个对话框是将原有对话框功能取消掉，利用Dialog属性重新创建对话框功能，以其实现确认对话框。其中，HTML代码和CSS代码请参考光盘内容。效果如图所示。5.模式表单对话框这个对话框是将原有对话框功能取消掉，利用Dialog属性重新创建对话框功能，以其实现用户输入表单对话框。其中，HTML代码和CSS代码请参考光盘内容。效果如图1、2和3所示。图1图2

图36.模式消息对话框这个对话框是将原有对话框功能取消掉，利用Dialog属性重新创建对话框功能，并在对话框中显示一定的消息内容。其中，HTML代码和CSS代码请参考光盘内容。效果如图所示。9.7小结本章对jQuery创建网页对话框进行了讲解。主要内容包括基本对话