|
精华帖 (12) :: 良好帖 (1) :: 新手帖 (0) :: 隐藏帖 (2)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-06-17
最后修改：2009-07-08
闲来无事做了一个前台UI的dialog组件，测试了一下运行良好，能支持IE6、7、8和firefox2.0，其他没测。调用也非常简单配置好相应参数就可以了。
软件功能： * 无限级弹出窗口 * Esc退出block弹出窗口 * 可拖动窗口 * 模态窗口 * 模态alert警告对话框 * 模态confirm对话框 * 页面局部模态 * 绑定按钮响应函数 * 弹出窗口加载iframe * 自定义背景样式 组件提供了六个函数： $.funkyUI // 弹出模态窗口 $.unfunkyUI // 关闭模态窗口 $.alert //警告提示对话框 $.confirm //确认和取消对话框 $.fn.block //块模态 $.fn.unblock//解除块模态 调用示例： $.blockUI({ url:"1.html",//弹出窗口显示的内容，使用iframe OKEvent:okEvent,//okEvent是自定义的确定按钮响应函数， css:{width:"700",height:"500"} }); $.alert("这是警告窗口"); $.confirm("这是个Boolean窗口"); $('#blocked').block();//id为blocked的元素设置为只读 $('#blocked').unblock();//解除 实现的思路： 我在主窗体中创建一个层，用来作为弹出窗体，包含一个iframe，通过参数指定URL，作为显示的内容，我觉得可能会有利于代码的重用，代码管理起来要方便一些 弹出窗口中含有的弹出窗口也在主窗体中创建，这样结构简单一点，比较容易管理。我在创建弹出窗口的时候在主窗体中声明一个栈，把当前iframe的window对象压入栈，这样不管我现在弹出了多少个窗口总能很容易的找到其中的任意一个的对象。 有感兴趣的把我的代码下载回去看看，然后给我提提意见，帮我提高。。。 觉得可用的随便用，有不明白的问我 新上传了修正版，修正了弹出框弹出位置不太精确的bug，新增无弹出窗体提示信息，用于类似Ajax请求等待。 再次上传修正版本2，此版本修正了二楼提出的bug，另外修复了进行局部block 后，弹出对话框不能正常unblock的bug 2009-7-8上传对ie6下不能遮挡select选框的修正版本（发现一个意想不到的bug，赶紧删掉） 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-06-17
测试了一下，东东不错
但发现一个问题： 如果将测试页面放在iframe中，点击即报错，不能使用 楼主看是否能解决一下这个问题？？ 测试代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"/> <title>jQuery funkyUI plugin</title> </head> <body> <div align="center" > <iframe src="demo.html" width="500px" height="500px"/> </div> </body> </html> |
| 返回顶楼 | |
|
发表时间：2009-06-18
二楼提出的问题我确实没有考虑到，在此表示感谢，我将代码进行了调整，问题已经解决。因为我是将最顶端的窗口作为弹出窗口的父窗口，而且所有嵌套弹出窗体都是在最顶端的窗口做处理，所以当第一个弹出窗体不在最顶端窗口时就出现了上述问题。还有一点需要注意的是最顶端的窗体需要导入funkyUI.js
|
| 返回顶楼 | |
|
发表时间：2009-06-18
用了下，感觉非常不错！支持楼主继续完善！
|
| 返回顶楼 | |
|
发表时间：2009-06-19
效果不错，不过要改进地方挺多，resize啥的
go on |
| 返回顶楼 | |
|
发表时间：2009-06-19
请楼主用prototype再实现一次，十分期待！
|
| 返回顶楼 | |
|
发表时间：2009-06-21
还有问题：如果页面上有select，弹出窗口会被遮挡
测试代码如下：demo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"/> <title>jQuery funkyUI plugin</title> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="jquery.funkyUI.js"></script> <script type="text/javascript"> $(document).ready(function(){ }); function Block(){ $.funkyUI({ url:"1.html", OKEvent:okEvent, css:{width:"700",height:"500"} }); } function Block2(){ $.funkyUI({ showDialog:false }); } function okEvent(){ alert('ok被点击'); } function Alert(){ $.alert("这是警告窗口") } function Confirm(){ $.confirm("这是个Boolean窗口"); } function onalert(){ alert("没有block"); } function block(){ $('#blocked').block(); } function unblock(){ $('#blocked').unblock(); } </script> </head> <body> <div id="main" name="main"> </div>&& <div id="sub" name="sub"> 123 </div> <div>Have a nice day!</div> <input type="button" value="click1" onclick="Block()" /> <input type="button" value="click2" onclick="Alert()" /> <input type="button" value="click3" onclick="Confirm()" /> <input type="button" value="click7" onclick="Block2()" /> <SELECT NAME=""> <OPTION VALUE="22222" SELECTED>2222222222222 <OPTION VALUE="">3333333333333333 </SELECT> <select > <option>11111111111111111111111 <option>11111111111111111111111 <option>11111111111111111111111 <option>11111111111111111111111 <option>11111111111111111111111 </select> </br> <div>Have a nice day!</div> </br> </br> <input type="button" value="click4" onclick="block()" /> <input type="button" value="click5" onclick="unblock()" /> <div id="blocked" > <input type="button" value="click6" onclick="onalert()" /> </div> </body></html> 在test.html的测试页面中，select显示不出来，楼主也需要测试一下看是什么问题 |
| 返回顶楼 | |
|
发表时间：2009-06-26
在ie中select是window类型的控件，它的index高于所有非window的控件，而div是浏览器渲染的，也就是说是用代码实时画出来的，根本不会覆盖标准的window控件，ie7以后的版本修正了这个bug。ie6中iframe是可以覆盖window控件的，而div又可以覆盖iframe，所以可以在div的下面建一个长宽100%的iframe就可以解决问题了，其实在我最初的版本中是有解决的，不过因为在我的项目中我使用的是div画的select，不存在这个问题所以后来的细化版本中也就没加上去，不过我会很快修正这个问题并上传的。
不过楼上讲的select显示不出来没看明白，回头我测试一下，今天恐怕不行了。。。 |
| 返回顶楼 | |
|
发表时间：2009-06-26
试了一下，很不错，希望继续完善
|
| 返回顶楼 | |
|
发表时间：2009-06-26
弹出的第二遮照框,关闭时,会把第一个也关闭掉
|
| 返回顶楼 | |
