Langages | Liens ----|---- | Bugs | Suggestions de fonctionnalités | Documentation

jQuery CSS Extender

• Installation
• Usage simple
  • CSS pur
  • Copier le CSS entre objet jQuery
  • Réinitialiser le CSS
  • Historique CSS
  • Etats CSS

jQuery CSS Extender est un plugin jQuery qui ajoute plusieurs méthodes relatives à la manipulation du CSS. Son objectif principal était de lire des chaînes de caractères CSS pures en utilisant la méthode .css(). Une fois fait, j'ai eu d'autres idées que j'ai décidé d'implémenter.

Installation

Tout d'abord, téléchargez les fichiers à partir de GitHub.

Ensuite, pour obtenir des erreurs compréhensibles en développement, incluez les fichiers sources dans votre fichier HTML.

<script src="your/path/to/jquery.js"></script>
<script src="your/path/to/jquery-css-extender.js"></script>

Ou si vous êtes en production, utilisez ceux minifiés :

<script src="your/path/to/jquery.min.js"></script>
<script src="your/path/to/jquery-css-extender.min.js"></script>

Usage simple

CSS pur

Comme cela a été dit, le but premier de ce plugin était l'ajout de règles CSS aux éléments du DOM grâce à du CSS pur.

// Ecrivez directement du CSS...
$('.elements').css('color: #f00; background-color: #aaa; border: 1px solid #000;');

// Mmh, peut-être mieux en plusieurs lignes ?
$('.elements').css(
    'color: #f00;' +
    'background-color: #aaa;' +
    'border: 1px solid #000;'
);

// Mais ça l'est encore plus avec des backticks !
$('.elements').css(`
    color: #f00;
    background-color: #aaa;
    border: 1px solid #000;
`);

Vous pouvez aussi styliser les éléments enfants directement avec des blocs CSS grâce au selecteur spécial :this qui référence l'élément actuellement selectionné avec jQuery.

// #element va avoir un affichage flex.
// Les enfants directs <button> de #element vont avoir une couleur de police rouge.
$('#element').css(`
    :this {
        display: flex;
    }
    
    > button {
        color: red;
    }
`);

Notez que tous les autres selecteurs écrit avant :this ne vont pas être pris en compte.
Notez aussi que > button et :this > button font la même chose.

Copier le CSS entre objet jQuery

Vous avez deux boutons, vous avez changé l'apparence du premier et voulez que le second soit exactement identique ? Aucun problème.

let cssRulesToCopy = ['color', 'background-color', 'border', 'border-radius'];

// Copie quelques règles CSS de l'un à l'autre.
$('#buttonA').copyCss($('#buttonB'), cssRulesToCopy);
// Ou l'autre peut prendre à l'un.
$('#buttonB').copyCssFrom($('#buttonA', cssRulesToCopy));

Vous pouvez aussi prendre le style d'un élément. L'élément qui donne ses règles les perd.

let cssRulesToTake = ['color', 'background-color', 'border', 'border-radius'];

// Prend quelques règles CSS d'un autre.
$('#buttonB').takeCss($('#buttonA'), cssRulesToTake);
// Ou les donne.
$('#buttonA').giveCssTo($('#buttonB', cssRulesToTake));

Réinitialiser le CSS

Si vous voulez réinitialiser certaines ou toutes les règles CSS d'un élément.

// Réinitialise toutes les règles dans leurs valeurs initiales.
$('#element').resetCss();
// Réinitialise quelques règles seulement.
$('#element').resetCss(['color', 'background-color']);

Historique CSS

A chaque fois que la méthode .css() est utilisée, tous les changements sont gardés en mémoire dans les données jQuery.

// Pour obtenir l'historique des changements.
$('#element').cssHistory();

Cela va vous donner un objet JS avec des informations sur les règles CSS.

[
    {...},
    {
        // Liste de toutes les règles altérées, obtenue depuis "changedRulesFromLast" de tout l'historique.
        allChangedRules: {...},
        
        // Liste de toutes lesrègles altérées depuis le dernier historique.
        changedRulesFromLast: {...},
        
        // Liste de toutes les règles.
        allComputedRules: {...},
        
        // Liste de toutes les règles altérées.
        changedComputedRules: {...},
        
        // Référence à l'objet à partir duquel les règles ont été copiées.
        copiedFromObject: {...}|null,
        
        // Si cet historique a été créé à partir d'une réinitialisation.
        fromReset: {...}|null,
        
        // Référence à l'objet à partir duquel les règles ont été prises.
        takenFromObject: {...}|null,
    }
]

Ce système est activé par défaut, mais vous pouvez le désactiver.

// Pour le désactiver.
$('#element').useCssHistorySystem(false);
// Pour l'activer.
$('#element').useCssHistorySystem(true);
// Pour le désactiver SEULEMENT pour le prochain ensemble de changements qui va être fait au CSS.
$('#element').forgetCssHistorySystemOnce();

Ou si vous voulez simplement vérifier si le système est actif ou non ...

// Retourne true ou false.
$('#element').useCssHistorySystem();

Etats CSS

Le système d'états CSS a été conçu principalement pour travailler avec les écouteurs d'événements.
Ce système ressemble à celui des historiques, mais il y a quelques différences :

• Chaque entrée peut avoir une chaîne de caractères en tant qu'ID.
• Vous décidez quand il faut créer une nouvelle entrée.

Utilisation facile, comme le système d'historique:

// Sauvegarde un état appelé "myState".
$('#element').cssState('myState', {'color': 'red'});
// Utilise ce nouvel état "myState".
$('#element').useCssFromState('myState');
// Ou si vous voulez utiliser le style actuel pour créer un nouvel état.
$('#element').css('...').cssStateFromCurrent('secondState');

La première particularité est l'utilisation d'un état par défaut, car celui-ci possède ses propres méthodes, et est donc simple d'usage.

// Sauvegarde un état par défaut à partir du style courant...
$('#element').css('...').defaultCssStateFromCurrent();
// Ou directement à partir d'un objet.
$('#element').defaultCssState({...});
// Vous voulez utiliser l'état par défaut ?
$('#element').useDefaultCssState();

La seconde particularité est, comme déjà cité, la relation avec les écouteurs d'événements.

// Utilise l'état "myState" quand l'élément est cliqué.
$('#element').cssStateOn('click', 'myState');
// ...est égal à
$('#element').on('click', function() {
    $(this).useCssFromState('myState');
});

// Et quand je dis que ce point est une particularité, la ligne ci-dessous va chercher un état nommé "click".
$('#element').cssStateOn('click');

Cependant, il y a une méthode spéciale pour l'événement "hover" :

// Celui-ci va faire en sorte que l'élément utilise "myState" au survol de la souris, mais va revenir à l'état par défaut lorsque la souris n'est plus dessus !
$('#element').cssStateOnHover('myState');
// Et si vous avez déjà un état "hover"...
$('#element').cssStateOnHover();

Un dernier point, il y a une méthode consistant a créer un écouteur d'événements pour chaque état déjà existant, mis à part celui par défaut bien entendu.
Cette méthode va executer .cssStateOnHover() pour l'état "hover", sinon elle va utiliser .cssStateOn('...').

// Créé plusieurs écouteurs: hover et click.
$('#element')
    .cssState('default', {...})
    .cssState('hover', {...})
    .cssState('click', {...})
    .autoCssStateOn();