Web开发中的弹出对话框控件介绍
Web开发中,目前由于Jquery的大行其道,因此很多弹出对话框,都用到了Jquery技术,反而原始的弹出对话框的方式较为少用了。不过基于JQuery的方式实现对话框窗口弹出,也有很多控件可以利用,由于工作需要及业余兴趣所至,我比较了近10种的对话框控件,其中发现有一些做得很好的,除了功能强大,而且也支持多种皮肤样式,甚至有些对话框的居中都考虑到了,细节决定体验,有些真的不错。
1、原始的弹出对话框实现(弹出窗口也可以)
我们知道,以前在没有应用其他javascript库(例如各种类型的Jquery库)的时候,一般是通过window.open或者window.showModalDialog来弹出非模态或者模态的对话框的,如下脚本所示。
functionOpenWin( 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} }functionShowWin( 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){returnreturnValue;}else{return "";} }
这种是原始方式,好处坏处大家都明白,就不说了。
还有一种基于Jquery的原始弹出窗口方式,由于我一般使用的是easy-ui作为界面的基础组件,因此基于easy-ui的原始弹出窗口方式,只能是弹出内部的HTML层内容,对于弹出独立的页面这种方式支持不够好。
<scripttype="text/javascript"> functioninitDialog(divname) {vardlg=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"));};functionclose(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控件,运行正常)。
这个控件提供了很多参数以及方法,对实现调用非常强大。
<scriptsrc="http://www.cnblogs.com/JQueryTools/artDialog/artDialog.source.js?skin=blue"type="text/javascript"></script><scriptsrc="http://www.cnblogs.com/JQueryTools/artDialog/plugins/iframeTools.source.js"type="text/javascript"></script>
首先封装一个通用的Javascript函数
functionShowArtDlg(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); //打开子窗体 }
页面里面调用的代码如下所示。
<tralign="right"><td><ahref="#"class="easyui-linkbutton"iconcls="icon-edit"id="btnAddUser"onclick="ShowArtDlg('编辑-包含用户', 'EditTree.aspx?type=user&ouid=' + $('#txtID').val(), '360px', '500px')"runat="server">编辑</a> <ahref="#"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 : '<iframesrc="test.aspx"id="test"name="test"height="400"width="600"frameborder="0"></iframe>',ok : function(){...}});
5、还有一些弹出窗口控件,还支持窗口的最大化操作,这个功能还是不错的。
本文转自博客园伍华聪的博客,原文链接:Web开发中的弹出对话框控件介绍,如需转载请自行联系原博主。
Web开发中的弹出对话框控件介绍相关推荐
- MFC中,如何获得对话框控件相对于父窗口(对话框窗口)的位置
在MFC中,如何获得对话框控件相对于父窗口(对话框窗口)的位置: CRect r; pWnd->GetWindowRect(&r); 这样获得的r是控件相对于屏幕的坐标,然后用Scre ...
- vue中新增弹出对话框操作
情景: 点击新增用户或者新增订单,弹出对话框页面进行信息输入操作 分析: 这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变 ...
- C++中各种弹出对话框
#include<windows.h> #include<cstdio> int main(){int x;x=MessageBox(GetForegroundWindow() ...
- 移动web开发 手机输入框弹出的问题
在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景 ...
- asp.net 2.0中的弹出对话框
在asp.net 1.1中,要做1个弹出的对话框的话,一般是在服务端的代码中这样写: btnClick.Attributes.Add("onclick", "return ...
- 弹出层控件popup
var popup = new Popup(4); popup.contentHtml('<!--内容确认-->' +'<div class="qrxx txt14&quo ...
- 自定义弹出框控件制作及示例
控件 xaml <UserControl x:Name="userControl" x:Class="neihan8.Control.Toast"xmln ...
- 推荐一个超人气的类似MSN弹出的控件
推荐一个非常好的类似MSN的控件,使用效果如下: 在线演示 http://www.eeeksoft.net/files/popuptest 源文地址请参考: http://www.codeprojec ...
- JS弹出日历控件,选择年、月、日
第一步:在HTML页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="D ...
最新文章
- wordpress关闭博客评论的两种方法
- 方案类:城中村社区网运营计划书-地方社区发展经典案例
- centos 上假设svnserve
- 三星s8和android auto,手机资讯导报:穿上马甲也认得三星GalaxyS8与LGG6再曝光
- kafka常见的问题(具体详细)
- Mysql 零距离-入门(一)
- Spring mvc框架 controller间跳转 ,重定向 ,传参
- Visio安装与下载
- 内连接和外联结连接的区别
- unity 摄像头跟着鼠标移动_lwj_unity_模拟第一人称摄像机前后左右移动、摄像机随鼠标移动旋转、鼠标点击添加物体...
- 出入库单据小票移动打印,盘点机PDA连接蓝牙打印机打印单据小票
- 13年android手机top,2013年安卓ROOT工具大盘点(一键ROOT工具Top10)
- PHP 微信公众号发送红包
- 【JavaSE】多线程基础
- python爬虫-个人记录
- 计算3个地理坐标点之间的夹角
- 港联证券|TMT板块全线退潮,这些个股获主力逆市抢筹
- 利用matplotlib实现TMDB电影数据可视化
- 微软官方出了一款吊打WPS的PPT插件
- java解有虚根的一元二次方程(超简单代码)
热门文章
- o00o0o php,PHP $O00OO0=urldecode eval 解密,记一次商业源码的去后门
- 评课用计算器计算机,《用计算器计算》教学反思
- Android的清单文件添加百度地图SDK
- 20200221:在排序数组中查找元素的第一个和最后一个位置(leetcode34)
- 20190807:排序数组删除重复项
- python 封装对象数据_Python数据库封装实现代码示例解析
- signature=27524ebaa2473e38aa641bf251dcf3cf,[Without Title]
- json规范及转义字符
- Excel-VBA操作文件四大方法之三(3/4)
- 谷歌CEO皮猜:我们想服务中国用户,但是没想好提供何种服务