Créer un générateur de code

par Mr.Paste 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...

par Self 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

!

par Mr.Paste 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 )

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

UP

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

par Self 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 ?

par Mr.Paste 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

par Self 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é :
- 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 Mr.Paste Sam 24 Jan 2015 - 18:04

Merci, très grand merci *-*

Créer un générateur de code