Subversion Repositories eFlore/Applications.eflore-consultation

Rev

Rev 214 | Rev 221 | Go to most recent revision | Only display areas with differences | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 214 Rev 219
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%;
7
		min-height:400px;
6
		min-height:400px;
8
		clear:left;
7
		clear:left;
9
		
8
		
10
	}
9
	}
11
	
10
	
12
	.module {margin: 0 1em 0.5em 0; width: 99%;}
11
	.module {margin: 0 1em 0.5em 0; width: 99%;}
13
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
12
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
14
	.module .titre .ui-icon { float: right; }
13
	.module .titre .ui-icon { float: right; }
15
	.module .contenu { padding: 0.4em; }
14
	.module .contenu { padding: 0.4em; }
16
	
15
	
17
	.colonne {float:left; padding-bottom:100px; width:32%; margin: 0 4px;}
16
	.colonne {float:left; padding-bottom:100px; width:32%; margin: 0 4px;}
18
	
17
	
19
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
18
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
20
	.ui-sortable-placeholder * { visibility: hidden; }
19
	.ui-sortable-placeholder * { visibility: hidden; }
21
	
20
	
22
	#zone_onglets ul li {list-style:none}
21
	#zone_onglets ul li {list-style:none}
23
	.lienToggle {cursor:pointer}
22
	.lienToggle {cursor:pointer}
24
	
23
	
25
	
24
	
26
	#dialog label, #dialog input { display:block; }
25
	#dialog label, #dialog input { display:block; }
27
	#dialog label { margin-top: 0.5em; }
26
	#dialog label { margin-top: 0.5em; }
28
	#dialog input, #dialog textarea { width: 95%; }
27
	#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}
28
	#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}
29
	#zone_onglets li {float:left}
31
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
30
	#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;}
31
	#zone_onglets li a.lien-onglet {overflow: hidden; text-decoration: none; border-bottom: none;}
33
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right; z-index:2001;}
32
	#zone_onglets #ongletEtPlus { cursor: pointer; float:right; z-index:2001;}
34
	#zone_onglets #ongletEtPlus a { border-bottom: none;}
33
	#zone_onglets #ongletEtPlus a { border-bottom: none;}
35
	
34
	
36
	.elementMenuModules {
35
	.elementMenuModules {
37
		display:block; 
36
		display:block; 
38
		border: 1px solid white; 
37
		border: 1px solid white; 
39
		width: 150px; 
38
		width: 150px; 
40
		padding: 10px 10px 10px 25px; 
39
		padding: 10px 10px 10px 25px; 
41
		margin:0px;
40
		margin:0px;
42
		cursor: pointer;
41
		cursor: pointer;
43
	}
42
	}
44
	
43
	
45
	.elementMenuModules:hover {
44
	.elementMenuModules:hover {
46
		background-color: #FEBF01;
45
		background-color: #FEBF01;
47
	}
46
	}
48
	
47
	
49
	.elementMenuModulesSelectionne {
48
	.elementMenuModulesSelectionne {
50
		background-color: #F6AF39;
49
		background-color: #F6AF39;
51
	}
50
	}
52
	
51
	
53
	.menuModules {
52
	.menuModules {
54
		left: 495px;
53
		left: 495px;
55
		width: 187px;
54
		width: 187px;
56
		position: absolute; 
55
		position: absolute; 
57
		border: 1px solid #DCD1CC; 
56
		border: 1px solid #DCD1CC; 
58
		margin: 0px; 
57
		margin: 0px; 
59
		padding: 0px;
58
		padding: 0px;
60
		top: 37px;
59
		top: 37px;
61
		z-index:2000;
60
		z-index:2000;
62
		background-color: white;
61
		background-color: white;
63
	}
62
	}
64
</style>
63
</style>
-
 
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>
80
		<span id="conteneurMenuOnglets"></span>
81
</div>
81
	</div>
82
 
82
	
83
<div id="zone_contenu_fiche">
83
	<div id="zone_contenu_fiche">
84
	<div class="colonne">
84
		<div class="colonne">
85
		<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>
86
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
87
			<span id="contenu-0" class="contenu">
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. 
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.
89
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
90
			</span>
90
				</span>
91
		</div>	
91
			</div>	
92
		<div id="description" 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">
93
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
93
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-1">Description</h3>
94
			<span id="contenu-0" class="contenu">
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. 
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.
96
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
97
			</span>
97
				</span>
98
		</div>	
98
			</div>	
99
		<div id="classification" 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">
100
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
100
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-2">Classification</h3>
101
			<span id="contenu-0" class="contenu">
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. 
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. 
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. 
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
105
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
106
			</span>
106
				</span>
107
		</div>	
107
			</div>	
108
	</div>
108
		</div>
109
	<div class="colonne">	
