Générateur de profil / fiche perso RPG

Rappel du premier message :

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 :

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

Personne ?

Personne du tout?

Bonsoir et merci pour le partage

Merci pour le partage !