Parametres pour un plugin jquery

Version imprimable

Bonjour,
Le suis un fainéant et j'évite d'embellir les pages que je génère à l'aide d'un CMS (joomla) en mettant des balises span. Je préfère que celles ci soient modifiées automatiquement par le PC du visiteur à l'aide d'un plugin jquery.
A ce titre, j'ajoute une lettrine en tête de chaque paragraphe, si le paragraphe en question ne comporte aucune balise, de type : span, a, li,...
Dans le plugin, j'aimerais mettre en paramètre : l'identifiant de la Div concernée et la couleur de la lettrine, mais je ne sais pas faire.
Voici le fichier lettrineRouge.js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $(function () { var str = $("div.centre p"); $.each(str, function (index, value) { var HauteurTexte = $("p").css('font-size'); HauteurTexte = parseFloat(HauteurTexte) * 2.3; var HauteurLigneTexte = $("p").css('line-height'); HauteurLigneTexte = parseFloat(HauteurLigneTexte) * 2 - 2; var CouleurLettrine = "red"; var str = $(this).html(); str = str.replace(/[\s]+/g, ' '); var regexp = /[A-Z]/gi; var lettres = str.split(''); var LettreUne = lettres[0]; if (LettreUne.match(regexp)) { lettres[0] = '<span style= "line-height: ' + HauteurLigneTexte + 'px; font-weight: bold; text-align: center; float:left; font-size: ' + HauteurTexte + 'px; margin-right:5px; width: ' + HauteurLigneTexte + 'px; color: ' + CouleurLettrine + '; background-color: #CCCCCC; border: solid 1px ' + CouleurLettrine + ';">' + lettres[0] + '</span>'; str = lettres.join(''); $(this).html(str); } }); })(jQuery);
Pour faire la même chose sur div.gauche et en mettant la lettrine en bleu, je suis obligé de générer un nouveau fichier js en modifiant le nom de la div et la ligne CouleurLettrine.
Un champion de jquery peut-il me donner le solution, par avance merci.

Ce que tu codes n'est pas un plugin.
Les plugins jQuery ont une structure spécifique.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
(function($) {
    $.fn.monPlugin = function(options) {
        var options = $.extend({
            //definition de tes options par defaut
            color : '#ff0000',
            bgcolor: '#000000',
            // et puis d'autres options
        }, options);
        return $(this).each( function() {
            //ici, ton traitement pour l'élément visé
                });
            });
        });
    }
})(jQuery);

Et tu pourras utiliser ton plugin, comme un plugin

Code:

1
2
 
$('p').monPlugin({color: '#00ff00', bgcolor : '#0000ff'});

ou laisser les options par défaut

Code:

1
2
 
$('p').monPlugin();

02/06/2020, 11h00
Rojofrai

Merci, je vais essayer la structure présentée

Un grand merci pour cette réponse rapide.
Je vais me mettre au travail pour réaliser ce plugin et vous ferais part de la réussite ou de l'échec de la tentative.
03/06/2020, 16h40
Rojofrai

C'est OK

J'ai eu un peu de difficulté à faire ce plugin.
Il est point et il fonctionne correctement.
Encore merci