Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 214 | Rev 221 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 214 Rev 219
Line 1... Line -...
1
<h1>Fiche</h1>
-
 
2
<style>
1
<style>
3
	#zone_contenu_fiche {
2
	#zone_contenu_fiche {
4
		border:solid 1px #DDD;
3
		border:solid 1px #DDD;
5
		border-width:0px 1px 1px 1px;
4
		border-width:0px 1px 1px 1px;
6
		width:100%;
5
		width:100%;
Line 61... Line 60...
61
		z-index:2000;
60
		z-index:2000;
62
		background-color: white;
61
		background-color: white;
63
	}
62
	}
64
</style>
63
</style>
Line -... Line 64...
-
 
64
 
65
 
65
	<h1>Fiche</h1>
66
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
66
	<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
67
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
67
		<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
68
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a class="lien-onglet lien-statique" href="#fiche">Accueil</a></li>
68
			<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a class="lien-onglet lien-statique" href="#fiche">Accueil</a></li>
69
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Illustrations</a></li>
69
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Illustrations</a></li>
70
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Description</a></li>
70
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Description</a></li>
71
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Classification</a></li>
71
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Classification</a></li>
72
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Bibliographie</a></li>
72
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Bibliographie</a></li>
73
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Répartition</a></li>
73
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Répartition</a></li>
74
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Ethnobotanique</a></li>
74
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Ethnobotanique</a></li>
75
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Statut de protection</a></li>
75
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Statut de protection</a></li>
76
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Nomenclature</a></li>
76
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Nomenclature</a></li>
77
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Phytosociologie</a></li>
77
			<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Phytosociologie</a></li>
78
		<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a class="lien-statique" href="#fiche">+</a></li>
78
			<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a class="lien-statique" href="#fiche">+</a></li>
79
	</ul>
79
		</ul>
80
	<span id="conteneurMenuOnglets"></span>
-
 
81
</div>
-
 
82
 
-
 
83
<div id="zone_contenu_fiche">
-
 
84
	<div class="colonne">
-
 
85
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
86
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
-
 
87
			<span id="contenu-0" class="contenu">
-
 
88
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
89
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
 
90
			</span>
-
 
91
		</div>	
-
 
92
		<div id="description" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
93
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
-
 
94
			<span id="contenu-0" class="contenu">
-
 
95
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
96
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
 
97
			</span>
-
 
98
		</div>	
-
 
99
		<div id="classification" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
100
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
-
 
101
			<span id="contenu-0" class="contenu">
-
 
102
									Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
103
						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
-
 
104
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
-
 
105
						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-
 
106
			</span>
-
 
107
		</div>	
80
		<span id="conteneurMenuOnglets"></span>
-
 
81
	</div>
-
 
82
	
108
	</div>
83
	<div id="zone_contenu_fiche">
109
	<div class="colonne">	
84
		<div class="colonne">
110
		<div id="bibliographie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
85
			<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
111
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
86
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
112
			<span id="contenu-0" class="contenu">
-
 
113
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
-
 
114
			Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
87
				<span id="contenu-0" class="contenu">
115
			Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
88
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
116
			Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
89
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
117
			</span>
90
				</span>
118
		</div>	
91
			</div>	
119
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
92
			<div id="description" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
120
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
93
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
121
			<span id="contenu-0" class="contenu">
94
				<span id="contenu-0" class="contenu">
122
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
95
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
123
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
96
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
124
			</span>
97
				</span>
125
		</div>	
98
			</div>	
126
		<div id="ethnobotanique" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
99
			<div id="classification" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
127
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
100
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
128
			<span id="contenu-0" class="contenu">
101
				<span id="contenu-0" class="contenu">
129
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
102
										Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
103
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
-
 
104
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
130
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
105
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-
 
106
				</span>
131
			</span>
107
			</div>	
132
		</div>
-
 
133
	</div>
108
		</div>
134
	<div class="colonne">
109
		<div class="colonne">	
135
		<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
110
			<div id="bibliographie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
136
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-7">Statut de protection<span class="lienToggle"></span></h3>
111
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
137
			<span id="contenu-0" class="contenu">
112
				<span id="contenu-0" class="contenu">
138
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
113
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
139
						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
114
				Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
140
						Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
115
				Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. 
141
						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
116
				Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
142
			</span>
117
				</span>
143
		</div>		
118
			</div>	
144
		<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
119
			<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
145
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-8">Nomenclature<span class="lienToggle"></span></h3>
120
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
146
			<span id="contenu-0" class="contenu">
121
				<span id="contenu-0" class="contenu">
147
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
122
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
148
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
123
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
149
			</span>
124
				</span>
150
		</div>		
125
			</div>	
151
		<div id="phytosociologie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
126
			<div id="ethnobotanique" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
152
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-9">Phytosociologie<span class="lienToggle"></span></h3>
127
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
153
			<span id="contenu-0" class="contenu">
128
				<span id="contenu-0" class="contenu">
154
						Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
129
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
155
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
130
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
 
131
				</span>
156
			</span>
132
			</div>
-
 
133
		</div>
-
 
134
		<div class="colonne">
-
 
135
			<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
136
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-7">Statut de protection<span class="lienToggle"></span></h3>
-
 
137
				<span id="contenu-0" class="contenu">
-
 
138
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
139
							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
-
 
140
							Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
-
 
141
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-
 
142
				</span>
-
 
143
			</div>		
-
 
144
			<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
145
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-8">Nomenclature<span class="lienToggle"></span></h3>
-
 
