Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 201 | Rev 208 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 201 Rev 203
1 
<h1>Fiche</h1>
 1 
<h1>Fiche</h1>
2 
<?php print_r($_GET); ?>
 - 
 
3 
 
 - 
 
4 
<style>
 2 
<style>
5 
	#zone_contenu_fiche {
 3 
	#zone_contenu_fiche {
6 
		border:solid 1px red;
 4 
		border:solid 1px #DDD;
- 
 
 5 
		border-width:0px 1px 1px 1px;
7 
		width:100%;
 6 
		width:100%;
8 
		min-height:400px;
 7 
		min-height:400px;
- 
 
 8 
		clear:left;
- 
 
 9
9 
	}
 10 
	}
10
11
11 
	.module {margin: 0 1em 1em 0;}
 12 
	.module {margin: 0 1em 1em 0;}
12 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
 13 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
13 
	.module .titre .ui-icon { float: right; }
 14 
	.module .titre .ui-icon { float: right; }
14 
	.module .contenu { padding: 0.4em; }
 15 
	.module .contenu { padding: 0.4em; }
15
16
16 
	.colonne {float:left; padding-bottom:100px; width:30%}
 17 
	.colonne {float:left; padding-bottom:100px; width:30%}
17
18
18 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
 19 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
19 
	.ui-sortable-placeholder * { visibility: hidden; }
 20 
	.ui-sortable-placeholder * { visibility: hidden; }
20
21
21 
	#zone_onglets ul li {list-style:none}
 22 
	#zone_onglets ul li {list-style:none}
22 
	.lienToggle {cursor:pointer}
 23 
	.lienToggle {cursor:pointer}
23
24
24
25
25 
	#dialog label, #dialog input { display:block; }
 26 
	#dialog label, #dialog input { display:block; }
26 
	#dialog label { margin-top: 0.5em; }
 27 
	#dialog label { margin-top: 0.5em; }
27 
	#dialog input, #dialog textarea { width: 95%; }
 28 
	#dialog input, #dialog textarea { width: 95%; }
- 
 
 29 
	#zone_onglets { margin-top: 1em; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
28 
	#zone_onglets { margin-top: 1em; }
 30 
	#zone_onglets li {float:left}
29 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
 31 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
30 
	#add_tab { cursor: pointer; }
 32 
	#add_tab { cursor: pointer; }
31 
</style>
 33 
</style>
32 
 
 34 
 
- 
 
 35 
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
- 
 
 36 
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
- 
 
 37 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li>
- 
 
 38 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li>
- 
 
 39 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li>
- 
 
 40 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
- 
 
 41 
	</ul>
- 
 
 42 
</div>
33 
<div id="zone_onglets"><ul></ul></div>
 43 
 
34 
<div id="zone_contenu_fiche">
 44 
<div id="zone_contenu_fiche">
- 
 
 45 
	<div class="colonne">
- 
 
 46 
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- 
 
 47 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
- 
 
 48 
			<span id="contenu-0" class="contenu">contenu-0</span>
- 
 
 49 
		</div>
- 
 
 50
- 
 
 51 
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- 
 
 52 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
- 
 
 53 
			<span id="contenu-0" class="contenu">contenu-0</span>
- 
 
 54 
		</div>
- 
 
 55
- 
 
 56 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
- 
 
 57 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
- 
 
 58 
			<span id="contenu-0" class="contenu">contenu-0</span>
- 
 
 59 
		</div>
- 
 
 60
- 
 
 61
35 
	<div class="colonne"></div>
 62 
	</div>
36 
	<div class="colonne"></div>
 63 
	<div class="colonne"></div>
37 
	<div class="colonne"></div>
 64 
	<div class="colonne"></div>
38
65
39 
	<br style="clear:left" />
66 
	<br style="clear:left" />
40 
</div>
 67 
</div>
41 
 
 68 
 
42 
<script type="text/Javascript">
 69 
<script type="text/Javascript">
43 
	var modules = Array();
 70 
	var modules = Array();
