学习从实践开始之jQuery插件开发 对话框插件开发


Posted in Javascript onApril 26, 2012

前言:

之所以写下这篇文章,是想将我的想法分享给大家;对于初学者,我希望他能从这篇文章中获取对他有用的东西,对于经验丰富的开发者,我希望他能指出我的不足,给我更多的意见和建议;目的就是共同进步。

一.要做什么插件?

我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体,就是我们通过调用window.alert,window.confirm,window.prompt这些方法 所弹出的网页对话框,通过调用window.open,window.showModalDialog,window.showModelessDialog 所弹出的窗体。

之所以这样做是因为:浏览器默认的对话框功能简单,不能满足更多需要;用户体验差。现代浏览器很多都会默认阻止弹出窗体(可能是因为在以前弹出广告太猖獗的原因吧,还记得03,40年那阵,看个XX网站弹了一堆窗口,关都关不过来,浏览器都弄死了,甚至电脑都当机了。)。

二.想要的效果是什么?

关于对话框插件,我们都知道在不同的浏览器里显示样式是有一些分别的,但基本上布局结构都一样。我们的插件想要的效果是:在任何浏览器里显示的样式和布局结构都保持一致,位于浏览器正中央(这样用户能够第一时间看到)。

弹出窗体在实现上与对话框类似(我是指我们要开发的插件,并非是说浏览器默认的实现)。

三.设计一下功能
我们看着图片一步步来说:
学习从实践开始之jQuery插件开发 对话框插件开发
1、遮挡页面内容(图片上灰色半透明部分),透明度可以设置(不透明0-1完全透明),这样的好处是 在用户关闭对话框之前不能对页面进行操作。
2、对话框居中显示,对话框大小可以设置(长宽)。
3、图中(1)和(2)为对话框图标,都可以设置。
4、对话框标题可以内容都可以设置。
5、可以不显示关闭按钮(x)。
6、底部按钮可以为0个或多个,并且可以为其设置回调函数。

四.如何实现功能?

1.使用CSS样式控制外观。

*为了避免CSS命名冲突,我们需要为插件确定一个名字空间,其下所有样式都在该命名空间下。

2.遮挡所有内容

*我们在CSS里设置基本样式。

position:absolute; 
left:0; 
top:0; 
background-color:#000; 
z-index:99999;

*这里需要注意的是z-index的值有一个安全范围,来自微软的说明“The maximum value is 2147483647 for IE6, 7 and 8.But it is 16777271 for Safari 3, so a safe cross browser maximum value is 16777271.”大意是说ie6,7,8支持的最大值是2147483647,但是Safari 3是16777271,所以保险起见不要超过16777271。

*用js代码设置其宽和高,我们通过$(document).width()获取页面宽度,通过$(document).height()获取页面高度度。
3.对话框居中显示 

对于对话框居中显示,有两种方式实现。

一是通过CSS实现。

position:absolute;如果页面有滚动条的时,当滚动条滚动时,对话框也会移动。

position:fixed;比较理想,无论如何滚动,对话框始终停留在页面居中位置,唯一的缺点就是不支持IE6(网上有关于如果兼容IE6的方法,感兴趣的朋友可以自己去实现)。

二是通过js脚本控制。

通过计算页面长宽来定位,当改变页面大小时,对话框位置不会改变,效果不理想。(当然了,可以通过监听页面发生改变时,自动调整位置,但是实现起来比较麻烦,感兴趣的朋友可以自己去尝试)

五.浏览器兼容

