La date/heure actuelle est Ven 29 Mar - 9:19

1 résultat trouvé pour my_id

Créer un générateur de code

Bonjour,

J'ai donc choisi un code un peu plus simple Wink .
Code:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>générateur de ...</title>

      <style>
         header{ font-size: 1.9em; text-align: center; font-variant: small-caps; }
         div, form{
            width: 48%;
            margin-right: 1%;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
         }
         .input{ border-radius: 5px; border-style: solid;}
      </style>
   </head>
   <body>
      <header>Bienvenue sur le générateur de ...</header>
      <form action="#" class="gen">
         <label>Titre<br><input class="input" type="text" name="title" id="title" size="45"><br></label>
         <label>Contenu<br><textarea class="input" name="content" id="content" cols="80" rows="47"></textarea></label>
      </form>
      <div class="result">
         <label>Résultat<br><textarea class="input" name="result" id="result" cols="95" rows="50" readonly></textarea></label>
      </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
      jQuery(function($){
         $('.input').on({
            keyup: function(){
               var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();
               $('#result').val(r);
            },
            change: function(){
               var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();
               $('#result').val(r);
            }
         });
      });
      </script>

   </body>
</html>




Dans le code vous aurez deux choses à faire pour ajouter un champ :
  • Créer le champ en HTML

    Avec pour code quelque chose comme :
    Code:
    <label>Nom de mon champ<br><input class="input" type="mon_type" name="my_name" id="my_id" size="45"><br></label>


    La démarche après est simple :
    • On remplace "Nom de mon champ" par le nom qu'on veut donner au champ.
    • La class "input" doit rester la même peu importe le type du champ.
    • Le type peut être changé :
        Par défaut le type est "text" mais il peut être "password" ce qui serait pas très utile étant donné qu'on retranscrit les valeurs des champs en claire dans un textarea à côté.
        Il peut être aussi de type "radio"* (case à choix unique), "checkbox"* (case à choix multiples).
        *L'attribut name doit être le même pour tout les choix d'une même question.

    • Le name vous le choisissez suivant votre envie.
    • L'id vous le choisissez également suivant votre envie, il nous servira dans la partie Javascript.
    • Size correspond à la largeur du champ (pour les champ de type text).

    Note : les champs peuvent être aussi des <textarea></textarea> et <select>...</select> l'important étant qu'ils aient également la class "input".

  • Modifier la variable Javascript

    La variable r réunie ici la valeur de nos deux champs dont celle du titre entre les balises BBcode "h1" :
    Code:
    var r = '[h1]'+$('#title').val()+'[/h1]\n'+$('#content').val();


    Pour récupérer la valeur d'un champ on écrit (en remplaçant seulement "#my_id" par l'id du champ que l'on veut récupérer) :
    Code:
    $('#my_id').val()


    les + sont la pour faire le lien entre une chaine de caractères entourée par les apostrophes et le code Javascript récupérant nos valeurs.
    \n placé dans une chaine de caractères créer un passage de ligne.
    Pour finir le ; doit rester à la fin de la variable.


Si vous ne comprenez pas quelque chose ou que vous planchez sur le code n'hésitez pas Wink .
par Self
le Sam 24 Jan - 11:35
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Créer un générateur de code
Réponses: 7
Vues: 1740

Revenir en haut

Sauter vers: