Créer un générateur de code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Créer un générateur de code

Message par Mr.Paste le Mer 21 Jan 2015 - 17:37

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour ma demande est toute simple et compliqué... Pour faire simple j'aimerais faire un générateur de ce style : http://aska.123.st/h10-generateur-de-pannel

Merci,

EDIT: Dans ce générateur il y aurait seulement des zone de texte, exemple une zone avec écrit "titre" et a coté un cadre avec a l'intérieur écrit le titre comme ça : [h1]TITRE[/h1]. Je ne sais pas si j'ai été compréhensible...


Dernière édition par Mr.Paste le Sam 24 Jan 2015 - 18:04, édité 1 fois

Mr.Paste
***

Messages : 154
Inscrit(e) le : 16/08/2014

Mr.Paste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Self le Mer 21 Jan 2015 - 20:01

Bonjour,

Pourrait-on avoir plus d'éléments ?
A quoi servirait ce générateur ?
Comment indiquerait-on qu'un titre doit être un titre ?
Exemple dans la page HTML fourni nous avons des champs texte et de type select pour générer le code suivant vos préférences.

cordialement Smile !

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Mr.Paste le Jeu 22 Jan 2015 - 9:02

Bonjour, alors il y aurait simplement des "cases" avec écrit un mot devant, exemple : "Titre: 'la case pour écrire'" Et ce que l'on écrit se retrouverait encadré par les balises [h1] et [/h1] dans une partie de la page, et on pourrait copier coller ce contenu.

Je pense pas que ça soit vraiment plus clair, je ferais un schéma d'explication dès que je pourrais ( plutôt fin de soirée )

Mr.Paste
***

Messages : 154
Inscrit(e) le : 16/08/2014

Mr.Paste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Mr.Paste le Ven 23 Jan 2015 - 17:10

UP Smile

Le schéma ( un peu... moche ) :


Mr.Paste
***

Messages : 154
Inscrit(e) le : 16/08/2014

Mr.Paste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Self le Ven 23 Jan 2015 - 17:33

Bonjour,

J'ai bien compris ce que vous vouliez et avec ce code vous en aurez un exemple 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{
            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>
      <div 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>
      </div>
      <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($){
         $('body').on('load', function(){ $('.input').val(''); });
         $('#title').on('keyup', function(){ $('#result').val('[h1]'+$(this).val()+'[/h1]\n'+$('#content').val()); });
         $('#content').on('keyup', function(){ $('#result').val('[h1]'+$('#title').val()+'[/h1]\n'+$(this).val()); });
      });
      </script>
   </body>
</html>

Moi ce que j'aimerais savoir, c'est le nom de chaque champ que vous voulez et ce qu'ils doivent générer ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Mr.Paste le Ven 23 Jan 2015 - 18:08

Juste me montrer la manière de continuer ce code, donc de mettre "description" etc... Et que je puisse le faire a l'infini Smile

Mr.Paste
***

Messages : 154
Inscrit(e) le : 16/08/2014

Mr.Paste a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Self le Sam 24 Jan 2015 - 12:35

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 .

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Créer un générateur de code

Message par Mr.Paste le Sam 24 Jan 2015 - 18:04

Merci, très grand merci *-*

Mr.Paste
***

Messages : 154
Inscrit(e) le : 16/08/2014

Mr.Paste a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum