D'autres boutons d'avertissement

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu D'autres boutons d'avertissement

Message par Invité le Jeu 22 Déc 2016 - 13:33

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,


Dernière édition par Pompomdeterre le Ven 23 Déc 2016 - 0:27, édité 1 fois (Raison : Sujet résolu)
avatar

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: D'autres boutons d'avertissement

Message par ZYVHK le Jeu 22 Déc 2016 - 17:27

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. Wink
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: D'autres boutons d'avertissement

Message par Invité le Jeu 22 Déc 2016 - 17:36

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

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: D'autres boutons d'avertissement

Message par ZYVHK le Jeu 22 Déc 2016 - 21:04

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. Smile

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='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>

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 Neutral
avatar

ZYVHK
***

Messages : 132
Inscrit(e) le : 05/03/2016

http://www.arcadia-forum.com
ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: D'autres boutons d'avertissement

Message par Invité le Ven 23 Déc 2016 - 0:27

Cela marche très bien, merci beaucoup !
avatar

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum