1 résultat trouvé pour solvedbutt

D'autres boutons d'avertissement

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.

Tag solvedbutt sur Forum gratuit : Le forum des forums actifs Bouton14

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

Tag solvedbutt sur Forum gratuit : Le forum des forums actifs Java10

$(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