利用jquery制作出网页对话框的效果

最新推荐文章于 2024-10-09 15:35:58 发布

aigeyu3040

最新推荐文章于 2024-10-09 15:35:58 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/Jimmy009/archive/2012/02/28/2372672.html

版权

　　不知道博园的朋友们有没有发现一个现象，很多的网站是不是跳出一个alert()的对话框，但是从界面的友好性方面考虑，这样是非常不友好的。暑假中我曾经看过一段微软的MSDN发布的视屏，视屏的作者是依明志，他在视频中曾提到，尽量不要用alert()来跳出对话框，理由很简单，我们来做个测试就知道为什么了。

　　首先你要一个支持多页面的浏览器，我这里举例子用的浏览器是遨游，其实现在的win7 系统中自带的IE8、IE9都是符合这个实验的要求的，当然不是以IE为内核的浏览器，像火狐、谷歌也是可以的。所以你随便选个上面的浏览器。

　　我们新建一个页面就放一个button按钮，然后点击这个按钮触发alert事件，此时的页面效果如图：

　　代码：

 1 <html>
 2     <head>
 3         <title>alert()练习</title>
 4         <script type="text/javascript">
 5             function alertFun(){
 6                 alert("1");
 7             }
 8         </script>
 9     </head>
10     
11     <body>
12         <input type="button" value="点击我" οnclick="alertFun();" />
13     </body>
14 </html>

　　紧接着我们不要按确定键，此时我们继续打开第二个页面，点击遨游的加号，你发现了上面。我们开不了了，这就是对界面的友好性是非常不好的。

视屏就像小说一样，一笑而过了，但是我并没有放弃思想，放弃实践，虽然依明志提到了这个不友好型，也告诉了我们解决办法。但是却没有让我如何编写代码。然而我却自己整理资料，自己试着写代码，调试。最后成功了。这里报着分享的态度和园友们一起成长。

这里用到的技术是jquery、css和html语法。如果你没有学习过这3中语言，我个人建议先自学一下在看本文。不然可能你会看起来会很吃力。

需要的“装备“：jquery、jqueryUI的包。这里我用的jquery的版本是1.3.2

首先我们在html放上需要触发事件的对话框，和弹出的对话框。

代码如下：

 1 <p><a href="#" id="dialog_link" class="ui-state-default ui-corner-all">
 2     <span class="ui-icon ui-icon-newwin"></span>普通对话框
 3     </a>
 4 </p>
 5 
 6 <div id="dialog" titile="删除确认">
 7     <p>
 8     <span class="ui-icon ui-alert" ></span>
 9     删除后将无法还原！你确认要删除该信息吗？
10     </p>      
11 </div>
12 
13 <div id="dialog_Ok" title="成功">
14     <p>
15         <span class="ui-icon ui-icon-info" ; margin:0 7px 50px 0;"></span>
16         删除成功！
17     </p>
18 </div>

　　写好html的代码的效果图如下：

　　接着我们在这里对其进行相应的css布局。因为我这里主要写的是jquery的文章，所以这里css不在这里做详细的介绍了。

最后是的效果图如下：

　　好了，前面的准备工作都做好了。现在我们要开始我们这篇博客的主题了。

　　首先我们按照常理在index.html页面中引入jquery的版本文件，然后在引入jquery UI的版本文件。代码如下：

1 <script type="text/javascript" src="js/jquery-1.3.2.min.js" ></script>
2 <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

　　接着为了页面的整洁，我们自己新建一个js文件，命名为MyDialogJquery.js文件，来存放我们自己写的js代码。当然这里一定要注意，我们在引用文件的时候一定要把这个文件放在上面两个引用文件的后面。举个例子，我们先调用变量，然后在声明变量，这样当然不可以了，会报错！所以前面的两个引用文件的目的，你可以理解为在声明一个jquery的变量，为以后我们可以用jquery语法做好铺垫，而后面的js文件在前面jquery建立的基础上创建一个代码公开的UI操作。最后我们引用自己的js文件然后写出自己的效果，这其中需要调用jquery和UI文件中的函数（这里为了理解园友们可以这么理解）。

　　我们把MyDialogJquery.js文件也引进来。

　　代码：

1 <script type="text/javascript" src="js/MyDialogJquery.js"></script>

　　现在我们开始写jquery代码了。

　　一开始我们按照jquery语法。

　　$(function(){});这里用的是简写的方式，当然如果你喜欢全写，也是无所谓的。我本人比较懒就选择了简写的方式了。

　　接着我们开始对这3个对话框设置。

　　这里需要了解.dialog()函数的意思：这里我给出官方的网址，大家如果不明白可以参考看看官的解释

　　http://jqueryui.net/dialog/

　　这里重点介绍一下删除对话框，因为其他对话框基本是一样的：

　　代码如下：

 1     //删除确认对话框
 2         $("#dialog").dialog({
 3             autoOpen:false,                            //设置默认的对框框为关闭
 4             bgiframe:true,                            //是否使用 bgiframe 插件解决 IE6 下无法遮盖 select 元素问题。
 5             modal:true,                                //是否为模态窗口，设置为 true 时，页面上其它元素将被覆盖且无法响应用户操作。
 6             width:400,                                //设定对话框宽度，像素单位。
 7             buttons:{                                //设置对话框底部按钮，对象属性名为按钮文本，属性值为单击按钮时的回调函数。
 8                 "确认":function(){
 9                     $(this).dialog("close");       //关闭这个对话框
10                     $("#dialog_Ok").dialog("open");//打开确认的对话框
11                 },
12                 "取消":function(){                 
13                     $(this).dialog("close");       //关闭这个对话框
14                 }
15             }
16         });

　　首先我们利用$("#dialog")来找到我们需要操作的对话框，然后调用jquery为我们封装的dialog()的函数，因为是删除确认对话框，所有我们一开始设置的时候，应该设置这个对话框藏起来，第二个参数bgiframe用来解决IE6下面下无法遮盖 select 元素问题。modal这个属性，是用来设置当我们弹出对话框的时候，别的元素不可用，在我的包里我放了一个button按钮用来测试这个效果的，你可以试试；width设置对话框的宽度；最后我们需要在这个对话框中话两个按钮，一个确定，一个取消，并设置相应的操作。

　　最后实现的效果如图：