溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細(xì)講解有關(guān)jQuery彈出層插件hwLayer怎么用，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
我們將對(duì)彈出層代碼做一個(gè)提升，通過實(shí)例來講解如何將jQuery彈出層效果的js部分封裝成一個(gè)jQuery插件，使得其具有更靈活的配置和擴(kuò)展性。
我們知道，jQuery為開發(fā)者提供了插件開發(fā)機(jī)制，其中一種方法是使用$.extend()來擴(kuò)展jQuery，它其實(shí)就是用來在jQuery命名空間上增加新函數(shù)。而另一種也是我們常用來開發(fā)jQuery插件的方法是通過$.fn 向jQuery添加新的方法。
我們來使用$.fn來做插件開發(fā)，這里所說的基本模板也可以說是基本格式吧，經(jīng)常做jQuery插件開發(fā)的朋友會(huì)先把插件格式定下來，然后就是往格式里填業(yè)務(wù)代碼。
以下代碼是一個(gè)基本的jQuery插件的格式結(jié)構(gòu)。
;(function($,window,document,undefined){
$.fn.myPlugin = function(options) {
var defaults = {
'width': 600,
'height': 400
};
var settings = $.extend({},defaults, options);//將一個(gè)空對(duì)象做為第一個(gè)參數(shù)
return this.css({
'width': settings.width+'px',
'height': settings.height+'px'
});
}
})(jQuery,window,document);
上述代碼中，我們將所有的插件代碼包裹在自調(diào)用函數(shù)中：
;(function($,window,document,undefined){
//這里是我們的代碼。。
})(jQuery,window,document);
我們?cè)诖a開頭加一個(gè)分號(hào)，這是一個(gè)習(xí)慣，避免與別的代碼沖突出錯(cuò)。同時(shí)，將系統(tǒng)變量windows等以參數(shù)形式傳遞到插件內(nèi)部，據(jù)說可以提高插件訪問速度，不要問我為什么，都是從前輩經(jīng)驗(yàn)中學(xué)習(xí)的。
回到第一段代碼，在插件里面，myPlugin是自定義的插件名稱。我們要提供參數(shù)選項(xiàng)可以讓用戶自由定制，一般情況下，我們?cè)诓寮飼?huì)提供參數(shù)選項(xiàng)的默認(rèn)值defaults，就是用戶在不傳參數(shù)調(diào)用插件時(shí)使用的是默認(rèn)參數(shù)值。而通過jQuery的extend方法可以接收用戶定義的參數(shù)選項(xiàng)。最后我們使用return，就是為了讓插件支持鏈?zhǔn)秸{(diào)用。這段簡(jiǎn)單的代碼其實(shí)就是設(shè)置寬度和高度的功能。
實(shí)際我們?cè)诓寮_發(fā)中可能會(huì)有大量的代碼，為了更好的維護(hù)代碼，使代碼結(jié)構(gòu)更清晰明了，我們使用面向?qū)ο蟮乃枷?。在代碼中新建一個(gè)對(duì)象，定義對(duì)象的構(gòu)造函數(shù)以及方法，最后在插件中new對(duì)象，調(diào)用對(duì)象方法。好了，我們現(xiàn)在回到我們本文所要介紹的插件hwLayer中來，我們將插件hwLayer的模板定義如下：
;(function($, window, document, undefined) {
//定義HwLayer的構(gòu)造函數(shù)
var HwLayer = function(ele, opt){
var self = this;
self.$element = ele,
self.defaults = {
/*這里是默認(rèn)參數(shù)選項(xiàng)*/
},
self.locked = false,
self.options = $.extend({}, self.defaults, opt)
}
//定義HwLayer的方法,這里寫主要的業(yè)務(wù)代碼
HwLayer.prototype = {
init: function(){
},
showLayer: function(){
}
}
//在插件中使用HwLayer對(duì)象
$.fn.hwLayer = function(options) {
var hwLayer = new HwLayer(this, options);
return this.each(function () {
hwLayer.init(); //調(diào)用其方法
});
};
})(jQuery, window, document);
有了上面的插件模板格式后，我們就可以專心的寫插件內(nèi)部代碼了。插件內(nèi)部代碼沒有規(guī)定一定要按照什么格式來寫，我們可以根據(jù)業(yè)務(wù)需求自由發(fā)揮。在hwLayer插件中，定義了HwLayer對(duì)象，在HwLayer的構(gòu)造函數(shù)中設(shè)置默認(rèn)屬性選項(xiàng)，然后繼承HwLayer，定義init()、showLayer()、hideLayer()方法，分別表示初始化、顯示彈出層和隱藏彈出層。在init()方法中，我們主要捕捉點(diǎn)擊觸發(fā)彈出層以及關(guān)閉彈出層的事件。showLayer()方法中，獲取當(dāng)前彈出層id，并計(jì)算獲取寬度和高度，并讓彈出層居中等，由于要兼容小屏幕所以寫得有點(diǎn)復(fù)雜。hideLayer()方法中，隱藏了彈出層，并觸發(fā)調(diào)用了隱藏彈出層后的回調(diào)函數(shù)。最后我們?cè)诓寮姓{(diào)用HwLayer對(duì)象的init()方法即可。
hwLayer插件的完整代碼如下，并將插件文件命名為：jquery.hwLayer.js，有不對(duì)的地方，歡迎大家指正
/*
* 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, //是否點(diǎn)擊半透明遮罩層時(shí)關(guān)閉彈出層
afterClose: function(){}
},
self.locked = false,
self.options = $.extend({}, self.defaults, opt)
}
HwLayer.prototype = {
init: function(){
var self = this,
ele = self.$element;
//點(diǎn)擊彈出層
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 = '沒有設(shè)置彈出層內(nèi)容！';
//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'
});
//點(diǎn)擊或者觸控彈出層外的半透明遮罩層，關(guān)閉彈出層
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);
調(diào)用hwLayer插件就非常簡(jiǎn)單了。跟上一篇文章HTML5+CSS3+jQuery實(shí)現(xiàn)彈出層一樣，先準(zhǔn)備html和css。
<a href="#0" class="btn btn-warning btn-lg" id="confirm-btn" data-show-layer="hw-layer" role="button">點(diǎn)擊彈出確認(rèn)框</a>
<a href="#0" class="btn btn-info btn-lg" id="info-btn" data-show-layer="hw-layer-info" role="button">點(diǎn)擊彈出信息層</a>
<p class="hw-overlay" id="hw-layer">
<p class="hw-layer-wrap">
<p class="row">
<p class="col-md-3 col-sm-12 hw-icon">
<i class="glyphicon glyphicon-info-sign"></i>
</p>
<p class="col-md-9 col-sm-12">
<h5>你確定嗎？</h5>
<p>這是HTML+CSS+Javascript實(shí)現(xiàn)的一個(gè)彈出層效果，它可以在PC和移動(dòng)端瀏覽器上工作。</p>
<br/>
<button class="btn btn-success hwLayer-ok">確 定</button>
<button class="btn btn-warning hwLayer-cancel">取 消</button>
</p>
</p>
</p>
</p>
<p class="hw-overlay" id="hw-layer-info">
<p class="hw-layer-wrap">
<a class="close hwLayer-close" aria-label="Close"><span aria-hidden="true">×</span></a>
<p class="row" id="hw-layer-info">
<p>這是HTML+CSS+Javascript實(shí)現(xiàn)的一個(gè)彈出層效果，它是響應(yīng)式的，它可以在所有現(xiàn)代瀏覽器上工作（包括PC和移動(dòng)端）。</p>
</p>
</p>
</p>
兩個(gè)按鈕，對(duì)應(yīng)兩個(gè)彈出層。注意加載css和jquery庫。
接下來js調(diào)用：
<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('您已經(jīng)確定了！');
$('#hw-layer').hwLayer('close');
});
$('#info-btn').hwLayer({
tapLayer: true
});
});
</script>
不解釋了，彈出層其實(shí)不光只是彈出一個(gè)層展示信息而已，如本站前文所說，復(fù)雜的彈出層有很多交互應(yīng)用。接下來我會(huì)給大家介紹一種最常見的彈出層交互處理：使用jQuery+PHP實(shí)現(xiàn)彈出登錄層交互處理。彈出的一個(gè)登錄層，有表單驗(yàn)證、異步交互、彈出和關(guān)閉等應(yīng)用。
關(guān)于jQuery彈出層插件hwLayer怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
