Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the jQuery pop-up layer plug-in hwLayer, the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

We will improve the pop-up layer code and illustrate how to package the js part of the jQuery pop-up layer effect into a jQuery plug-in to make it more flexible in configuration and expansibility.

We know that jQuery provides plug-in development mechanisms for developers, one of which is to use $. Extend () to extend jQuery, which is actually used to add new functions to the jQuery namespace. Another method that we often use to develop jQuery plug-ins is to add new methods to jQuery through $.fn.

Basic template

Let's use $.fn for plug-in development. The basic template mentioned here can also be said to be the basic format. Friends who often do jQuery plug-in development will first set the plug-in format, and then fill in the business code into the format.

The following code is the format structure of a basic jQuery plug-in.

; (function ($, window,document,undefined) {$. Fn.myPlugin = function (options) {var defaults = {'width': 600,' height': 400}; var settings = $.extend ({}, defaults, options); / / take an empty object as the first parameter return this.css ({' width': settings.width+'px', 'height': settings.height+'px'});}}) (jQuery,window,document)

In the above code, we wrap all the plug-in code in the self-calling function:

; (function ($, window,document,undefined) {/ / here is our code. }) (jQuery,window,document)

We add a semicolon at the beginning of the code, which is a habit to avoid conflicts with other code errors. At the same time, passing the system variable windows to the plug-in in the form of parameters is said to improve the access speed of the plug-in. Don't ask me why. I learned from the experience of my predecessors.

Going back to the first piece of code, in the plug-in, myPlugin is the custom plug-in name. We need to provide parameter options for users to customize freely. In general, we will provide the default value of parameter option defaults in the plug-in, that is, users use the default parameter value when calling the plug-in without passing parameters. User-defined parameter options can be received through the extend method of jQuery. Finally, we use return to make the plug-in support chained calls. This simple code is actually the function of setting width and height.

In fact, we may have a lot of code in plug-in development. In order to better maintain the code and make the code structure clearer, we use object-oriented thinking. Create a new object in the code, define the object's constructor and method, and finally new the object in the plug-in and call the object method. OK, now let's go back to the plug-in hwLayer that we will introduce in this article, and we will define the template for the plug-in hwLayer as follows:

; (function ($, window, document, undefined) {/ / defines the constructor of HwLayer var HwLayer = function (ele, opt) {var self = this Self.$element = ele, self.defaults = {/ * here is the default parameter option * /}, self.locked = false, self.options = $.extend ({}, self.defaults, opt)} / / define the method of HwLayer, here write the main business code HwLayer.prototype = {init: function () {}, showLayer: function () {} / / use the HwLayer object $. Fn.hwLayer = function (options) {var hwLayer = new HwLayer (this, options) in the plug-in Return this.each (function () {hwLayer.init (); / / call its method});};}) (jQuery, window, document)

HwLayer plug-in

With the above plug-in template format, we can concentrate on writing the internal code of the plug-in. The internal code of the plug-in does not specify what format it must be written in, and we are free to play it according to our business needs. In the hwLayer plug-in, the HwLayer object is defined, the default property options are set in the constructor of HwLayer, then the HwLayer is inherited, and the init (), showLayer (), hideLayer () methods are defined to represent initialization, show pop-up layer, and hide pop-up layer, respectively. In the init () method, we mainly capture events that click to trigger the pop-up layer and close the pop-up layer. In the showLayer () method, get the current pop-up layer id, calculate the width and height of the pop-up layer, and make the pop-up layer medium, which is a bit complicated because it is compatible with the small screen. In the hideLayer () method, the pop-up layer is hidden and the callback function after the hidden pop-up layer is called is triggered. Finally, we can call the init () method of the HwLayer object in the plug-in.

The complete code of the hwLayer plug-in is as follows, and the plug-in file is named: jquery.hwLayer.js. If there is something wrong, please correct it.

/ * * hwLayer pop-up layer plug-in-v0.1 * by Moonlight * 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, / / whether to close pop-up layer afterClose: function () {}}, self.locked = false, self.options = $.extend ({}, self.defaults, opt)} HwLayer.prototype = {init: function () {var self = this, ele = self.$element; / / Click pop-up layer ele.on (' click',function (e) {e.preventDefault ()) Self.showLayer ();}); $('.hwLayer-cancel,.hwLayer-close') .on (' click', function () {self.hideLayer ();});}, / / Show pop-up layer showLayer: function () {var self = this; var layerid = self.$element.data ('show-layer'); / / get layer ID if (layerid = =''| layerid = = undefined) {var msg ='no pop-up layer content set!' ; / / console.log (msg); alert (msg);} else {var layer = $('#'+ layerid), layerwrap = layer.find ('.hw-layer-wrap'); layer.fadeIn (); / / screen centered var layer_w,layer_h; var w = $(window). Width (); if (wh) {layer_h = hmur40; 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'}) / Click or touch the translucent mask layer outside the pop-up layer, and close the pop-up layer layer.on ('click', function (event) {if (event.target = = this & & self.options.tapLayer = = true) {self.hideLayer ();}});}}, / / hide the pop-up layer 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)

Call the hwLayer plug-in

Calling the hwLayer plug-in is very simple. As in the previous article, HTML5+CSS3+jQuery implements the pop-up layer, preparing html and css first.

Click the pop-up confirmation box and click the pop-up information layer.

Are you sure?

This is a pop-up layer effect implemented by HTML+CSS+Javascript that works on PC and mobile browsers.

Definite withdrawal and cancellation

×

This is a pop-up layer effect implemented by HTML+CSS+Javascript, which is responsive and works on all modern browsers (including PC and mobile).

Two buttons, corresponding to two pop-up layers. Note that the css and jquery libraries are loaded.

Next, js calls:

$(function () {$('# confirm-btn'). HwLayer ({width: 500, tapLayer: false, afterClose: function () {console.log ('close');}}); $(".hwLayer-ok") .on (' click', function () {console.log ('you've determined!') ; $('# hw-layer'). HwLayer ('close');}); $(' # info-btn') .hwLayer ({tapLayer: true});})

No, the pop-up layer is not just a pop-up layer to display information, as mentioned earlier on this site, the complex pop-up layer has a lot of interactive applications. Next I'll introduce you to one of the most common pop-up layer interactions: using jQuery+PHP to implement pop-up login layer interactions. A pop-up login layer with applications such as form validation, asynchronous interaction, pop-up and closing.

On the jQuery pop-up layer plug-in hwLayer how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.