Analysis and Comparison of JQuery plug-in Style customization methods

1 Preface
Recently, a JQuery plug-in is used because of project requirements. After I put the plug-in down, I soon found that many default plug-in styles do not meet the project requirements and must be modified.
In this process, I found that I have used a variety of methods to customize plug-in styles. I am glad that I finally found the best method, and I have a lot of deep understanding about CSS. This article sorts out the new CSS.
2 JQuery plug-in Style customization method
2.1 enter custom objects when initializing the plug-in
A relatively good plug-in will allow you to enter custom objects during initialization.
If you enter a custom object, the plug-in uses the value in the custom object, for example,
Copy codeThe 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 you do not enter a custom object, the plug-in uses its own default value, for example,
Var galleries = $ ('. ad-gallery'). adGallery ();
2.2 modify the CSS of the plug-in
If the plug-in does not provide custom objects or the Style you want to modify is not in the custom object definition, an intuitive method is to modify the CSS file of the plug-in. This is not an advocate method, because it will unzip the source code of the upt plug-in itself, and is not conducive to later plug-in version updates.
2.3 Register the Callback function
Most plug-ins also define Callback functions in custom objects. If the Callback function is called after the plug-in completes style enhance, you can write this Callback and register it. Modify the DOM model in Callback to customize the plug-in style. This method is cumbersome and requires you to spend a lot of time understanding the internal implementation of the plug-in. For example,
Copy codeThe Code is as follows:
Var adgallerySetting = {
// All callbacks has the AdGallery objects as 'eas' 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 some styles of the plug-in.
CSS is short for cascading style sheet. It is named solid and 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 according to the following rules.
1 )! Important ID.
2) source. Author (HTMl chained CSS file), Reader (Web surfer), User agent (Browser)
3) correlation.
For details, refer to the link webpage in the reference section.
In my opinion, this method is the best except 1.1. Below are some sample codes.
Copy codeThe 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. Conclusion
Based on this experience, I think the best way to customize the plug-in Style is to input custom objects (if supported by the plug-in) or CSS overload. Some plug-ins define styles by adding style = "..." to HTML elements. In this case, you will find, "! The appearance of the important logo is quite pleasant. J
4. Reference
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/