Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

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