Menu déroulant javascript

**tazmania** · 24/03/2007, 12h36

Voila ma page html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
	<body> 
		<form id="for" method="post" action="submit">
			<titi oncontextmenu="Ajout(this)">
				Il vous suffit de cliquer pour ajouter un élément
<!--		          <input type="button" id="Ajouter" onclick="Ajout(this.parentNode)" value="Ajouter un élément à mon Docbook" />-->
			</book>
		</form>
	</body>

Et voici mon code JavaScript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
//Création d'une variable tableau, afin de déterminé les élements que peut insérer l'utilisateur selon l'endroit où il se situe, devra être remplacé par un menu
var tableau = new Array(5);
tableau["TITI"] = new Array(3);
tableau["TOTO"] = new Array(2);
tableau["TATA"] = new Array(1);
tableau["TONTON"] = new Array(3);
tableau["TITI"][0] = "tonton";
tableau["TITI"][1] = "toto";
tableau["TITI"][2] = "tata";
tableau["TITI"][3] = "tutu";
tableau["TONTON"][0] = "tonton";
tableau["TONTON"][1] = "toto";
tableau["TONTON"][2] = "tata";
tableau["TONTON"][3] = "tutu";
tableau["TOTO"][0] = "toto";
tableau["TOTO"][1] = "tata";
tableau["TOTO"][2] = "tutu";
tableau["TATA"][1] = "tata";
tableau["TATA"][0] = "tutu";
 
//Fonction qui va ajouter une liste déroulante
function Ajout(elt) {
	try {		
		/* Selon la balise renvoyée, je vais insérer une liste déroulante spécifique
sauf s'il y a déjà une liste déroulante, fonction qui devra être remplacer par un menu lors du click droit de la souris */	
		if (!document.getElementById("ajoutelement")) {
 
			// Ajout d'un saut de ligne
			var UnSautDeLigne = document.createElement("br");
			elt.appendChild(UnSautDeLigne);
			elt.appendChild(UnSautDeLigne);
 
			var elSelect = document.createElement("select");
 
			//Insertion de ma balise insert
			elt.appendChild(elSelect);
 
			//Attribut de ma liste déroulante
			elSelect.setAttribute("id", "ajoutelement");
			elSelect.setAttribute("onchange", "AddElement(this)");
 
			//Premeière option qui n'est pas selectionnable
			elSelect.options.add(new Option("Choisissez un élément à insérer"));	
 
			//Puis les autres 
			for (i=0; i<tableau[elt.nodeName].length; i++)
		    {
				new_option = new Option(tableau[elt.nodeName][i],tableau[elt.nodeName][i]);
		        elSelect.options.add(new_option);
		    }
		}
	} 
	catch (e) {
		//En cas d'erreur, un message d'excuse s'affiche
		alert("Problème " + e.message);
	}
}
 
//Fonction qui va ajouter l'élément choisi par l'utilisateur
function AddElement(selection) {
 
	//Récupération de l'endroit où l'on se situe
	var elSelect = document.getElementById("ajoutelement");	
 
	alert(elSelect.parentNode);
	var elForm = elSelect.parentNode;
 
	// Ajout d'un saut de ligne
	var UnSautDeLigne = document.createElement("br");
	elForm.appendChild(UnSautDeLigne);
 
	//Récupération de la taille de ma liste déroulante
	nb_select = selection.parentNode.getElementsByTagName("select").length;
 
	//Récupération de l'index de l'élément sélectionné par l'utilisateur
	if ( selection == selection.parentNode.getElementsByTagName("select")[0] ) {
		element_select = selection;
 
		//Je récupère le nom de l'élément que l'utilisateur souhaite insérer
		selection = selection.options[selection.selectedIndex].value; 
 
		//Insertion de l'élément choisi
		if (selection == "toto") {
			//Insertion d'une balise toto 
			var toto = document.createElement("toto");
			toto.setAttribute("oncontextmenu","Ajout(this)");
			elForm.appendChild(toto);
 
		} else if (selection == "tata") {
 
			//Insertion d'un saut à la ligne
			var BR = document.createElement("br");
			elForm.appendChild(BR);
 
			var tata = document.createElement("tata");
			tata.setAttribute("oncontextmenu","Ajout(this)");
			elForm.appendChild(tata);
 
			//Insertion d'une zone de texte
			var UnTextarea = document.createElement("textarea");
			UnTextarea.setAttribute("id", "tata");
			UnTextarea.setAttribute("cols","50");
			UnTextarea.setAttribute("rows","3");
			UnTextarea.setAttribute("onBlur", "MiseEnForme(this.value,'tata')");
			UnTextarea.focus();
			tata.appendChild(UnTextarea);
 
		} else if(selection == "tonton") {
 
			var tonton = document.createElement("tonton");
			tonton.setAttribute("oncontextmenu","Ajout(this)");
			elForm.appendChild(tonton);
 
		} else {
 
			var tutu = document.createElement("tutu");
			elForm.appendChild(tutu);
 
			//Insertion d'une zone de texte
			var UnTextarea = document.createElement("textarea");
			UnTextarea.setAttribute("id", "tutu");
			UnTextarea.setAttribute("cols","50");
			UnTextarea.setAttribute("rows","3");
			UnTextarea.setAttribute("onBlur", "MiseEnForme(this.value,'tutu')");
			tutu.appendChild(UnTextarea);
 
		}
 
		//Suppresion de ma liste déroulante
		var elSelect = document.getElementById("ajoutelement");
		elForm.removeChild(elSelect);
 
	}
 
}
 
//Fonction qui va supprimer le textarea pour mettre directement du texte mise en forme grâce à mon code CSS
function MiseEnForme(texte,t) {
 
	var elt = document.getElementById(t);
	var par = elt.parentNode;
 
	var p = document.createTextNode(texte);
	par.replaceChild (p, elt);
 
}

Je sais pas si vous aller voir clair la dedans.
Mais le concept est pas trop compliquer.
Je rajoute des balises au fur et à mesure, balise choisie par l'utilisateur.
Certaines sont vides et d'autres peuvent contenir du texte

**magnus2005** · 24/03/2007, 17h09

C etait /titi à la place de /book ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<body> 
		<form id="for" method="post" action="submit">
			<titi oncontextmenu="Ajout(this)">
				Il vous suffit de cliquer pour ajouter un élément
<!--		          <input type="button" id="Ajouter" onclick="Ajout(this.parentNode)" value="Ajouter un élément à mon Docbook" />-->
			<!--</book>-->
</titi>
		</form>
	</body>

Questions generales pour tous :

Quelles avantages à faire à faire ses balises perso ?
Quelles problemes à faire à faire ses balises perso ?

**tazmania** · 24/03/2007, 17h24

Oui en effet c'était /titi à la place de la balise /book

Avantage :
L'utilisateur crée sa page lui même. Il crée ces différentes parties. Au final, il gère tous tout seul.
Il ne possède pas de limite du nombre de balise fixé.

Inconvénient :
Plein, j'arrive pas à m''en sortir

Il faudrait que je sache ou l'utilisateur clique pour lui proposer les différentes balises qu'il peut rajouter. Les rajouter au bon endroit. Exemple s'il click entre deux balises car il a oublié une balise entre, il faut que je la place au bon endroit.
Il doit pouvoir modifier une balise (son contenu) ou bien la supprimer.

Menu déroulant javascript

JavaScript

Discussions similaires

Partager

Partager