Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

Rev 213 Rev 214
Line 7... Line 7...
7 
		min-height:400px;
 7 
		min-height:400px;
8 
		clear:left;
 8 
		clear:left;
Line 9... Line 9...
9
9
Line 10... Line 10...
10 
	}
 10 
	}
11
11
12 
	.module {margin: 0 1em 1em 0;}
 12 
	.module {margin: 0 1em 0.5em 0; width: 99%;}
13 
	.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;}
Line 14... Line 14...
14 
	.module .titre .ui-icon { float: right; }
 14 
	.module .titre .ui-icon { float: right; }
Line 15... Line 15...
15 
	.module .contenu { padding: 0.4em; }
 15 
	.module .contenu { padding: 0.4em; }
16
16
Line 17... Line 17...
17 
	.colonne {float:left; padding-bottom:100px; width:30%}
 17 
	.colonne {float:left; padding-bottom:100px; width:32%; margin: 0 4px;}
Line 27... Line 27...
27 
	#dialog label { margin-top: 0.5em; }
 27 
	#dialog label { margin-top: 0.5em; }
28 
	#dialog input, #dialog textarea { width: 95%; }
 28 
	#dialog input, #dialog textarea { width: 95%; }
29 
	#zone_onglets { margin-top: 1em; padding-right: 5px; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
 29 
	#zone_onglets { margin-top: 1em; padding-right: 5px; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
30 
	#zone_onglets li {float:left}
 30 
	#zone_onglets li {float:left}
31 
	#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; }
- 
 
 32 
	#zone_onglets li a.lien-onglet {overflow: hidden; text-decoration: none; border-bottom: none;}
32 
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right; z-index:2001;}
 33 
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right; z-index:2001;}
33 
	#zone_onglets #ongletEtPlus a { border-bottom: none;}
 34 
	#zone_onglets #ongletEtPlus a { border-bottom: none;}
Line 34... Line 35...
34
35
35 
	.elementMenuModules {
 36 
	.elementMenuModules {
Line 62... Line 63...
62 
	}
 63 
	}
63 
</style>
 64 
</style>
Line 64... Line 65...
64 
 
 65 
 
65 
<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">
66 
	<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">
67 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a 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>
- 
 
 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>
68 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</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>
- 
 
 74 
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Ethnobotanique</a></li>
69 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</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>
70 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
 77 
		<li class="ui-state-default ui-corner-top"><a class="lien-onglet" href="#fiche">Phytosociologie</a></li>
71 
		<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a href="#fiche">+</a></li>
 78 
		<li id="ongletEtPlus" class="ui-state-default ui-corner-top"><a class="lien-statique" href="#fiche">+</a></li>
72 
	</ul>
 79 
	</ul>
73 
	<span id="conteneurMenuOnglets"></span>
 80 
	<span id="conteneurMenuOnglets"></span>
Line 74... Line 81...
74 
</div>
 81 
</div>
75 
 
 82 
 
76 
<div id="zone_contenu_fiche">
 83 
<div id="zone_contenu_fiche">
77 
	<div class="colonne">
 84 
	<div class="colonne">
78 
		<div id="illustrations" 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">
- 
 
 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.
79 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
 105 
						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
80 
			<span id="contenu-0" class="contenu">contenu-0</span>
 106 
			</span>
- 
 
 107 
		</div>
- 
 
 108 
	</div>
- 
 
 109 
	<div class="colonne">
- 
 
 110 
		<div id="bibliographie" 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>
- 
 
 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.
- 
 
 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.
- 
 
 116 
			Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
81 
		</div>
 117 
			</span>
82
118 
		</div>
- 
 
 119 
		<div id="repartition" 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>
- 
 
 121 
			<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.
- 
 
 123 
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- 
 
 124 
			</span>
- 
 
 125 
		</div>
83 
		<div id="repartition" 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">
- 
 
 127 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-5">Ethnobotanique<span class="lienToggle"></span></h3>
- 
 
 128 
			<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.
84 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
 130 
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
85 
			<span id="contenu-0" class="contenu">contenu-0</span>
 131 
			</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
86 
		</div>
 142 
			</span>
87
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>
88 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 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.
89 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
 155 
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
90 
			<span id="contenu-0" class="contenu">contenu-0</span>
 - 
 
91 
		</div>
 - 
 
92
156 
			</span>
93
- 
 
94 
	</div>
 - 
 
Line 95... Line 157...
95 
	<div class="colonne"></div>
 157 
		</div>
96 
	<div class="colonne"></div>
 158 
	</div>
Line 97... Line 159...
97
159
Line 161... Line 223...
161 
				span.className = "ui-icon ui-icon-close";
 223 
				span.className = "ui-icon ui-icon-close";