浏览器兼容什么的最讨厌了,不过话说回来最理想的效果当然是能够兼容所有浏览器,事实上如果我们花更多的时间也确实可以做到兼容所有浏览器。但是这样做值得吗?如果问页面设计人员最讨厌的浏览器是什么?我想大多数都会回答是IE6,是的,这个曾经风靡全球,霸占全球超过90%用户电脑的浏览器,我们曾经觉得它很好,好吧,也许我该说不错,又或者还可以;不管怎么样,它曾经确实是全球最受欢迎的浏览器。但是现在,它是我们开发者眼中最不受欢迎的浏览器,在全球平均使用不超过5%的情况下,在天朝却仍然超过20%的用户在使用它(来自http://www.ie6countdown.com/的统计),这是为什么呢?同样一个功能如果要做到兼容IE6这些老版本的浏览器,我们大概要多花三分之一甚至更多的时间,生命是短暂的,同志们,为何不把有限的时间拿去做更有意义的事情呢?杀死IE6从我做起!

六.功能实现和调用

CSS部分

<style type="text/css"> /*为了避免命名冲突,我们将该插件所有样式都放在该类之下*/ 
.ctcx-dialog 
{ 
font-size:14px; 
} 
.ctcx-dialog .mark /*遮罩层样式*/ 
{ 
position:absolute; 
left:0; 
top:0; 
background-color:#000; 
z-index:99999; 
} 
.ctcx-dialog .dialog /*对话框样式*/ 
{ 
position:fixed; 
left:50%; 
top:50%; 
background-color:#FFF; 
z-index:99999; 
border:2px solid #000; 
padding:2px; 
} 
.ctcx-dialog .dialog .bar /*对话框标题栏*/ 
{ 
height:30px; 
background-color:#999; 
color:#FFF; 
} 
.ctcx-dialog .dialog .bar .icon /*对话框标题栏图标*/ 
{ 
width:25px; 
height:30px; 
background-repeat:no-repeat; 
background-position:center; 
display:inline-block; 
} 
.ctcx-dialog .dialog .bar .title /*对话框标题栏标题*/ 
{ 
width:340px; 
height:30px; 
line-height:30px; 
overflow:hidden; 
display:inline-block; 
vertical-align:top; 
font-weight:bold; 
} 
.ctcx-dialog .dialog .bar .close /*对话框标题栏关闭按钮*/ 
{ 
width:20px; 
height:30px; 
background-image:url(close.png); 
background-repeat:no-repeat; 
background-position:center; 
display:inline-block; 
cursor:pointer; 
} 
.ctcx-dialog .dialog .container /*对话框内容容器*/ 
{ 
margin-top:5px; 
overflow:auto; 
} 
.ctcx-dialog .dialog .container .icon /*对话框内容容器*/ 
{ 
background-image:url(icon-big.png); 
background-repeat:no-repeat; 
background-position:center; 
width:48px; 
height:48px; 
} 
.ctcx-dialog .dialog .container .content /*对话框内容容器*/ 
{ 
position:relative; 
} 
.ctcx-dialog .dialog .buttons /*对话框按钮栏*/ 
{ 
text-align:center; 
margin-top:5px; 
height:30px; 
position:relative; 
bottom:0px; 
} 
.ctcx-dialog .dialog .buttons a /*对话框按钮*/ 
{ 
background-color:#DDD; 
color:#000; 
text-decoration: none; 
display:inline-block; 
padding:5px; 
} 
.ctcx-dialog .dialog .buttons a:hover /*对话框按钮*/ 
{ 
background-color:#333; 
color:#FFF; 
} 
.ctcx-dialog .dialog .buttons a:active /*对话框按钮*/{} 
</style>

JS部分
(function ($) { 
$.alert = function (options) { if (typeof options === 'string') options = { content: options }; 
var opts = $.extend({}, $.alert.defaults, options); 
if (opts.content == null || opts.content.length == 0) return this; 
var me = $('<div></div>').addClass('ctcx-dialog').appendTo(document.body); 
var doc = $(document); 
$('<div class="mark"></div>').css({ opacity: opts.opacity }).width(doc.width()).height(doc.height()).appendTo(me); 
var _dialog_ = $('<div class="dialog"></div>').css({ 
width: opts.width, 
height: opts.height, 
marginLeft: 0 - opts.width / 2, 
marginTop: 0 - opts.height / 2 
}).appendTo(me); 
var _bar_ = $('<div class="bar"></div>').appendTo(_dialog_); 
var _titleWidth_ = opts.width - 0; 
if (opts.icon != null) { 
$('<div class="icon"></div>').css('background-image', 'url(' + opts.icon + ')').appendTo(_bar_); 
_titleWidth_ -= 25; 
} 
if (opts.close) _titleWidth_ -= 20; 
$('<div class="title"></div>').css({ width: _titleWidth_ }).html(opts.title).appendTo(_bar_); 
if (opts.close) { 
$('<div class="close"></div>').click(function () { 
me.remove(); 
}).appendTo(_bar_); 
} 
var _containerHeight_ = opts.height - 40; 
var _container_ = $('<div class="container"></div>').appendTo(_dialog_); 
var _contentCss_ = {}; 
if (opts.iconBig != null) { 
$('<div class="icon"></div>').css('background-image', 'url(' + opts.iconBig + ')').appendTo(_container_); 
_contentCss_.top = -48; 
_contentCss_.marginLeft = 48; 
} 
var _content_ = $('<div class="content"></div>').css(_contentCss_).html(opts.content).appendTo(_container_); 
if (opts.buttons != null && opts.buttons.length > 0) { 
_containerHeight_ -= 30; 
var _buttons_ = $('<div class="buttons"></div>').appendTo(_dialog_); 
$.each(opts.buttons, function (i, _button) { 
$('<a href="javascript:;">' + _button.text + '</a>').click(function () { 
_button.fn(me); 
}).appendTo(_buttons_); 
}) 
} 
_container_.css({ height: _containerHeight_ }); 
this.close = function () { 
me.remove(); 
} 
this.setContent = function (content) { 
_content_.html(content); 
} 
return this; 
} 
//设置默认参数 
$.alert.defaults = { 
title: '信息提示', //对话框标题 
content: null, //对话框内容 
width: 200, //宽 
height: 100, //高 
opacity: 0.5, //透明度 
icon: null, //显示在标题前面的小图标 
iconBig: null, //显示在内容左侧的大图标 
buttons: null, //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {} 
close: true//是否显示关闭按钮 
} 
})(jQuery);

调用
$.alert({ 
title: '火星向你发出警告', //对话框标题 
content: '我们是火星人,我们就要入侵地球了,你们准备好了吗?', //对话框内容 
width: 300, //宽 
height: 150, //高 
opacity: 0.5, //透明度 
icon: 'icon.png', //显示在标题前面的小图标 
iconBig: 'icon-big.png', //显示在内容左侧的大图标 
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {} 
close: true//是否显示关闭按钮 
});

七.下载

下面是我测试和使用的例子,感兴趣的朋友可以自己下载修改。

点击这里下载

Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript EXCEL 操作类代码
Jul 30 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
Sep 21 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
Jun 03 Javascript
node.js通过url读取文件
Oct 16 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 #Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 #Javascript
仿微博字符限制效果实现代码
Apr 20 #Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 #Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 #Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 #Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
You might like
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
jQuery Study Notes学习笔记 (二)
2010/08/04 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
React学习之事件绑定的几种方法对比
2017/09/24 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
Pytest如何使用skip跳过执行测试
2020/08/13 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
外贸采购员求职的自我评价
2013/11/26 职场文书
廉政教育心得体会
2014/01/01 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
田径运动会通讯稿
2014/09/13 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers