Discussion :

[Rojofrai]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[ma5t3r]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou laisser les options par défaut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Rojofrai]

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.

[Rojofrai]

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