un de mes amis m'a fourni un script HTML/CSS/Javascript permettant aux utilisateurs d'écrire des SMS et Mails.
Ce qu'il me demande de réaliser est d'améliorer la fonctionnalité du click sur les différents span(Entreprise, Ville, Titre...). Par exemple, soit cliquer sur "Entreprise" , il s'insère dans la zone de saisie à gauche(ça c'est déjà fait), mais trouver un système plus simple et plus esthétique serait souhaitable, soit un système de drag & drop(objet).
D'autre part, il aimerait un système de focus sur la souris, si par exemple "Entreprise" et "Titre" sont déjà présents dans la zone, et que lui souhaite rajouter "Ville" entre les deux, cela puisse se faire(là jusqu'à présent, les boutons s'ajoutent côte à côte).
Et enfin si l'utilisateur souhaite supprimer un bouton, soit il double-clique dessus, soit il utilise le raccourci clavier suppr.
J'espère avoir expliqué comme il se doit mon problème!
Pour ceux qui auraient des idées, ce serait génial! Merci d'avance
Bonjour, je pense que si personne ne répond à ton sujet c'est car ta demande n'est pas assez spécifique en fait, peut être à tu déjà tester une amélioration de ton côté, peu-être voudrait tu un avis dessus, mais la à part te dire de rechercher sur google 'comment faire un drag and drop' je voit pas trop quoi dire de plus.
De mon côté, je n'ai pas vraiment testé d'amélioration car je suis un peu perdu, je ne vois pas vraiment comment améliorer les différentes fonctionnalités :/
Au niveau du drag & drop, j'ai déjà réalisé cette fonctionnalité, mais que je n'ai pas adapté à celui-ci. Pk? C'était pour voir les différents avis que des personnes auraient pu me conseiller de tester.
A vrai dire, c'est possible qu'il y ait trop d'informations comme tu le dis x) Mais j'ai surtout poster tout le code pour que vous puissiez comprendre le principe du template!
Edit: j'ai pu avancer un peu sur la modification, seulement ce que je n'arrive pas à réaliser, c le focus de la souris au moment de rajouter les différents tags("Entreprise", "Titre"...), en gros faire en sorte que la div soit personnalisable pour l'utilisateur. S'il souhaite ajouter le nom d'une entreprise en haut à gauche, et un titre en bas à droite, que ce soit possible.Quelqu'un aurait des idées la dessus svp?
Merci d'avance!
- Edité par Maestro974 18 décembre 2017 à 13:11:04
Merci à toi! J'ai modifié mon JS et ajouter 2 lignes de code à la ligne 21 et 28. Seulement est-ce que cette méthode suffit pour que l'utilisateur puisse ajouter où il veut les différents tags? J'ai testé et ça m'a pas l'air de fonctionner comme il faut :/
j'ai rajouté dans mon html un <input type="radio" à la ligne 88, et j'aimerais savoir comment je pourrais faire pour que si je clique sur le bouton Web, une zone de <textarea> apparaisse svp? c un genre de switch entre les 2 boutons pour afficher soit la div soit la textarea non? Il faut certainement utiliser un onchange pour réaliser ça, mais je vois pas comment :/
https://jsfiddle.net/58seewf4/2/
D'autre part, le focus je n'y arrive pas à avoir ce que je veux non plus
j'ai rajouté dans mon html un <input type="radio" à la ligne 88, et j'aimerais savoir comment je pourrais faire pour que si je clique sur le bouton Web, une zone de <textarea> apparaisse svp? c un genre de switch entre les 2 boutons pour afficher soit la div soit la textarea non? Il faut certainement utiliser un onchange pour réaliser ça, mais je vois pas comment :/
Est-ce que tu à essayer de faire quelque chose ? Un petit bout de code même s'il ne fonctionne pas ? Tu t'es un peu documenté ?
Voici un sujet qui obtient un résultat proche de celui que tu recherche comme ca tu n'à pas la solution toute faite mais en gros c'est quelque chose comme ca :
Ahah oui je sais, ça fait mal aux yeux mon code, je le reconnais
Comment à partir de ton code fourni, afficher dès le chargement de la page(en gros par défaut) un <textarea> sur le <input> Texte stp? Et ensuite jongler entre les 2 input afin d'afficher ce qui est souhaité?
Merci en tout cas pour ton aide!
- Edité par Maestro974 21 décembre 2017 à 13:44:07
<div id="choiceMail">
<input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('input_type_text','input_type_')" checked > Texte
<input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('input_type_web','input_type_')"> Web
<div id="input_type_text" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
Ceci est mon text area pour le format texte
</div>
<div id="input_type_web" style="display:none">
Ceci est mon text area pour le format Web
</div>
</div>
<script>
function refresh(displayedId,refreshedId){
$("div[id^='"+refreshedId+"']").hide();
$("#"+displayedId).show();
}
</script>
Tu peux faire quelque chose comme ca (si c'est bien ce que tu essaie de faire)
- Edité par CodecadeMe 21 décembre 2017 à 13:47:55
J'ai apporté les modifications en fonction de ton code, ce que moi je souhaitais avoir comme résultat, mais je sais pas pourquoi, ça ne fonctionne pas :/
J'ai fait exprès de mettre une div plus grande que l'autre pour voir si onchange fonctionnait bien mais apparemment non
- Edité par Maestro974 21 décembre 2017 à 14:14:16
Forcément, tu n'inclus pas la bibliothéque jquery (il suffit d'inspecter l'élément et de regarder les erreurs dans la console)
Essaie de plutôt poster ton code ici s'il te plaît, ca pourra aider d'autre personne qui aurait le même problème que toi.
Je remarque que tu ne fait pas beaucoup d'effort pour chercher par toi même, tu devrait d'abord essayer de comprendre ce que je t'envoie avant de vouloir t'empresser de le tester et de le modifier
De plus tu à modifier ca
<div id="input_type_text" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
Ceci est mon text area pour le format texte
</div>
<div id="input_type_web" style="display:none">
Ceci est mon text area pour le format Web
</div>
En le remplacant par ca
<div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
</div>
<div id="mailwebArea" style="display: none">
</div>
Mais tu n'à pas changer les arguments de la fonction onchange
<input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('mailArea','input_type_')" checked style="margin-left: 25px"> Texte
<input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('mailwebArea','input_type_')"> Web
<div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
a
</div>
<div id="mailwebArea" style="display: none">
b
</div>
Tu à choisit de renommer tes id mailArea et mailWebArea, d'accord dans ce cas soit tu doit changer ma fonction, soit tu doit changer les paramètres de celle-ci, dans ce cas les paramètres seront :
<input type= "radio" id="format_text" name="format_saisie" value="text" onchange="refresh('mailArea','mail')" checked style="margin-left: 25px"> Texte
<input type="radio" id="format_web" name="format_saisie" value="web" onchange="refresh('mailwebArea','mail')"> Web
<div id="mailArea" ><!--ajoute style="display:none" si tu souhaite que de base rien ne soit affiché-->
a
</div>
<div id="mailwebArea" style="display: none">
b
</div>
Sait tu seulement ce que veux dire ce code ?
$("div[id^='"+refreshedId+"']").hide();
Sinon pourquoi ne pas faire de recherches ? Je peux tout à fait comprendre que tu n'ai pas encore appris à utiliser la librairie jQuery mais rien ne t'empêche de te renseigner
La libraire Jquery n'est pas trop complexe à comprendre, j'imagine que lorsque tu auras bien consolidé tes bases en js tu t'y attaquera alors .
Jéjé974 a écrit:
$("div[id^='"+refreshedId+"']").hide();
Non pas exactement, hide() permet de cacher l'élément matché, certainement les div non?
Pour le moment tu doit simplement savoir que ce qui se trouve dans la fonction $() c'est un sélecteur jquery
(la fonction $() est un raccourcis pour dire jQuery(), c'est la même chose)
Donc la je vais lui dire : "sélectionne tous les éléments de type 'div' dont l'id commence par refreshId (la valeur du param refreshId) et une fois ceux-ci sélectionner, applique leurs l'attribut de style display:none (ce que fait la fonction hide())
- Edité par CodecadeMe 22 décembre 2017 à 11:28:20
- Edité par CodecadeMe 22 décembre 2017 à 16:27:22
Les erreurs sont les portes de la découverte.
Amélioration fonctionnalité champs d'un site
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.