44
71
45 
	/** Classe Module
 72 
	/** Classe Module
46 
	* Définit un module de type portlet
 73 
	* Définit un module de type portlet
47 
	**/
 74 
	**/
48 
	function Module(id, titre, htmlResume, statique) {
 75 
	function Module(id, module, onglet, statique) {
49
76
50 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
 77 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
51 
		this.id = id;
 78 
		this.id = id;
52 
		this.titre = titre;
 79 
		this.titre;
53 
		this.htmlResume = htmlResume;
 80 
		this.htmlResume;
54 
		this.statique = statique;
 81 
		this.statique = statique;
55
82
56 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
83 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
57 
		this.portlet;
 84 
		this.portlet = module;
58 
		this.onglet;
 85 
		this.onglet;
59
86
60 
		// creerPortlet
87 
		// creerPortlet
61 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
 88 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
62 
		this.creerPortlet = function() {
 89 
		this.creerPortlet = function() {
63 
			var objet = this;
 90 
			var objet = this;
64
- 
 
65 
			var module = document.createElement('div');
 - 
 
66 
			module.id = 'module-' + this.id;
 - 
 
67 
			module.className = 'module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all';
 - 
 
68
91
69 
			var titre = document.createElement('h3');
 92 
			var titre = $(module).children('.titre');
70 
			titre.className = 'titre ui-widget-header ui-corner-all';
 93 
			titre.className = 'titre ui-widget-header ui-corner-all';
71 
			titre.id = 'titre-' + this.id;
 94 
			titre.id = 'titre-' + this.id;
72
95
73 
			var contenu = document.createElement('span');
 96 
			var contenu = $(module).children('.contenu');
74 
			contenu.id = 'contenu-' + this.id;
 97 
			contenu.id = 'contenu-' + this.id;
75 
			contenu.className ='contenu';
 - 
 
76 
			$(titre).html(this.titre);
 - 
 
77 
 
 - 
 
78 
			$(contenu).html(this.htmlResume);
 98 
			contenu.className ='contenu';
79
99
80 
			var lienToggle = document.createElement('span');
 100 
			var lienToggle = document.createElement('span');
81 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
 101 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
- 
 
 102 
			$(titre).append(lienToggle);
82 
			$(lienToggle).click(function() {
 103 
			$(lienToggle).click(function() {
83 
				$(contenu).toggle();
 104 
				$(contenu).toggle();
84 
				//alert($(document).children(contenu))
 - 
 
- 
 
 105
85 
				$(objet.onglet).toggle()
 106 
				$(objet.onglet).toggle()
86 
			});
 107 
			});
87
- 
 
88 
			titre.appendChild(lienToggle);
 - 
 
89 
			module.appendChild(titre);
 - 
 
90 
			module.appendChild(contenu);
- 
 
91
108
92 
			this.portlet = module;
 109 
			this.portlet = module;
93 
			return module;
110 
			return module;
94 
		}
111 
		}
95
112
96 
		// creerOnglet
 113 
		// creerOnglet
97 
		// Créer l'objet Onglet HTML
 114 
		// Créer l'objet Onglet HTML
98 
		this.creerOnglet = function() {
 115 
		this.creerOnglet = function() {
99 
			var objet = this;
 116 
			var objet = this;
100
- 
 
101 
			var li = document.createElement('li');
 117
102 
			var a = document.createElement('a');
 - 
 
103 
			a.href = '#module-' + this.id;
 - 
 
104 
			$(a).html(this.titre);
 - 
 
105 
			li.appendChild(a);
 118 
			var a = $(onglet).find("a");
106
119
107 
			// Gestion du clic sur le lien
120 
			// Gestion du clic sur le lien
108 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
121 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
109 
			// déplacer vers la page du module
 122 
			// déplacer vers la page du module
110 
			$(a).click(function() {
 123 
			$(a).click(function() {
111 
				// TODO : Changer l'url par celle du module.
 124 
				// TODO : Changer l'url par celle du module.
112 
				//$(location).attr('href',"http://www.google.fr");
 125 
				//$(location).attr('href',"http://www.google.fr");
113 
			});
 126 
			});
114
127
115 
			if (!statique) {
 128 
			if (!statique) {
116 
				var span = document.createElement('span');
 129 
				var span = document.createElement('span');
117 
				span.className = "ui-icon ui-icon-close";
 130 
				span.className = "ui-icon ui-icon-close";
118
131
119 
				// Gestion de la fermeture de l'onglet
 132 
				// Gestion de la fermeture de l'onglet
120 
				$(span).live( "click", function() {
 133 
				$(span).live( "click", function() {
121 
					$(span).parent().toggle();
 134 
					$(span).parent().toggle();
122 
					$(objet.portlet).find(".contenu").toggle(false);
 135 
					$(objet.portlet).find(".contenu").toggle(false);
123 
				});
 136 
				});
124
137
125 
				li.appendChild(span);
 138 
				$(onglet).append(span);
126 
			}
 139 
			}
127
- 
 
128 
			this.onglet = li;
 140
129 
			return li;
 141 
			this.onglet = onglet;
130 
		}
 142 
		}
131
143
132 
		// Initialisation de l'objet
 144 
		// Initialisation de l'objet
133 
		this.creerPortlet();
 145 
		this.creerPortlet();
134 
		this.creerOnglet();
 146 
		this.creerOnglet();
135
147
136 
		// Accesseurs de la classe
 148 
		// Accesseurs de la classe
137 
		this.getOnglet = function() {
 149 
		this.getOnglet = function() {
138 
			return this.onglet;
150 
			return this.onglet;
139 
		}
 151 
		}
140
152
141 
		this.getPortlet = function() {
 153 
		this.getPortlet = function() {
142
154
143 
			return this.portlet;
 155 
			return this.portlet;
144 
		}
 156 
		}
145 
	}
 157 
	}