Line 162... Line 224...
162
224
163 
				// Gestion de la fermeture de l'onglet
 225 
				// Gestion de la fermeture de l'onglet
164 
				$(span).live( "click", function() {
 226 
				$(span).live( "click", function() {
- 
 
 227 
					objet.afficherCacherModule();
165 
					objet.afficherCacherModule();
 228 
					redimensionnerOnglets();
Line 166... Line 229...
166 
				});
 229 
				});
167
230
Line 189... Line 252...
189 
		this.afficherCacherModule = function() {
252 
		this.afficherCacherModule = function() {
190 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
 253 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
191 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
 254 
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
192 
			$(this.portlet).find(".contenu").toggle();
 255 
			$(this.portlet).find(".contenu").toggle();
193 
			$(this.onglet).toggle();
 256 
			$(this.onglet).toggle();
- 
 
 257
- 
 
 258 
			redimensionnerOnglets();
194 
		}
 259 
		}
Line 195... Line 260...
195 
 
 260 
 
Line 196... Line 261...
196 
	}
 261 
	}
Line 212... Line 277...
212 
			$("#conteneurMenuOnglets").html(htmlMenu);
 277 
			$("#conteneurMenuOnglets").html(htmlMenu);
213 
			$("#conteneurMenuOnglets").toggle();
 278 
			$("#conteneurMenuOnglets").toggle();
214 
		}
 279 
		}
215 
	}
 280 
	}
Line -... Line 281...
- 
 
 281
- 
 
 282 
	function redimensionnerOnglets() {
- 
 
 283 
		// 570 px au max
- 
 
 284 
		// 18 largeur croix
- 
 
 285 
		// 18 largeur texte
- 
 
 286 
		// 36 largeur totale
- 
 
 287 
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
- 
 
 288 
		var longueurLiens = 0;
- 
 
 289 
		liensVisibles.each(function() {
- 
 
 290 
			longueurLiens += $(this).width();
- 
 
 291 
		});
- 
 
 292 
		var nbOnglets = $('#zone_onglets > ul > li:visible').length;
- 
 
 293 
		var longueurMax =  555 - (nbOnglets * 36);
- 
 
 294 
		if(longueurLiens >= longueurMax || nbOnglets > 5) {
- 
 
 295 
			$('#zone_onglets > ul > li > a').not('.lien-statique').width(longueurMax/nbOnglets);
- 
 
 296 
		} else {
- 
 
 297 
			$('#zone_onglets > ul > li > a').not('.lien-statique').css("width","auto");
- 
 
 298 
		}
- 
 
 299 
	}
216
300
217 
	//Initialisation
 301 
	//Initialisation
218 
	$(document).ready(function() {
 302 
	$(document).ready(function() {
Line 219... Line 303...
219 
		i = 1;
 303 
		i = 1;
Line 230... Line 314...
230 
		$( ".colonne" ).sortable({
 314 
		$( ".colonne" ).sortable({
231 
			connectWith: ".colonne"
 315 
			connectWith: ".colonne"
232 
		});
 316 
		});
Line 233... Line 317...
233 
 
 317 
 
234 
		$( ".colonne" ).disableSelection();
 318 
		$( ".colonne" ).disableSelection();
- 
 
 319 
		$('#zone_onglets').tabs({
- 
 
 320 
			add: function(event, ui) {
- 
 
 321 
				redimensionnerOnglets();
- 
 
 322 
			},
- 
 
 323 
			remove: function(event, ui) {
- 
 
 324 
				redimensionnerOnglets();
- 
 
 325 
			}
- 
 
 326 
		});
235 
		$('#zone_onglets').tabs();
 327 
 
236 
		$("#ongletEtPlus").click(function() {
 328 
		$("#ongletEtPlus").click(function() {
237 
			afficherCacherMenuOnglets();
 329 
			afficherCacherMenuOnglets();
Line 238... Line 330...
238 
		});
 330 
		});
239
331
240 
		$('.elementMenuModules').live('click', function() {
 332 
		$('.elementMenuModules').live('click', function() {
241 
			var idOnglet = $(this).attr('rel');
 333 
			var idOnglet = $(this).attr('rel');
242 
			var objet = ongletsOuverts[idOnglet];
 334 
			var objet = ongletsOuverts[idOnglet];
243 
			objet.afficherCacherModule();
 335 
			objet.afficherCacherModule();
- 
 
 336 
			$(this).toggleClass("elementMenuModulesSelectionne");
- 
 
 337 
		});
244 
			$(this).toggleClass("elementMenuModulesSelectionne");
 338
245 
		})
 339 
		redimensionnerOnglets();
246 
	});
 340 
	});