D'autres boutons d'avertissement

[Invité]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonjour,
Suite au tutoriel de ce sujet, je souhaiterais ajouter d'autres boutons du même type.
Cependant, n'étant pas très doué en codage, j'aurais besoin que l'on m'aide un peu.
Pourriez-vous m'indiquer les champs à modifier pour créer de nouveau bouton s'il vous plaît?
Cordialement,

[ZYVHK]

Hello o/
Essayez de suivre le tutoriel en faisant la même chose avec les codes suivants, et dites-moi si cela fonctionne.

1) Création d'un Widget
Suivre la même procédure avec le code suivant :

Code:

<script type="text/javascript">
    jQuery(document).ready(function() {
   
    jQuery("#text_editor_textarea").before("<img src='http://i.imgur.com/iOAS0Pk.png' title='Sujet résolu'  id='solvedbutt' />");
   
    jQuery('#solvedbutt').click(function(){
    jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[solvedbutt][/solvedbutt]');
    jQuery('.sceditor-container textarea')[0].value += '[solvedbutt][/solvedbutt]'
    });
   
    });
    </script>

2) Création d'un Javascript
Remplacez le Javascript déjà existant par celui-ci;

Code:

    $(function() { 
   
    jQuery('div.postbody div').each(function () {
    if(jQuery(this).text().indexOf('[adm]') != -1) {
    jQuery(this).html(jQuery(this).html().replace(/\[adm\](.+?)\[\/adm\]/gi, '<div class="adm_mess"><div class="titl">Avertissement Administrateur</div><div>$1 </div></div>')) } 
    }); 
   
    jQuery('div.postbody div').each(function () {
    if(jQuery(this).text().indexOf('[mod]') != -1) {
    jQuery(this).html(jQuery(this).html().replace(/\[mod\](.+?)\[\/mod\]/gi, '<div class="mod_mess"><div class="titl">Avertissement Modérateur</div><div>$1 </div></div>')) } 
    });

    jQuery('div.postbody div').each(function () {
    if(jQuery(this).text().indexOf('[solvedbutt]') != -1) {
    jQuery(this).html(jQuery(this).html().replace(/\[solvedbutt\](.+?)\[\/solvedbutt\]/gi, '<div class="solv_mess"><div class="titl">Ce sujet a été résolu.</div><div>$1 </div></div>')) } 
    });  });

3) Mise en place du CSS
Ajouter le CSS suivant :

Code:

    /* Messages BB-Code - bloc de message résolu */
   
    .solv_mess {
    background: #94C441;
    background: linear-gradient(45deg, rgba(255,255,255,.35) 0%, #94C441 100%);
    -webkit-box-shadow: 4px 4px 0px 0px #352727;
    -moz-box-shadow: 4px 4px 0px 0px #352727;
    box-shadow: 4px 4px 0px 0px #352727;
    }
   
    /* Messages BB-Code - Un titre */
    .solv_mess .titl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px dashed #0D4DD3;   
    }
       
    /* modernité BB-Code - présentation du texte */
    .solv_mess .titl + div {
    display: block;
    margin-left: 10px;
    padding: 25px 5px 25px 80px;
    background: transparent url(https://www.shareicon.net/data/128x128/2016/08/20/817720_check_395x512.png) no-repeat left center; 
    }

Si cela fonctionne, je vous expliquerai plus en détails comment en ajouter un à votre goût.

[Invité]

Cela fonctionne, merci !
J'attends donc vos instructions pour apprendre à en rajouter à ma guise.

[ZYVHK]

Super. Je vais procéder étape par étape, mais il se peut que je fasse des erreurs, n'étant pas un pro du jQuery -loin de là d'ailleurs. N'hésitez pas si quelque chose n'est pas assez clair du coup.

Le code du widget à personnaliser est ce qui vous servira à insérer le bouton juste au-dessus de la réponse rapide.

<script type="text/javascript">
jQuery(document).ready(function() {

jQuery("#text_editor_textarea").before("<img src='https://i.imgur.com/iOAS0Pk.png' title='Sujet résolu' id='solvedbutt' />");

jQuery('#solvedbutt').click(function(){
jQuery("div.sceditor-toolbar + iframe").contents().find("body").append('[solvedbutt][/solvedbutt]');
jQuery('.sceditor-container textarea')[0].value += '[solvedbutt][/solvedbutt]'
});

});
</script>

En bleu : C'est le bouton en lui-même; son adresse et son ID. Il fonctionne ainsi : <img src='ADRESSE DE L'IMAGE DU BOUTON' title='TITRE DE L'IMAGE' id='L'ID DU BOUTON, INDISPENSABLE' />
En vert : Ici, c'est la partie qui permet "d'initialiser" le code qui suivra et qui permettra d'insérer le message/cadre prédéfini. En vert, on désigne qu'en cliquant sur l'image ayant l'ID donné (ici solvedbutt), le code qui suit sera exécuté.
En rouge : Ce sera la balise qui entourera votre message/cadre prédéfini et qui les différenciera chacun entre eux. Indispensable pour personnaliser son code en CSS.

La création du code Javascript est la partie contenu du cadre/message p prédéfini. Dans les exemples du tutoriel, c'est grâce à ce code que l'on voit les "Avertissement Modérateur" et "Avertissement Administrateur".

$(function() {

jQuery('div.postbody div').each(function () {
if(jQuery(this).text().indexOf('[adm]') != -1) {
jQuery(this).html(jQuery(this).html().replace(/\[solvedbutt\](.+?)\[\/solvedbutt\]/gi, '<div class="solvedbutt"><div class="titl">Avertissement Administrateur</div><div>$1 </div></div>')) }
}); });

En rouge : Là, on retrouve l'ID du bouton précédemment utilisé dans des balises BBCode, entre crochets donc, mais en class. Il suffit de remplacer les "solvedbutt" en rouge par l'ID de VOTRE bouton au choix. Soit vous reprenez l'ID de votre image pour être sûr de ne pas vous tromper, soit vous prenez celui de votre chance.
En orange : Le contenu, le tout beau, l'unique. C'est ce qui s'affichera dans le message que tout le monde verra. Du coup, changez la class adm_mess par ce que vous voulez; c'est ce qui sera modifié par la suite dans le CSS.

Le CSS du cadre/message personnalisé/prédéfini s'applique ici-même. En reprenant le CSS du tutoriel, voici un simple exemple :

Code:

/* Bouton solvedbutt */
   
    .solvedbutt {
    margin: 20px;
    padding: 10px;
    background-color: rgba(300,50,50,.85);
    background-image: radial-gradient(rgba(255,255,255,.35),rgba(255,255,255,.15);
    font-size: 14px;
    color: #efefef;
    font-family: Arial;
    box-shadow: 4px 4px 0 0 #353535;
    }

    /* CSS du titre */

    .solvedbutt .titl {
    font-size: 18px;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px dashed #B60505; 
    color: #fff;
    }

    .solvedbutt a {
    color: white;
    font-weight: bold; }
    }

Voilou ! J'espère que c'est compréhensible

[Invité]

Cela marche très bien, merci beaucoup !