AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Générateur de profil / fiche perso RPG

    Partagez
    Riku Asakura
    MasculinAge : 29Messages : 5736

    le Sam 29 Jan 2011 - 20:15

    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">
    //<![CDATA[
       $(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




    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Naruhiko
    MasculinAge : 18Messages : 99

    le Sam 6 Avr 2013 - 13:40

    Personne ? Sad



    la-loca
    FémininAge : 24Messages : 86

    le Dim 21 Avr 2013 - 14:23

    :up:
    Personne du tout?



    miss69
    FémininAge : 33Messages : 40

    le Dim 6 Mar 2016 - 2:58

    Bonsoir et merci pour le partage
    En ligne
    Kelalin
    FémininAge : 24Messages : 1403

    le Dim 6 Mar 2016 - 16:04

    Merci pour le partage !
    Contenu sponsorisé

    Aujourd'hui à 22:42


      La date/heure actuelle est Mar 6 Déc 2016 - 22:42