极品分享

jQuery弹出层插件-hwLayer

上一篇文章中我们介绍了如何使用HTML5+CSS3+jQuery来实现弹出层效果,本文我们将对弹出层代码做一个提升,通过实例来讲解如何将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.helloweba.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。

<a href="#0" class="btn btn-warning btn-lg" id="confirm-btn" data-show-layer="hw-layer" role="button">点击弹出确认框</a> 
<a href="#0" class="btn btn-info btn-lg" id="info-btn" data-show-layer="hw-layer-info" role="button">点击弹出信息层</a> 
 
<div class="hw-overlay" id="hw-layer"> 
    <div class="hw-layer-wrap"> 
        <div class="row"> 
            <div class="col-md-3 col-sm-12 hw-icon"> 
                <i class="glyphicon glyphicon-info-sign"></i> 
            </div> 
            <div class="col-md-9 col-sm-12"> 
                <h4>你确定吗?</h4> 
                <p>这是HTML+CSS+Javascript实现的一个弹出层效果,它可以在PC和移动端浏览器上工作。</p> 
                 
                <br/> 
                <button class="btn btn-success hwLayer-ok">确 定</button> 
                <button class="btn btn-warning hwLayer-cancel">取 消</button> 
            </div> 
        </div> 
    </div> 
</div> 
 
<div class="hw-overlay" id="hw-layer-info"> 
    <div class="hw-layer-wrap"> 
        <a class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></a> 
        <div class="row" id="hw-layer-info"> 
        <p>这是HTML+CSS+Javascript实现的一个弹出层效果,它是响应式的,它可以在所有现代浏览器上工作(包括PC和移动端)。</p> 
        </div> 
    </div> 
</div>

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

接下来js调用:

<script src="jquery.hwLayer.js"></script> 
<script> 
$(function(){ 
    $('#confirm-btn').hwLayer({ 
        width: 500, 
        tapLayer: false, 
        afterClose: function(){ 
            console.log('close'); 
        } 
    }); 
    $(".hwLayer-ok").on('click',  function() { 
        console.log('您已经确定了!'); 
        $('#hw-layer').hwLayer('close'); 
    }); 
    $('#info-btn').hwLayer({ 
        tapLayer: true 
    }); 
}); 
</script>

不解释了,弹出层其实不光只是弹出一个层展示信息而已,如本站前文所说,复杂的弹出层有很多交互应用。


源码:

jQuery弹出层插件_jquery.hwLayer.zip


2016-06-21 0 /
Javascript/jQuery
/
标签: 

评论回复

回到顶部