109
		<div class="colonne">	
110
		<div id="bibliographie" 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">
111
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
111
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-3">Bibliographie</h3>
112
			<span id="contenu-0" class="contenu">
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. 
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. 
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. 
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? 
116
				Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? 
117
			</span>
117
				</span>
118
		</div>	
118
			</div>	
119
		<div id="repartition" 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">
120
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
120
				<h3 class="titre ui-widget-header ui-corner-all" id="titre-4">Répartition</h3>
121
			<span id="contenu-0" class="contenu">
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. 
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.
123
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
124
			</span>
124
				</span>
125
		</div>	
125
			</div>	
126
		<div id="ethnobotanique" 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>
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">
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. 
129
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
130
			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>
131
				</span>
132
		</div>
132
			</div>
133
	</div>
133
		</div>
134
	<div class="colonne">
134
		<div class="colonne">
135
		<div id="statutDeProtection" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
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>
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">
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. 
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. 
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. 
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
141
							Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
142
			</span>
142
				</span>
143
		</div>		
143
			</div>		
144
		<div id="nomenclature" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
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>
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">
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. 
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.
148
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
149
			</span>
149
				</span>
150
		</div>		
150
			</div>		
151
		<div id="phytosociologie" 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>
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">
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. 
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.
155
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
156
			</span>
156
				</span>
157
		</div>
157
			</div>
158
	</div>
158
		</div>
159
	
159
		
160
	<br style="clear:left" />	
160
		<br style="clear:left" />	
161
</div>
161
	</div>
-
 
162
 
162
 
163
 
163
<script type="text/Javascript">
164
<script type="text/Javascript">
164
	var modules = Array();
165
	var modules = Array();
-
 
166
	var tableauOnglets = Array();
-
 
167
	
165
	var ongletsOuverts = Array();
168
	 var ongletsDefaut = [<?= $blocs; ?>]; 
166
	
169
	
167
	/** Classe Module
170
	/** Classe Module
168
	* Définit un module de type portlet
171
	* Définit un module de type portlet
169
	**/
172
	**/
170
	function Module(id, module, onglet, statique) {
173
	function Module(id, module, onglet, statique) {
171
		
174
		
172
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
175
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
173
		this.id = id;
176
		this.id = id;
174
		this.titre;
177
		this.titre;
175
		this.htmlResume;
178
		this.htmlResume;
176
		this.statique = statique;
179
		this.statique = statique;
177
		
180
		
178
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement 
181
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement 
179
		this.portlet = module;
182
		this.portlet = module;
180
		this.onglet;
183
		this.onglet;
181
		
184
		
182
		// creerPortlet 
185
		// creerPortlet 
183
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
186
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
184
		this.creerPortlet = function() {
187
		this.creerPortlet = function() {
185
			var objet = this;
188
			var objet = this;
186
			
189
			
187
			var titre = $(module).children('.titre');
190
			var titre = $(module).children('.titre');
188
			titre.className = 'titre ui-widget-header ui-corner-all';
191
			titre.className = 'titre ui-widget-header ui-corner-all';
189
			titre.id = 'titre-' + this.id;
192
			titre.id = 'titre-' + this.id;
190
			
193
			
191
			var contenu = $(module).children('.contenu');
194
			var contenu = $(module).children('.contenu');
192
			contenu.id = 'contenu-' + this.id;
195
			contenu.id = 'contenu-' + this.id;
193
			contenu.className ='contenu';
196
			contenu.className ='contenu';
194
			
197
			
195
			var lienToggle = document.createElement('span');
198
			var lienToggle = document.createElement('span');
196
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
199
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
197
			$(titre).append(lienToggle);
200
			$(titre).append(lienToggle);
198
			$(lienToggle).click(function() {
201
			$(lienToggle).click(function() {
199
				objet.afficherCacherModule();
202
				objet.afficherCacherModule();
200
			});
203
			});
201
			
204
			
202
			this.portlet = module;
205
			this.portlet = module;
203
			return module;	
206
			return module;	
204
		}	
207
		}	
205
		
208
		
206
		// creerOnglet
209
		// creerOnglet
207
		// Créer l'objet Onglet HTML
210
		// Créer l'objet Onglet HTML
208
		this.creerOnglet = function() {
211
		this.creerOnglet = function() {
209
			var objet = this;
212
			var objet = this;
210
			
213
			
211
			var a = $(onglet).find("a");
214
			var a = $(onglet).find("a");
212
			
215
			
213
			// Gestion du clic sur le lien 
216
			// Gestion du clic sur le lien 
214
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour 
217
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour 
215
			// déplacer vers la page du module
218
			// déplacer vers la page du module
216
			$(a).click(function() {
219
			$(a).click(function() {
217
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
220
				// TODO : Changer l'url par celle du module et enregistrer la configuration actuelle des onglets.
218
				//$(location).attr('href',"http://www.google.fr");
221
				//$(location).attr('href',"http://www.google.fr");
219
			});
222
			});
220
			
223
			
221
			if (!statique) {
224
			if (!statique) {
222
				var span = document.createElement('span');
225
				var span = document.createElement('span');
223
				span.className = "ui-icon ui-icon-close";
226
				span.className = "ui-icon ui-icon-close";
224
			
227
			
225
				// Gestion de la fermeture de l'onglet
228
				// Gestion de la fermeture de l'onglet
226
				$(span).live( "click", function() {
229
				$(span).live( "click", function() {
227
					objet.afficherCacherModule();
230
					objet.afficherCacherModule();
228
					redimensionnerOnglets();
231
					redimensionnerOnglets();
229
				});
232
				});
230
				
233
				
231
				$(onglet).append(span);
234
				$(onglet).append(span);
232
			}
235
			}
233
			
236
			
234
			this.onglet = onglet;
237
			this.onglet = onglet;
235
		}
238
		}
236
		
239
		
237
		// Initialisation de l'objet
240
		// Initialisation de l'objet
238
		this.creerPortlet();
241
		this.creerPortlet();
239
		this.creerOnglet();
242
		this.creerOnglet();
240
		
243
		
241
		// Accesseurs de la classe
244
		// Accesseurs de la classe
242
		this.getOnglet = function() {
245
		this.getOnglet = function() {
243
			return this.onglet;	
246
			return this.onglet;	
244
		}
247
		}
245
		
248
		
246
		this.getPortlet = function() {
249
		this.getPortlet = function() {
247
			
250
			
248
			return this.portlet;
251
			return this.portlet;
249
		}
252
		}
250
		
253
		
251
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
254
		// fonctions d'affichage et cachage (je sais pas si on dit ça comme ça) des onglets
252
		this.afficherCacherModule = function() { 
255
		this.afficherCacherModule = function() { 
253
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
256
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
254
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
257
			$(this.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
255
			$(this.portlet).find(".contenu").toggle();
258
			$(this.portlet).find(".contenu").toggle();
256
			$(this.onglet).toggle();
259
			$(this.onglet).toggle();
257
			
260
			
258
			redimensionnerOnglets();
261
			redimensionnerOnglets();
259
		}
262
		}
260
 
263
 
261
	}
264
	}
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();
279
		}
