Maison interface Web js tutoriel JQuery插件Style定制化方法的分析与比较_jquery

JQuery插件Style定制化方法的分析与比较_jquery

May 16, 2016 pm 05:53 PM
style 定制化

1前言
最近因为项目的需要,使用了一个JQuery插件。把插件下下来后,很快我就发现,很多默认的插件Style不符合项目要求,必须要被修改。
在这个过程中,我发现自己先后使用了多种不同的方法实现插件Style的定制化。很高兴最后找到了我认为最好的方法,对CSS的认识也加深了不少,感触颇多。这篇文章就是对这些新的CSS的认识的一个梳理。
2JQuery 插件Style 定制化方法
2.1 初始化插件时输入定制化对象
做的比较好的插件会在初始化时允许输入定制化对象。
如果输入定制化对象,插件会使用定制化对象中的值,例如,

复制代码 代码如下:

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);

如果不输入定制化对象,插件会使用它自己的默认值,例如,
var galleries = $('.ad-gallery').adGallery();
2.2 修改插件的CSS
如果插件没有提供定制化对象或你想要修改的Style不在定制化对象定义里,一个比较直观的方法是修改插件的CSS文件。这不是一种值得提倡的方法,因为这会Corrupt插件的本身的源代码,且不利于以后插件版本的更新。
2.3 注册Callback函数
大部分插件还在定制化对象里定义Callback函数。如果Callback函数在插件完成style enhance后调用,你可以写这个Callback并注册,在Callback里修改DOM模型,从而完成插件style的定制化。这种方法比较繁琐,需要你花比较多的时间去理解插件内部的实现。例如,
复制代码 代码如下:

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 增加一个新的CSS文件,重载插件的部分style
CSS是cascading style sheet 的缩写,固名思义,它有一个Cascading 标准。当多个CSS 文件对同一个HTML element的style定义有冲突时,它会根据以下规则决定apply哪个CSS style.
1) ! Important 标识。
2) 来源。 Author (HTMl链入的CSS文件), Reader(Web surfer), User agent(Browser)
3) 相关性。
具体可以查看参考部分的链接网页。
这种方法,在我看来是除1.1 外最好的方法,下面是些代码示例。
复制代码 代码如下:

#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总结
根据这次的经验,我觉得定制插件Style的最好方法输入定制化对象(如果插件支持的话)或CSS重载。有些插件会以在HTML element中加入style="...."的方式定义style。在这种情况下,你就会发现,“! important”标识的出现是相当的令人舒心。J
4参考
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/
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment modifier element.style Comment modifier element.style Nov 24, 2023 am 11:15 AM

Méthodes permettant à element.style de modifier les éléments : 1. Modifier la couleur d'arrière-plan de l'élément ; 2. Modifier la taille de la police de l'élément ; 3. Modifier le style de bordure de l'élément ; . Modifier l'alignement horizontal de l'élément. Introduction détaillée : 1. Modifiez la couleur d'arrière-plan de l'élément, la syntaxe est "document.getElementById("myElement").style.backgroundColor = "red";" 2. Modifiez la taille de la police de l'élément, etc.

Comment modifier dynamiquement le style en réaction Comment modifier dynamiquement le style en réaction Dec 28, 2022 am 10:44 AM

Méthodes pour réagir pour modifier dynamiquement le style : 1. Ajoutez une référence à l'élément dont le style doit être modifié, avec une syntaxe telle que "<div className='scroll-title clear-fix' ref={ this.manage }>" ; . Grâce au contrôle dynamique Le changement d'état modifie le style de l'élément ; 3. En utilisant le code JS dans le DOM, l'affichage et le masquage des transitions des différents DOM sont réalisés.

Quelles sont les nouvelles fonctionnalités du style Vue3 et comment les utiliser Quelles sont les nouvelles fonctionnalités du style Vue3 et comment les utiliser May 14, 2023 pm 10:52 PM

