Analysis and comparison of JQuery plug-in Style customization methods

Analysis and comparison of JQuery plug-in Style customization methods_jquery

WBOY

Release： 2016-05-16 17:53:51

Original

1349 people have browsed it

1 Preface
Recently, due to the needs of the project, I used a JQuery plug-in. After downloading the plug-in, I soon discovered that many default plug-in styles did not meet the project requirements and had to be modified.
During this process, I found that I have used a variety of different methods to customize the plug-in Style. I am very happy to have finally found what I think is the best method. I have also deepened my understanding of CSS and have a lot of feelings. This article is a summary of the understanding of these new CSS.
2 JQuery plug-in Style customization method
2.1 Enter customized objects when initializing the plug-in
Better plug-ins will allow the input of customized objects during initialization.
If you enter a customized object, the plug-in will use the value in the customized object, for example,

Copy the code The code is as follows:

 
var adgallerySetting = { 
width: 600, // Width of the image, set to false and it will read the CSS width 
height: 400, // Height of the image , set to false and it will read the CSS height 
} 
var galleries = $('.ad-gallery').adGallery(adgallerySetting); 

If no customization is entered Object, the plug-in will use its own default value, for example,
var galleries = $('.ad-gallery').adGallery();
2.2 Modify the plug-in’s CSS
If the plug-in does not provide customization The object or the Style you want to modify is not in the customized object definition. A more intuitive method is to modify the plugin's CSS file. This is not a method worth advocating because it will corrupt the source code of the plug-in itself and is not conducive to future plug-in version updates.
2.3 Register Callback function
Most plug-ins also define Callback functions in customized objects. If the Callback function is called after the plug-in completes style enhancement, you can write this Callback and register it, and modify the DOM model in the Callback to complete the customization of the plug-in style. This method is more cumbersome and requires you to spend more time understanding the internal implementation of the plug-in. For example,

Copy code The code is as follows:

 
var adgallerySetting = { 
// All callbacks has the AdGallery objects as 'this' reference 
callbacks: { 
// This gets fired right before old_image is about to go away, and new_image 
// is about to come in 
beforeImageVisible: function(new_image, old_image) { 
// Do something wild! 
var thing = "this is it"; 
//Change the plugin enhanced page 
$(".ad-gallery .ad -image-wrapper .ad-image").removeAttr("style"); 
$(".ad-gallery .ad-image-wrapper .ad-image").css("width", "100% "); 
var width = $(".ad-gallery .ad-image-wrapper .ad-image img").attr("width"); 
$(".ad-gallery .ad- image-wrapper .ad-image img").attr("width", "100%"); 
$(".ad-gallery .ad-image-wrapper .ad-image .img").attr( "width", 100%); 
$(".ad-gallery .ad-image-wrapper .ad-image").attr("height", 100%); 
} 
} 
}; 

2.4 Add a new CSS file and reload part of the plug-in style
CSS is the abbreviation of cascading style sheet. As the name suggests, it has a Cascading standard. When multiple CSS files conflict with the style definition of the same HTML element, it will decide which CSS style to apply based on the following rules.
1) ! Important flag.
2) Source. Author (CSS file linked by HTMl), Reader (Web surfer), User agent (Browser)
3) Relevance.
For details, you can check the link page in the reference section.
This method, in my opinion, is the best method except 1.1. Here are some code examples.

Copy code The code is as follows:

 
#descriptions .ad-image-description { 
 position: absolute; 
} 
#descriptions .ad-image-description .ad-description-title { 
display: block; 
} 
.ad-gallery .ad-image-wrapper .ad-image { 
width: 100% ! important; 
left: 0px ! important; 
} 

3 Summary
Based on this experience, I think the best way to customize the plug-in Style is to enter a customized object (if the plug-in supports it) or CSS overloading. Some plug-ins will define style by adding style="...." to the HTML element. In this case, you will find that the appearance of the "! important" logo is quite comforting. J
4 References
http://www.w3.org/TR/CSS21/cascade.html
http://stackoverflow.com/questions/7022344/ css-newbie-questions-on-authors-style-readers-style-agents-style
http://htmlhelp.com/reference/css/structure.html
http://css-tricks.com/override-inline-styles-with-css/