1 Preface
A jquery plugin has been used recently because of the project's needs. After putting the plugin down, I soon found that many of the default plugin style does not meet the project requirements and must be modified.
In this process, I found myself using a number of different methods to implement plug-in style customization. Very happy finally found I think the best way, the understanding of the CSS also deepened a lot of feelings. This article is a sort of understanding of these new CSS.
2JQuery Plug-in Style customization method
2.1 Entering a custom object when initializing a plug-in
The better plug-ins allow you to enter custom objects when initializing.
If you enter a custom object, the plug-in uses the values in the custom object, for example,
Copy Code code as follows:
var adgallerysetting = {
width:600,//width of the image, set to false and it'll read the CSS Width
height:400,//Height of the image, set to false and it'll 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 plugin CSS
If the plugin does not provide a custom object or the style you want to modify is not in the custom object definition, a more intuitive approach is to modify the plugin's CSS file. This is not a recommended method, because it corrupt the source code of the plug-in itself and is not conducive to later plug-in versions of the update.
2.3 Register 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 to modify the DOM model in callback to complete the customization of the plug-in style. This method is more cumbersome, you need to spend more time to understand the internal implementation of Plug-ins. For example
Copy Code code as follows:
var adgallerysetting = {
All callbacks has the Adgallery objects as ' this ' reference
Callbacks: {
This gets fired right before old_image are 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, reload part of the plugin style
CSS is the abbreviation of cascading style sheet, fixed name, it has a cascading standard. When multiple CSS files conflict with the style definition of the same HTML element, it determines which CSS style to apply based on the following rules.
1)! Important identification.
2) sources. Author (HTML-chained CSS file), Reader (Web surfer), User agent (Browser)
3) relevance.
You can view the links page for the reference section.
This method, in my opinion, is the best method except for 1.1, and here are some code examples.
Copy Code code 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 custom object (if the plug-in supports it) or a CSS overload. Some plug-ins define style by adding style= "..." to HTML element. In this case, you will find, "! 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/
