Ecriture plus simplifiée [Résolu]

krislec · 05/12/2010, 14h30

histoire d'apprendre à manipuler le code, j'aimerai savoir s'il y a pas un mayoen plus simple d'écrire le code suivant, du style avec une boucle for, mais je n'y arrive pas !

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
$(document).ready(function(){
        $("#Magicmenu").show();
        $("#Magicbox").css('position', 'fixed');
        $("#Magic1").hide();    // Ordonnances
        $("#Magic2").hide();    // Certificats
        $("#Magic3").hide();    // Administratifs
        // for (i=1; i<4; i++) {
            $('#Magicmenu .magic1').click(function () {
                if ($('#Magic1').css("display") == "none") {
                    $(this).css({background: "#000", opacity: 0.9})
                    $('#Magicmenu .magic2').css({background: "#333", opacity: 1});
                    $("#Magic2").hide();
                    $('#Magicmenu .magic3').css({background: "#333", opacity: 1});
                    $("#Magic3").hide();
                    
                    $('#Magic1').slideDown("fast");
                } else {
                    $(this).css({background: "#333", opacity: 1})
                    $('#Magic1').slideUp("fast");
                }
                return false;
            });
            $('#Magicmenu .magic2').click(function () {
                if ($('#Magic2').css("display") == "none") {
                    $(this).css({background: "#000", opacity: 0.9})
                    $('#Magicmenu .magic1').css({background: "#333", opacity: 1});
                    $("#Magic1").hide();
                    $('#Magicmenu .magic3').css({background: "#333", opacity: 1});
                    $("#Magic3").hide();
                    $('#Magic2').slideDown("fast");
                } else {
                    $(this).css({background: "#333", opacity: 1})
                    $('#Magic2').slideUp("fast");
                }
                return false;
            });
            $('#Magicmenu .magic3').click(function () {
                if ($('#Magic3').css("display") == "none") {
                    $(this).css({background: "#000", opacity: 0.9})
                    $('#Magicmenu .magic1').css({background: "#333", opacity: 1});
                    $("#Magic1").hide();
                    $('#Magicmenu .magic2').css({background: "#333", opacity: 1});
                    $("#Magic2").hide();
                    $('#Magic3').slideDown("fast");
                } else {
                    $(this).css({background: "#333", opacity: 1})
                    $('#Magic3').slideUp("fast");
                }
                return false;
            });
      //  }
        /* Opacité de 80% sur le contenu via javascript car par hack css ça fait buguer ie6 */
        $("#Magiccontent").fadeTo("fast", 0.9);

});

danielhagnoul · 05/12/2010, 23h12

Bonsoir

A priori, il doit être possible de simplifier, mais sans le code HTML il n'est pas possible de travailler efficacement.

krislec · 06/12/2010, 20h06

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
function AfficherMenuMedical($idmed,$idpat,$idcons) {
        $contenu = "";
        $contenu .= "<div id=\"Magicbox\">";
 
 
        // MENU
        $contenu .= "   <div id=\"Magicmenu\"><ul>";
        $contenu .= "<li><image src=\"/images/icon_printer.png\" style=\"position:absolute;bottom: -10px;left:3px;width:36px;height:36px;z-index:600\"></li>\n";
 
            // Ordonnances
        $contenu .= "       <li><a href=\"#\" class=\"magic1\">Ordonnances</a></li>\n";
            // Certificats
        $contenu .= "       <li><a href=\"#\" class=\"magic2\">Certificats</a></li>\n";
            // Administratifs - Cerfa
        $contenu .= "       <li><a href=\"#\" class=\"magic3\">Admistratifs</a></li>\n";
        $contenu .= "   </ul></div>";
 
        // CONTENU
        $contenu .= "   <div id=\"Magiccontent\">\n";
 
            // Ordonnances
        $contenu .= "   <div id=\"Magic1\"><ul>\n";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/ordo/med/\">Médicaments</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/ordo/bio/\">Biologie</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/ordo/img/\">Ex. Compl.</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/ordo/paramed/\">ParaMed</a></li>";
        $contenu .= "   </ul></div>";
            // Certificats
        $contenu .= "   <div id=\"Magic2\"><ul>\n";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/ordo/certif/cmcm/\">Choix mutiples</a></li>\n";
       ...
        $contenu .= "   </ul></div>";
            // Administratifs
        $contenu .= "   <div id=\"Magic3\"><ul>\n";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/cerfa/S649/new/\" title=\"AT/MP Soins Post-Consolidation\">S649</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/cerfa/S3110/new/\" title=\"Feuille de Soin\">S3110</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/cerfa/S3116f/new/\" title=\"Déclaration Arrêt Maladie\">S3116f</a></li>";
        $contenu .= "       <li><a href=\"https://".$_SERVER['SERVER_NAME']."/consultations/".$idcons."/cerfa/S3138c/new/\" title=\"Bon de Transport\">S3138c</a></li>";
        ...
 
        $contenu .= "   </ul>\n";
        $contenu .= "   <div id=\"Magic3_icon\" class=\"hidden\"></div>";
        $contenu .= "   </div>";
 
        $contenu .= "</div>\n";
 
        $contenu .= "</div>\n";
 
    return ($contenu);
}

danielhagnoul · 07/12/2010, 23h51

Bonsoir

Ce n'est pas ce que j'appelle du HTML ! Il y a une erreur :

Code :

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

1
2
// le tag HTML est  <img /> !
<li><image src=\"/images/icon_printer.png\" style=\"position:absolute;bottom: -10px;left:3px;width:36px;height:36px;z-index:600\"></li>\n";

