Salut salut,
C'est encore moi,
Aujourd'hui je vous propose cette page :
http://www.creativejuiz.fr/jquery-generator.html
Vous pouvez aisément créer une page en utilisant les pages HTML de Forum-Actif.
Pour cela il vous faudra créer une page HTML reprenant la structure de base de votre forum, ne partez pas d'une page vierge (le but et de reprendre la bibliothèque jQuery déjà chargée par défaut sur votre forum).
Une fois que vous avez une page html sans rien, il y a deux phases principales à prendre en compte :
La création du formulaire HTML :
La mise en place de la zone qui recevra le code à copier/coller (HTML) :
La mise en place de quelques styles par défaut (CSS, dans votre panneau d'admin) à vous de les personnaliser :
Et enfin le Javascript pour le traitement "à la volée" des données renseignées :
Le code est commenté, pour le comprendre plus facilement je vous invite à le copier/coller dans un outil tel que Notepad++ pour bénéficier d'une coloration syntaxique.
En espérant qu'il vous soit utile.
N'hésitez pas si vous avez des questions.
Bises
C'est encore moi,
Aujourd'hui je vous propose cette page :
http://www.creativejuiz.fr/jquery-generator.html
Vous pouvez aisément créer une page en utilisant les pages HTML de Forum-Actif.
Pour cela il vous faudra créer une page HTML reprenant la structure de base de votre forum, ne partez pas d'une page vierge (le but et de reprendre la bibliothèque jQuery déjà chargée par défaut sur votre forum).
Une fois que vous avez une page html sans rien, il y a deux phases principales à prendre en compte :
La création du formulaire HTML :
- Code:
<form action="#" method="get" name="code_generator" id="code_generator">
<p><label for="pseudo" class="label_gen">Ton pseudo</label> <input type="text" name="pseudo" id="pseudo" /></p>
<p><label for="bio" class="label_gen">Ta biographie</label> <textarea name="bio" id="bio" cols="30" rows="6"></textarea></p>
<p><button id="generate">Générer le code</button></p>
</form>
La mise en place de la zone qui recevra le code à copier/coller (HTML) :
- Code:
<div id="generator_result">
<p>Copiez/collez le code pré-sélectionné suivant :</p>
<textarea id="the_code" cols="40" rows="10" readonly="readonly"></textarea>
</div>
La mise en place de quelques styles par défaut (CSS, dans votre panneau d'admin) à vous de les personnaliser :
- Code:
<style rel="stylesheet" type="text/javascript">
<!--
#code_generator, #generator_result {
width: 400px;
margin: 30px auto;
padding: 20px;
border: 1px solid #fff;
-moz-border-radius: 12px;
}
.label_gen {
display: inline-block;
width: 100px;
vertical-align: top;
}
#generator_result { text-align: center; display: none; }
-->
</style>
Et enfin le Javascript pour le traitement "à la volée" des données renseignées :
- Code:
<script type="text/javascript">
//<![C<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script> <!-- On importe la librairie JQuery -->
<script type="text/javascript">
$(document).ready(function(){
$("#generate").click(function(){
var pseudo = $("#pseudo").val(); //on récupère la valeur de pseudo
var bio = $("#bio").val(); //on récupère la valeur de bio
var the_code = "Mon pseudo est [b]" + pseudo + "[/b], voici ce que je peux raconter sur moi : \n\r[i]" + bio + "[/i]"; //on compose le BBcode à venir avec les éléments récupérés précédemment
$("#generator_result").fadeIn(400, function(){ //on fait apparaitre le résultat
$(this).find("textarea").text(the_code).select(); //on affiche le contenu et on le sélectionne dans la foulée
});
return false; //on annule le comportement par défaut du bouton de validation
});
});
</script>
Le code est commenté, pour le comprendre plus facilement je vous invite à le copier/coller dans un outil tel que Notepad++ pour bénéficier d'une coloration syntaxique.
En espérant qu'il vous soit utile.
N'hésitez pas si vous avez des questions.
Bises
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