- 
 
 158
146
159 
	//Initialisation
- 
 
 160 
	$(document).ready(function() {
147 
	$(document).ready(function() {
 - 
 
148
161 
		i = 1;
149 
			i = 0;
 162
150 
			var module = new Module(i, "Resume-" + i, "contenu-" + i, true);
 - 
 
151 
			modules[i] = module;
 - 
 
152 
			$("#zone_contenu_fiche>div:first-child").append(module.getPortlet());
 - 
 
153 
			$("#zone_onglets>ul").append(module.getOnglet());
 - 
 
154 
			i++;
 - 
 
155
- 
 
156 
			var module2 = new Module(i, "Resume-" + i, "contenu-" + i);
 - 
 
157 
			modules[i] = module;
 - 
 
158 
			$("#zone_contenu_fiche>div:first-child").append(module2.getPortlet());
 163 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
- 
 
 164 
		$(".module").each(function () {
- 
 
 165 
			i++;
159 
			$("#zone_onglets>ul").append(module2.getOnglet());
 - 
 
160 
			i++;
 - 
 
161
- 
 
162 
			var module3 = new Module(i, "Resume-" + i, "contenu-" + i);
 - 
 
163 
			modules[i] = module;
 166 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
164 
			$("#zone_contenu_fiche>div:first-child").append(module3.getPortlet());
 167 
			var module = new Module(i, this, $(identifiantOnglet));
165 
			$("#zone_onglets>ul").append(module3.getOnglet());
 168
166 
			i++;
 169 
		});
167
170
168 
		$( ".colonne" ).sortable({
 171 
		$( ".colonne" ).sortable({
169 
			connectWith: ".colonne"
 172 
			connectWith: ".colonne"
170 
		});
 173 
		});
171 
 
 174 
 
172 
		$( ".colonne" ).disableSelection();
 175 
		$( ".colonne" ).disableSelection();
173 
		$('#zone_onglets').tabs();
 176 
		$('#zone_onglets').tabs();
174
- 
 
175 
	});
 177 
	});
176 
</script>
 178 
</script>