146
				<span id="contenu-0" class="contenu">
-
 
147
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
148
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
 
149
				</span>
-
 
150
			</div>		
-
 
151
			<div id="phytosociologie" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
-
 
152
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-9">Phytosociologie<span class="lienToggle"></span></h3>
-
 
153
				<span id="contenu-0" class="contenu">
-
 
154
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
-
 
155
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-
 
156
				</span>
-
 
157
			</div>
-
 
158
		</div>
-
 
159
		
157
		</div>
160
		<br style="clear:left" />	
158
	</div>
161
	</div>
159
	
-
 
160
	<br style="clear:left" />	
-
 
Line 161... Line 162...
161
</div>
162
 
162
 
163
 
163
<script type="text/Javascript">
164
<script type="text/Javascript">
-
 
165
	var modules = Array();
-
 
166
	var tableauOnglets = Array();
Line 164... Line 167...
164
	var modules = Array();
167
	
165
	var ongletsOuverts = Array();
168
	 var ongletsDefaut = [<?= $blocs; ?>]; 
166
	
169
	
167
	/** Classe Module
170
	/** Classe Module
Line 262... Line 265...
262
	
265
	
263
	function afficherCacherMenuOnglets() {
266
	function afficherCacherMenuOnglets() {
264
		if($("#conteneurMenuOnglets").html() != '') {
267
		if($("#conteneurMenuOnglets").html() != '') {
265
			$("#conteneurMenuOnglets").html('');
268
			$("#conteneurMenuOnglets").html('');
266
		} else {
269
		} else {
267
			console.log(ongletsOuverts);
270
			console.log(tableauOnglets);
268
			var htmlMenu = '<ul class="menuModules">';
271
			var htmlMenu = '<ul class="menuModules">';
269
			for (idOnglet in ongletsOuverts) {
272
			for (idOnglet in tableauOnglets) {
270
				var classe = "elementMenuModules";
273
				var classe = "elementMenuModules";
271
				if($(idOnglet).is(':visible')) {
274
				if($(idOnglet).is(':visible')) {
272
					classe += " elementMenuModulesSelectionne";
275
					classe += " elementMenuModulesSelectionne";
273
				}
276
				}
274
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+ongletsOuverts[idOnglet].titre+'</li>';
277
				htmlMenu += '<li class="'+classe+'" rel="'+idOnglet+'" id="menu_module_'+idOnglet+'">'+tableauOnglets[idOnglet].titre+'</li>';
275
			}
278
			}
276
			htmlMenu += '</ul>';
279
			htmlMenu += '</ul>';
277
			$("#conteneurMenuOnglets").html(htmlMenu);
280
			$("#conteneurMenuOnglets").html(htmlMenu);
278
			$("#conteneurMenuOnglets").toggle();
281
			$("#conteneurMenuOnglets").toggle();
Line 288... Line 291...
288
		var longueurLiens = 0;
291
		var longueurLiens = 0;
289
		liensVisibles.each(function() {
292
		liensVisibles.each(function() {
290
			longueurLiens += $(this).width();
293
			longueurLiens += $(this).width();
291
		});
294
		});
292
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
295
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
293
		var longueurMax =  555 - (nbOnglets * 36);
296
		var longueurMax =  535 - (nbOnglets * 36);
294
		if(longueurLiens >= longueurMax || nbOnglets > 5) { 
297
		if(longueurLiens >= longueurMax || nbOnglets > 5) { 
295
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
298
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
296
		} else {
299
		} else {
297
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");	
300
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");	
298
		}
301
		}
Line 306... Line 309...
306
		$(".module").each(function () {
309
		$(".module").each(function () {
307
			i++;
310
			i++;
308
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
311
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
309
			var module = new Module(i, this, $(identifiantOnglet));
312
			var module = new Module(i, this, $(identifiantOnglet));
310
			module.titre = $(this).children('h3').text();
313
			module.titre = $(this).children('h3').text();
311
			ongletsOuverts[identifiantOnglet] = module;
314
			tableauOnglets[identifiantOnglet] = module;
312
		});
315
		});
Line 313... Line 316...
313
		
316
		
314
		$( ".colonne" ).sortable({
317
		$( ".colonne" ).sortable({
315
			connectWith: ".colonne"
318
			connectWith: ".colonne"
Line 329... Line 332...
329
			afficherCacherMenuOnglets();
332
			afficherCacherMenuOnglets();
330
		});
333
		});
Line 331... Line 334...
331
		
334
		
332
		$('.elementMenuModules').live('click', function() {
335
		$('.elementMenuModules').live('click', function() {
333
			var idOnglet = $(this).attr('rel');
336
			var idOnglet = $(this).attr('rel');
334
			var objet = ongletsOuverts[idOnglet];
337
			var objet = tableauOnglets[idOnglet];
335
			objet.afficherCacherModule();
338
			objet.afficherCacherModule();
336
			$(this).toggleClass("elementMenuModulesSelectionne");
339
			$(this).toggleClass("elementMenuModulesSelectionne");
Line -... Line 340...
-
 
340
		});
-
 
341
		
-
 
342
		for(indice in tableauOnglets) {
-
 
343
			var ongletEnCours = tableauOnglets[indice];
-
 
344
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
-
 
345
				ongletEnCours.afficherCacherModule();	
-
 
346
			}
337
		});
347
		}
338
		
348
		
339
		redimensionnerOnglets();
349
		redimensionnerOnglets();
340
	});
350
	});