最近做项目写个表单验证,提交信息验证有错误的时候,用了最懒的方法,直接把错误提示用alert()弹出框弹出来,于是老大看完后给了这个表情。。。
确实,自带弹窗样式丑不能自定义这些问题困扰着很多用户,而且在同浏览器有不同的表现,
有这样的:。。 有这样的:。。
还有这样的:。。 还有这样的:
相信做前端的都很熟悉这些面孔~ 不统一风格的弹窗直接拉低了整个网站的逼格。。
好,那就写个简单的JQ插件来装饰一下吧。
JQ插件标准的封装代码如下,首先需要闭包:
<script type="text/javascript">
(function ($) {
//这里放入插件代码
})(jQuery);
</script>
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$'和’jQuery’
描述很官方对吧,网上很多资料可以找啦~ 其次是考虑插件开发的策略。
jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,也就是$.extend()。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法,也就是$.fn.extend();
根据需求,这个插件应该是一个全局的函数,只要把要弹出的内容作为参数,就可以实现功能弹出,~所以选择前者
$.diy_alert = function(options) {
})(jQuery);
diy_alert是函数名,options是参数。那么接下来我们就要考虑有什么参数要写进去的了。
根据需求,我只需要一个框框把文字装起来,好看点就ok,再把这个东西整体居中,文字居中。那么熟悉css的人就知道这里涉及的参数有:
内边距,字体颜色,背景颜色,字体大小等,又需要再增加。还有最重要的参数:提示文字。
于是里面是这样写的:
var dft = {
paddingL: "80px",
paddingR: "80px",
paddingT: "50px",
paddingB: "50px",
fontSize:"32px",
bgColor: "#FFF",
fontColor: "#000",
cont: "成功"
};
var ops = $.extend(dft,options);
(PS:根据@橙子瓣 的评论,这样写比较严谨:var ops = $.extend(dft,options||{}); )
dft是默认参数的集合,在$.extend()方法后,把有的参数传进来,没有的参数设为默认。
参数有了,接下来只需要生产一个div,把样式和内容丢进去,然后丢到body里显示就好了。
至于怎么居中,这里可以用绝对定位的50%定位,再来做边距的减法修正:
var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px lightgrey solid","position":"fixed","left":"50%","top":"50%","background-color":"#fff","color":"#000","font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body"));
box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2});
可能有些人会对outerWidth(true)有点陌生。这个方法是获取包括padding,margin,和border在内的真实宽度。
弹窗生成出来了,最后在适当时候去掉就OK,懒人模式:
setTimeout(function(){
box.remove();
},2000);
有时间的同学自己写个关闭按钮上去。完整代码:
(function ($) { $.diy_alert = function(options) { var dft = { paddingL: "80px", paddingR: "80px", paddingT: "50px", paddingB: "50px", fontSize:"32px", bgColor: "#FFF", fontColor: "#000", cont: "成功" }; var ops = $.extend(dft,options||{}); var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px #000 solid","position":"fixed","left":"50%","top":"50%","background-color":ops.bgColor,"color":ops.fontColor,"font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body")); box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2}); setTimeout(function(){ box.remove(); },2000); } })(jQuery);
记得在这之前引入jquery.js文件。最后就是使用了,超简单啦,只要给个参数就可以弹出来了:
$.diy_alert({"cont":"手机号格式不正确"});
最后弹出来是这个样子的:
两秒后自动消失,好看多了有木有- - 最起码在任何浏览器上都统一样式了,要漂亮的自己加参数调整~
就这样吧,写得不好勿喷,有问题请大侠指出,收工。