Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

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