jQuery弹出层插件hwLayer怎么用

这篇文章将为大家详细讲解有关jQuery弹出层插件hwLayer怎么用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

我们将对弹出层代码做一个提升，通过实例来讲解如何将jQuery弹出层效果的js部分封装成一个jQuery插件，使得其具有更灵活的配置和扩展性。

我们知道，jQuery为开发者提供了插件开发机制，其中一种方法是使用$.extend()来扩展jQuery，它其实就是用来在jQuery命名空间上增加新函数。而另一种也是我们常用来开发jQuery插件的方法是通过$.fn 向jQuery添加新的方法。

基本模板

我们来使用$.fn来做插件开发，这里所说的基本模板也可以说是基本格式吧，经常做jQuery插件开发的朋友会先把插件格式定下来，然后就是往格式里填业务代码。

以下代码是一个基本的jQuery插件的格式结构。

;(function($,window,document,undefined){ $.fn.myPlugin = function(options) { var defaults = { 'width': 600, 'height': 400 }; var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数 return this.css({ 'width': settings.width+'px', 'height': settings.height+'px' }); } })(jQuery,window,document);

上述代码中，我们将所有的插件代码包裹在自调用函数中：

;(function($,window,document,undefined){ //这里是我们的代码。。 })(jQuery,window,document);

我们在代码开头加一个分号，这是一个习惯，避免与别的代码冲突出错。同时，将系统变量windows等以参数形式传递到插件内部，据说可以提高插件访问速度，不要问我为什么，都是从前辈经验中学习的。

回到第一段代码，在插件里面，myPlugin是自定义的插件名称。我们要提供参数选项可以让用户自由定制，一般情况下，我们在插件里会提供参数选项的默认值defaults，就是用户在不传参数调用插件时使用的是默认参数值。而通过jQuery的extend方法可以接收用户定义的参数选项。最后我们使用return，就是为了让插件支持链式调用。这段简单的代码其实就是设置宽度和高度的功能。

实际我们在插件开发中可能会有大量的代码，为了更好的维护代码，使代码结构更清晰明了，我们使用面向对象的思想。在代码中新建一个对象，定义对象的构造函数以及方法，最后在插件中new对象，调用对象方法。好了，我们现在回到我们本文所要介绍的插件hwLayer中来，我们将插件hwLayer的模板定义如下：

;(function($, window, document, undefined) { //定义HwLayer的构造函数 var HwLayer = function(ele, opt){ var self = this; self.$element = ele, self.defaults = { /*这里是默认参数选项*/ }, self.locked = false, self.options = $.extend({}, self.defaults, opt) } //定义HwLayer的方法,这里写主要的业务代码 HwLayer.prototype = { init: function(){ }, showLayer: function(){ } } //在插件中使用HwLayer对象 $.fn.hwLayer = function(options) { var hwLayer = new HwLayer(this, options); return this.each(function () { hwLayer.init(); //调用其方法 }); }; })(jQuery, window, document);

hwLayer插件

有了上面的插件模板格式后，我们就可以专心的写插件内部代码了。插件内部代码没有规定一定要按照什么格式来写，我们可以根据业务需求自由发挥。在hwLayer插件中，定义了HwLayer对象，在HwLayer的构造函数中设置默认属性选项，然后继承HwLayer，定义init()、showLayer()、hideLayer()方法，分别表示初始化、显示弹出层和隐藏弹出层。在init()方法中，我们主要捕捉点击触发弹出层以及关闭弹出层的事件。showLayer()方法中，获取当前弹出层id，并计算获取宽度和高度，并让弹出层居中等，由于要兼容小屏幕所以写得有点复杂。hideLayer()方法中，隐藏了弹出层，并触发调用了隐藏弹出层后的回调函数。最后我们在插件中调用HwLayer对象的init()方法即可。

hwLayer插件的完整代码如下，并将插件文件命名为：jquery.hwLayer.js，有不对的地方，欢迎大家指正

/* * hwLayer弹出层插件 - v0.1 * by 月光光 * http://www.xuebuyuan.com */ ;(function($, window, document, undefined) { var HwLayer = function(ele, opt){ var self = this; self.$element = ele, self.defaults = { width: 600, height: 'auto', tapLayer: true, //是否点击半透明遮罩层时关闭弹出层 afterClose: function(){} }, self.locked = false, self.options = $.extend({}, self.defaults, opt) } HwLayer.prototype = { init: function(){ var self = this, ele = self.$element; //点击弹出层 ele.on('click',function(e){ e.preventDefault(); self.showLayer(); }); $('.hwLayer-cancel,.hwLayer-close').on('click', function() { self.hideLayer(); }); }, //展示弹出层 showLayer: function(){ var self = this; var layerid = self.$element.data('show-layer'); //获取层ID if(layerid == '' || layerid == undefined){ var msg = '没有设置弹出层内容！'; //console.log(msg); alert(msg); }else{ var layer = $('#'+layerid), layerwrap = layer.find('.hw-layer-wrap'); layer.fadeIn(); //屏幕居中 var layer_w,layer_h; var w = $(window).width(); if(w<768){ layer_w = w-30; }else{ layer_w = self.options.width; } var h = $(window).height(); if(layerwrap.outerHeight()>h){ layer_h = h-40; layerwrap.css('overflow-y','auto'); }else{ if(self.options.height=='auto'){ layer_h = layerwrap.outerHeight(); }else{ layer_h = self.options.height; } } layerwrap.css({ 'width': layer_w+'px', 'height': layer_h+'px', 'margin-top': -layer_h/2+'px', 'margin-left': -layer_w/2+'px' }); //点击或者触控弹出层外的半透明遮罩层，关闭弹出层 layer.on('click', function(event) { if (event.target == this && self.options.tapLayer == true){ self.hideLayer(); } }); } }, //隐藏弹出层 hideLayer: function(){ var self = this; $('.hw-overlay').fadeOut(); self.options.afterClose.call(self); } } $.fn.hwLayer = function(options) { var hwLayer = new HwLayer(this, options); return this.each(function () { if (typeof(options) == 'string') { switch(options){ case 'close': hwLayer.hideLayer(); break; } }else{ hwLayer.init(); } }); }; })(jQuery, window, document);

调用hwLayer插件

调用hwLayer插件就非常简单了。跟上一篇文章HTML5+CSS3+jQuery实现弹出层一样，先准备html和css。

点击弹出确认框 点击弹出信息层

两个按钮，对应两个弹出层。注意加载css和jquery库。

接下来js调用：

不解释了，弹出层其实不光只是弹出一个层展示信息而已，如本站前文所说，复杂的弹出层有很多交互应用。接下来我会给大家介绍一种最常见的弹出层交互处理：使用jQuery+PHP实现弹出登录层交互处理。弹出的一个登录层，有表单验证、异步交互、弹出和关闭等应用。

关于jQuery弹出层插件hwLayer怎么用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。