282
		}
280
	}
283
	}
281
	
284
	
282
	function redimensionnerOnglets() {
285
	function redimensionnerOnglets() {
283
		// 570 px au max
286
		// 570 px au max
284
		// 18 largeur croix 
287
		// 18 largeur croix 
285
		// 18 largeur texte 
288
		// 18 largeur texte 
286
		// 36 largeur totale
289
		// 36 largeur totale
287
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
290
		var liensVisibles = $('#zone_onglets > ul > li:visible > a');
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
		}
299
	}
302
	}
300
	
303
	
301
	//Initialisation
304
	//Initialisation
302
	$(document).ready(function() {
305
	$(document).ready(function() {
303
		i = 1;
306
		i = 1;
304
		
307
		
305
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
308
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
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
		});
313
		
316
		
314
		$( ".colonne" ).sortable({
317
		$( ".colonne" ).sortable({
315
			connectWith: ".colonne"
318
			connectWith: ".colonne"
316
		});
319
		});
317
 
320
 
318
		$( ".colonne" ).disableSelection();
321
		$( ".colonne" ).disableSelection();
319
		$('#zone_onglets').tabs({
322
		$('#zone_onglets').tabs({
320
			add: function(event, ui) {
323
			add: function(event, ui) {
321
				redimensionnerOnglets();
324
				redimensionnerOnglets();
322
			},
325
			},
323
			remove: function(event, ui) {
326
			remove: function(event, ui) {
324
				redimensionnerOnglets();
327
				redimensionnerOnglets();
325
			}
328
			}
326
		});
329
		});
327
 
330
 
328
		$("#ongletEtPlus").click(function() {
331
		$("#ongletEtPlus").click(function() {
329
			afficherCacherMenuOnglets();
332
			afficherCacherMenuOnglets();
330
		});
333
		});
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");
337
		});
340
		});
-
 
341
		
-
 
342
		for(indice in tableauOnglets) {
-
 
343
			var ongletEnCours = tableauOnglets[indice];
-
 
344
			if (ongletsDefaut.indexOf(ongletEnCours.titre) == -1) {
-
 
345
				ongletEnCours.afficherCacherModule();	
-
 
346
			}
-
 
347
		}
338
		
348
		
339
		redimensionnerOnglets();
349
		redimensionnerOnglets();
340
	});
350
	});
341
</script>
351
</script>