Nouvelles fonctionnalités du style La version Vue3.2 a apporté de nombreuses mises à niveau au style des composants à fichier unique, tels que les styles locaux, les variables CSS et les styles exposés aux modèles. (Partage vidéo d'apprentissage : tutoriel vidéo vue) 1. Style local Lorsque l'étiquette a un attribut scoped, son CSS ne sera appliqué qu'aux éléments du composant courant : hi.example{color:red;} 2. Le sélecteur de profondeur est scoped Si le sélecteur du style souhaite effectuer une sélection plus "profonde", c'est-à-dire affecter les sous-composants, vous pouvez utiliser la pseudo-classe :deep() : .a:deep(.b){/*.. .*/ }Le contenu DOM créé via v-html ne sera pas

Erreur Vue : impossible d'utiliser v-bind pour lier correctement la classe et le style, comment le résoudre ? Erreur Vue : impossible d'utiliser v-bind pour lier correctement la classe et le style, comment le résoudre ? Aug 26, 2023 pm 10:58 PM

Erreur Vue : impossible d'utiliser v-bind pour lier correctement la classe et le style, comment le résoudre ? Dans le développement de Vue, nous utilisons souvent la directive v-bind pour lier dynamiquement la classe et le style, mais nous pouvons parfois rencontrer des problèmes, comme l'incapacité d'utiliser correctement v-bind pour lier la classe et le style. Dans cet article, je vais vous expliquer la cause de ce problème et vous proposer une solution. Tout d’abord, comprenons la directive v-bind. v-bind est utilisé pour lier V

Comment utiliser MySQL pour créer une structure de table de système comptable personnalisable afin de répondre aux besoins spécifiques de différentes industries et entreprises ? Comment utiliser MySQL pour créer une structure de table de système comptable personnalisable afin de répondre aux besoins spécifiques de différentes industries et entreprises ? Oct 31, 2023 am 09:36 AM

Comment utiliser MySQL pour créer une structure de table de système comptable personnalisable afin de répondre aux besoins spécifiques de différentes industries et entreprises ? Introduction : Dans l'environnement commercial moderne, les systèmes comptables jouent un rôle essentiel en aidant les entreprises à enregistrer et à analyser les données financières. Cependant, différentes industries et entreprises ont des besoins différents en matière de systèmes comptables. Afin de répondre aux besoins spécifiques des différentes entreprises, nous pouvons utiliser la base de données MySQL pour créer une structure de table de système comptable personnalisable. Cet article explique comment utiliser MySQL pour créer une structure de table de système comptable flexible et fournir

Comment le framework Java peut-il être personnalisé pour les différents besoins de l'entreprise ? Comment le framework Java peut-il être personnalisé pour les différents besoins de l'entreprise ? Jun 02, 2024 am 09:07 AM

Les frameworks Java personnalisés peuvent répondre à divers besoins commerciaux. Les principes incluent la conception modulaire, les points d'extension, la configurabilité, la réflexion et les proxys dynamiques. Cet article prend l'application SpringBoot comme exemple pour montrer comment personnaliser le mécanisme de connexion, prendre en charge des méthodes d'authentification supplémentaires et atteindre l'objectif de personnalisation du comportement du framework sans modifier le code du framework.

Utilisez le sélecteur de pseudo-classe :checked pour modifier le style d'une case à cocher ou d'un bouton radio coché Utilisez le sélecteur de pseudo-classe :checked pour modifier le style d'une case à cocher ou d'un bouton radio coché Nov 20, 2023 am 11:48 AM

Cet article étant de longueur limitée, seuls de brefs exemples de code sont inclus. Voici un exemple : Supposons que nous ayons la structure HTML suivante : &lt;!DOCTYPEhtml&gt;&lt;htmllang="en"&gt;&lt;head&gt;&lt;metacharset="UTF-8"&gt;&lt;metaname="viewpo

Comment utiliser PHP pour développer des modules de développement personnalisés et secondaires dans CMS Comment utiliser PHP pour développer des modules de développement personnalisés et secondaires dans CMS Jun 21, 2023 am 08:34 AM

Dans le domaine du développement web, le CMS (système de gestion de contenu) est progressivement devenu l'un des composants nécessaires aux différents sites Internet. En tant que solution universelle, le CMS offre non seulement une bonne évolutivité et une bonne maintenabilité, mais aide également les utilisateurs à créer, gérer et mettre à jour rapidement le contenu d'un site Web. Dans les applications pratiques, de nombreux administrateurs ou développeurs de sites Web doivent personnaliser ou développer un CMS pour répondre à leurs propres besoins commerciaux et à l'expérience utilisateur. Cet article prendra le langage PHP comme exemple pour présenter comment l'utiliser pour la personnalisation et la personnalisation du CMS.

See all articles