Voici un exemple de simplification :

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
 
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
<!--
// le tag HTML est  <img /> !
<li><image src=\"/images/icon_printer.png\" style=\"position:absolute;bottom: -10px;left:3px;width:36px;height:36px;z-index:600\"></li>\n";
-->
 
<div id="Magicbox">
	<div id="Magicmenu">
		<ul>
			<li>
				<img src="" />
			</li>
			<li>
				<a href="#" class="magic1">Ordonnances</a>
			</li>
			<li>
				<a href="#" class="magic2">Certificats</a>
			</li>
			<li>
				<a href="#" class="magic3">Admistratifs</a>
			</li>
		</ul>
	</div>
	<div id="Magiccontent">
		<div id="Magic1">
			<ul>
				<li>
					<a href="#">Médicaments</a>
				</li>
				<li>
					<a href="#">Biologie</a>
				</li>
				<li>
					<a href="#">Ex. Compl.</a>
				</li>
				<li>
					<a href="#">ParaMed</a>
				</li>
			</ul>
		</div>
		<div id="Magic2">
			<ul>
				<li>
					<a href="#">Choix mutiples</a>
				</li>
			</ul>
		</div>
		<div id="Magic3">
			<ul>
				<li>
					<a href="#" title="AT/MP Soins Post-Consolidation">S649</a>
				</li>
				<li>
					<a href="#" title="Feuille de Soin">S3110</a>
				</li>
				<li>
					<a href="#" title="Déclaration Arrêt Maladie">S3116f</a>
				</li>
				<li>
					<a href="#" title="Bon de Transport">S3138c</a>
				</li>
			</ul>
			<div id="Magic3_icon" class="hidden"></div>
		</div>
	</div>
</div>
 
	</div> 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script>
		$(function(){
 
$("#Magicmenu").show();
$("#Magicbox").css('position', 'fixed');
$("#Magic1").hide();
$("#Magic2").hide();
$("#Magic3").hide();
$("#Magiccontent").fadeTo("fast", 0.9);
 
// Voir http://api.jquery.com/attribute-starts-with-selector/
 
$("#Magicmenu").find("a[class^='magic']").click(function(){
	var n = parseInt(this.className.slice(5), 10),
		a = 0,
		b = 0;
 
	switch(n){
		case 1:
			a = 2;
			b = 3;
			break;
		case 2:
			a = 1;
			b = 3;
			break;
		case 3:
			a = 1;
			b = 2;
			break;
		default:
			throw "Numéro de la classe magicX hors limites !";
			break;
	};
 
	if ($("#Magic"+n).css("display") == "none") {
		$(this).css({background: "#000", opacity: 0.9});
		$("#Magicmenu").find("a.magic"+a).css({background: "#333", opacity: 1});
		$("#Magic"+a).hide();
		$("#Magicmenu").find("a.magic"+b).css({background: "#333", opacity: 1});
		$("#Magic"+b).hide();
		$("#Magic"+n).slideDown("fast");
	} else {
		$(this).css({background: "#333", opacity: 1});
		$("#Magic"+n).slideUp("fast");
	}
 
	return false;
});
		});
 	</script>
</body>  
</html>

krislec · 08/12/2010, 00h08

Mais que c'est beau !!!!
Je viens de comprendre (et d'apprendre) que l'on peut faire un switch en javascript et donc avec jquery !!!

Pour ce qui est du html, vous l'aurez compris, l'intégralité de mes pages sont générées automatiquement en php... je sais, c'est pas forcément une bonne chose mais je n'ai pas coder ("proprement") autrement....

La balise html est <img />, je croyais qu'il s'agissait de l'ancienne écriture obsolète...

Encore une fois, un grand merci.

(PS: inutile de vous dire que je vais étudier soigneusement ce bout de code ... pour peut-être un jour faire aussi propre.)

SpaceFrog · 08/12/2010, 08h28

peut on factoriser ?

Code :

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

$("#Magic1, #Magic2, #Magic3").hide();

danielhagnoul · 08/12/2010, 18h02

Bonsoir

Voir http://api.jquery.com/multiple-selector/

05/12/2010, 23h12	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir A priori, il doit être possible de simplifier, mais sans le code HTML il n'est pas possible de travailler efficacement. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

08/12/2010, 18h02	#7
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Voir http://api.jquery.com/multiple-selector/ __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

08/12/2010, 00h08	#5
krislec Futur Membre du Club Inscription : octobre 2006 Messages : 107 Détails du profil Informations forums : Inscription : octobre 2006 Messages : 107 Points : 17 Points : 17	Mais que c'est beau !!!! Je viens de comprendre (et d'apprendre) que l'on peut faire un switch en javascript et donc avec jquery !!! Pour ce qui est du html, vous l'aurez compris, l'intégralité de mes pages sont générées automatiquement en php... je sais, c'est pas forcément une bonne chose mais je n'ai pas coder ("proprement") autrement.... La balise html est <img />, je croyais qu'il s'agissait de l'ancienne écriture obsolète... Encore une fois, un grand merci. (PS: inutile de vous dire que je vais étudier soigneusement ce bout de code ... pour peut-être un jour faire aussi propre.)
	00

08/12/2010, 08h28	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 995 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 995 Points : 45 068 Points : 45 068	peut on factoriser ? Code : Sélectionner tout - Visualiser dans une fenêtre à part $("#Magic1, #Magic2, #Magic3").hide(); __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email