Web开发中的弹出对话框控件介绍
2014-01-12 11:25
393 查看
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了。不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由于工作需要及业余兴趣所至,我比较了近10种的对话框控件,其中发现有一些做得很好的,除了功能强大,而且也支持多种皮肤样式,甚至有些对话框的居中都考虑到了,细节决定体验,有些真的不错。
我们知道,以前在没有应用其他javascript库(例如各种类型的Jquery库)的时候,一般是通过window.open或者window.showModalDialog来弹出非模态或者模态的对话框的,如下脚本所示。
这种是原始方式,好处坏处大家都明白,就不说了。
还有一种基于Jquery的原始弹出窗口方式,由于我一般使用的是easy-ui作为界面的基础组件,因此基于easy-ui的原始弹出窗口方式,只能是弹出内部的HTML层内容,对于弹出独立的页面这种方式支持不够好。
这个popup控件弹出的对话框,它好像把弹出的子页面放到了父窗口里面了,感觉是一体化的,所以操作父窗口的对话框也可以,非常方便。
这个popup控件,比较容易使用,不过不好的地方就是不兼容其他浏览器如Chrome等,其他浏览器显示层是错位的,不好看,而且样式也相对比较简单一点了。
但由于在弹出窗口中可以很好操作父窗口的脚本以及使用方便,在我以前的一些项目里面,用的还算比较多。
这个控件感觉做的很不错,而且提供了Chrome、QQBrowser、Ext、ZCMS四种不错的窗体皮肤,适应多种需要,通过修改它们的皮肤图片,还可以定义适合自己项目的样式皮肤,如我修改定义了一种黄色调的样式例子。
不过在使用过程中,发现这个控件,对有些脚本或者Jquery控件有冲突,具体原因未明,总之发现了和基于Jquery的ZTree运行不正常,还有一些Jquery组件使用也不正常,在我的Web权限管理系统中,本来想用这个作为弹出窗口显示一些设置信息的,发现zTree的Node选中值获取不了,也就相当于失效了,非常郁闷,弄了很久,没有找到具体原因。还有另外一个问题,就是这个控件的作者不知道什么原因,好像停止了对该控件的开发了,连它的官网也下架了。
不过对于弹出窗口的使用来说,该控件已经很不错了,提供了多种调用模块,而我一般倾向于弹出另外一个页面这种方式,当然它也支持弹出页面内部的层或者HTML代码等等方式。
这个artDialog弹出对话框组件,是我觉得相当好的一款了,除了支持多种浏览器,而且提供的界面效果更多,目前的版本是V4.1.6,好像还有一个V5.0的Beta版本(https://github.com/aui/artDialog),但是V5.0的就调整了不支持通过art.dialog.open方式弹出独立Web页面的方式了,要实现弹出独立页面,需要使用Iframe的代码,效果就差了一些,所以我倾向于V4.1.6。
该控件支持自动计算居中位置,我们只需要指定对话框的大小即可,当然它很好支持页面内的层内容的弹出显示,不过我更关注的是独立页面的弹出对话框显示,我在具体的Web权限管理系统中应用的效果如下所示(结合了ZTree控件,运行正常)。
这个控件提供了很多参数以及方法,对实现调用非常强大。
首先封装一个通用的Javascript函数
页面里面调用的代码如下所示。
如果你用5.0+的ArtDialog,调整了不支持通过art.dialog.open方式弹出独立Web页面的方式,但还是可以通过以下的方法去弹出独立页面。
5、还有一些弹出窗口控件,还支持窗口的最大化操作,这个功能还是不错的。
文章来源:http://www.cnblogs.com/wuhuacong/archive/2012/12/02/2797803.html
1、原始的弹出对话框实现(弹出窗口也可以)
我们知道,以前在没有应用其他javascript库(例如各种类型的Jquery库)的时候,一般是通过window.open或者window.showModalDialog来弹出非模态或者模态的对话框的,如下脚本所示。function OpenWin( sURL , sFeatures ) { window.open( sURL , null , sFeatures , null) //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no"); //window.open( [sURL] [, sName] [, sFeatures] [, bReplace]) //sName{_blank; _media; _parent; _search; _self; _top} //sFeatures{channelmode; directories; fullscreen; height; left; location; menubar; resizable; scrollbars; status; titlebar; toolbar; top; width} } function ShowWin( sURL , sFeatures ) { if(sFeatures == null || sFeatures == ""){ sFeatures = 'dialogHeight:300px;dialogWidth:850px;status:no;scroll:yes;resizable:yes;help:no;center:yes;'; } var returnValue= window.showModalDialog( sURL , null , sFeatures) //window.showModalDialog("Sample.htm",null,"dialogHeight:591px;dialogWidth:650px;") //window.showModalDialog([sURL] [, vArguments] [, sFeatures]) //sFeatures{dialogHeight; dialogLeft; dialogTop; dialogWidth; center; dialogHide; edge; help; resizable; scroll; status; unadorned} if(returnValue != undefined) { return returnValue; } else { return ""; } }
这种是原始方式,好处坏处大家都明白,就不说了。
还有一种基于Jquery的原始弹出窗口方式,由于我一般使用的是easy-ui作为界面的基础组件,因此基于easy-ui的原始弹出窗口方式,只能是弹出内部的HTML层内容,对于弹出独立的页面这种方式支持不够好。
<script type="text/javascript"> function initDialog(divname) { var dlg = jQuery(divname).dialog({ draggable: true, resizable: true, closed: true, show: 'Transfer', hide: 'Transfer', autoOpen: false, width: 500, height: 250, minHeight: 10, minwidth: 10 }); dlg.parent().appendTo(jQuery("form:first")); }; function close(divname) { $(divname).dialog('close'); } </script>
2、Popup的弹出式对话框
这个popup控件弹出的对话框,它好像把弹出的子页面放到了父窗口里面了,感觉是一体化的,所以操作父窗口的对话框也可以,非常方便。
这个popup控件,比较容易使用,不过不好的地方就是不兼容其他浏览器如Chrome等,其他浏览器显示层是错位的,不好看,而且样式也相对比较简单一点了。
但由于在弹出窗口中可以很好操作父窗口的脚本以及使用方便,在我以前的一些项目里面,用的还算比较多。
3、AsyncBox的弹出对话框
这个控件感觉做的很不错,而且提供了Chrome、QQBrowser、Ext、ZCMS四种不错的窗体皮肤,适应多种需要,通过修改它们的皮肤图片,还可以定义适合自己项目的样式皮肤,如我修改定义了一种黄色调的样式例子。
不过在使用过程中,发现这个控件,对有些脚本或者Jquery控件有冲突,具体原因未明,总之发现了和基于Jquery的ZTree运行不正常,还有一些Jquery组件使用也不正常,在我的Web权限管理系统中,本来想用这个作为弹出窗口显示一些设置信息的,发现zTree的Node选中值获取不了,也就相当于失效了,非常郁闷,弄了很久,没有找到具体原因。还有另外一个问题,就是这个控件的作者不知道什么原因,好像停止了对该控件的开发了,连它的官网也下架了。
不过对于弹出窗口的使用来说,该控件已经很不错了,提供了多种调用模块,而我一般倾向于弹出另外一个页面这种方式,当然它也支持弹出页面内部的层或者HTML代码等等方式。
4、artDialog弹出对话框
这个artDialog弹出对话框组件,是我觉得相当好的一款了,除了支持多种浏览器,而且提供的界面效果更多,目前的版本是V4.1.6,好像还有一个V5.0的Beta版本(https://github.com/aui/artDialog),但是V5.0的就调整了不支持通过art.dialog.open方式弹出独立Web页面的方式了,要实现弹出独立页面,需要使用Iframe的代码,效果就差了一些,所以我倾向于V4.1.6。该控件支持自动计算居中位置,我们只需要指定对话框的大小即可,当然它很好支持页面内的层内容的弹出显示,不过我更关注的是独立页面的弹出对话框显示,我在具体的Web权限管理系统中应用的效果如下所示(结合了ZTree控件,运行正常)。
这个控件提供了很多参数以及方法,对实现调用非常强大。
<script src="http://www.cnblogs.com/JQueryTools/artDialog/artDialog.source.js?skin=blue" type="text/javascript"></script> <script src="http://www.cnblogs.com/JQueryTools/artDialog/plugins/iframeTools.source.js" type="text/javascript"></script>
首先封装一个通用的Javascript函数
function ShowArtDlg(title, url, width, height, lock) { if (width == null || width == "") { width = '90%'; } if (!width.indexOf('px') && !width.indexOf('%')) { width = width + 'px'; } if (width.indexOf('px') < 0 && width.indexOf('%') < 0) { width = width + 'px'; } if (height == null || height == "") { height = '90%' } if (height.indexOf('px') < 0 && height.indexOf('%') < 0) { height = height + 'px'; } if (lock == null || lock == "") { lock = false; } art.dialog.open(url, { height: height, width: width, title: title, lock: lock }, false); //打开子窗体 }
页面里面调用的代码如下所示。
<tr align="right"> <td> <a href="#" class="easyui-linkbutton" iconcls="icon-edit" id="btnAddUser" onclick="ShowArtDlg('编辑-包含用户', 'EditTree.aspx?type=user&ouid=' + $('#txtID').val(), '360px', '500px')" runat="server">编辑</a> <a href="#" class="easyui-linkbutton" iconcls="icon-remove" id="btnDeleteUser" onclick="deleteUser()" runat="server">移除</a> </td> </tr>
如果你用5.0+的ArtDialog,调整了不支持通过art.dialog.open方式弹出独立Web页面的方式,但还是可以通过以下的方法去弹出独立页面。
art.dialog({title : "选择***", cancel : true, width : 600, padding : '5px', content : '<iframe src="test.aspx" id="test" name="test" height="400" width="600" frameborder="0"></iframe>', ok : function(){ ... } });
5、还有一些弹出窗口控件,还支持窗口的最大化操作,这个功能还是不错的。
文章来源:http://www.cnblogs.com/wuhuacong/archive/2012/12/02/2797803.html
相关文章推荐
- Web开发中的弹出对话框控件介绍
- Web开发中的弹出对话框控件介绍
- Web开发中的弹出对话框控件介绍
- Web开发中的对话框弹出方式
- C# Web开发中弹出对话框的函数[转载]
- web控件开发系列(-) 基础介绍
- 写给Web开发人员看的Nginx介绍
- 前端开发:一款近年非常受欢迎、简单的WEB弹出层组件(layer)
- C# 禁止 Webbrowser 控件的弹出脚本错误对话框
- web 开发中截获alert对话框的测试
- [原创]Web开发测试辅助工具介绍
- web服务器控件的开发例子 C# .net
- Python微型web开发框架flask介绍及一个小例子
- 我的web控件开发经历(2)——普通类的改装
- 移动端web开发之坑--IOS8下 上传图片点击取消后,弹出了软键盘遮挡输入框
- 基于MVC4+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息
- 关于Python的WEB开发框架的介绍
- iOS开发UI篇—UIScrollView控件介绍
- 开发自定义web控件时把css,js嵌入成资源
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)