


Analysis and comparison of JQuery plug-in Style customization methods_jquery
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,
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,
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.
#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/

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.

Methods for react to dynamically modify style: 1. Add ref to the element whose style needs to be modified, with syntax such as "<div className='scroll-title clear-fix' ref={ this.manage }>"; 2. Through dynamic control The change of state modifies the style of the element; 3. By using JS code in the DOM, the display and hiding transitions of different DOMs are realized.

New features of style Vue3.2 version has made many upgrades to the style of single-file components, such as local styles, css variables, and styles exposed to templates. (Learning video sharing: Vue video tutorial) 1. Local style When the label has scoped attribute, its CSS will only be applied to the elements of the current component: hi.example{color:red;} 2. The depth selector is scoped If the selector in the style wants to make a more "deep" selection, that is, affect sub-components, you can use the :deep() pseudo-class: .a:deep(.b){/*...*/ }DOM content created through v-html will not be

Vue error: Unable to use v-bind to bind class and style correctly, how to solve it? In Vue development, we often use the v-bind instruction to dynamically bind class and style, but sometimes we may encounter some problems, such as being unable to correctly use v-bind to bind class and style. In this article, I will explain the cause of this problem and provide you with a solution. First, let’s understand the v-bind directive. v-bind is used to bind V

How to use MySQL to create a customizable accounting system table structure to meet the specific needs of different industries and enterprises? Introduction: In the modern business environment, accounting systems play a vital role in helping companies record and analyze financial data. However, different industries and businesses have different needs for accounting systems. In order to meet the specific needs of different enterprises, we can use the MySQL database to create a customizable accounting system table structure. This article will introduce how to use MySQL to create a flexible accounting system table structure and provide

Customized Java frameworks can meet diverse business needs. Principles include modular design, extension points, configurability, reflection, and dynamic proxies. This article takes the SpringBoot application as an example to show how to customize the login mechanism, support additional authentication methods, and achieve the purpose of customizing the framework behavior without changing the framework code.

Because the article is of limited length, only brief code examples are included. Here's an example: Suppose we have the following HTML structure: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewpo

In the field of web development, CMS (content management system) has gradually become one of the necessary components for various websites. As a universal solution, CMS not only has good scalability and maintainability, but also helps users quickly build, manage and update website content. In practical applications, many website administrators or developers need to personalize or develop CMS to meet their own business needs and user experience. This article will take the PHP language as an example to introduce how to use it for CMS customization and customization.
