Subversion Repositories eFlore/Applications.eflore-consultation

Rev

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

Rev 203 Rev 208
1 
<h1>Fiche</h1>
 1 
<h1>Fiche</h1>
2 
<style>
 2 
<style>
3 
	#zone_contenu_fiche {
 3 
	#zone_contenu_fiche {
4 
		border:solid 1px #DDD;
 4 
		border:solid 1px #DDD;
5 
		border-width:0px 1px 1px 1px;
 5 
		border-width:0px 1px 1px 1px;
6 
		width:100%;
 6 
		width:100%;
7 
		min-height:400px;
 7 
		min-height:400px;
8 
		clear:left;
 8 
		clear:left;
9
9
10 
	}
 10 
	}
11
11
12 
	.module {margin: 0 1em 1em 0;}
 12 
	.module {margin: 0 1em 1em 0;}
13 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
 13 
	.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;}
14 
	.module .titre .ui-icon { float: right; }
 14 
	.module .titre .ui-icon { float: right; }
15 
	.module .contenu { padding: 0.4em; }
 15 
	.module .contenu { padding: 0.4em; }
16
16
17 
	.colonne {float:left; padding-bottom:100px; width:30%}
 17 
	.colonne {float:left; padding-bottom:100px; width:30%}
18
18
19 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
 19 
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
20 
	.ui-sortable-placeholder * { visibility: hidden; }
 20 
	.ui-sortable-placeholder * { visibility: hidden; }
21
21
22 
	#zone_onglets ul li {list-style:none}
 22 
	#zone_onglets ul li {list-style:none}
23 
	.lienToggle {cursor:pointer}
 23 
	.lienToggle {cursor:pointer}
24
24
25
25
26 
	#dialog label, #dialog input { display:block; }
 26 
	#dialog label, #dialog input { display:block; }
27 
	#dialog label { margin-top: 0.5em; }
 27 
	#dialog label { margin-top: 0.5em; }
28 
	#dialog input, #dialog textarea { width: 95%; }
 28 
	#dialog input, #dialog textarea { width: 95%; }
29 
	#zone_onglets { margin-top: 1em; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
 29 
	#zone_onglets { margin-top: 1em; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px}
30 
	#zone_onglets li {float:left}
 30 
	#zone_onglets li {float:left}
31 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
 31 
	#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
32 
	#add_tab { cursor: pointer; }
 32 
	#add_tab { cursor: pointer; }
33 
</style>
 33 
</style>
34 
 
 34 
 
35 
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
 35 
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
36 
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
 36 
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
37 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li>
 37 
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li>
38 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li>
 38 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li>
39 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li>
 39 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li>
40 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
 40 
		<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li>
41 
	</ul>
 41 
	</ul>
42 
</div>
 42 
</div>
43 
 
 43 
 
44 
<div id="zone_contenu_fiche">
 44 
<div id="zone_contenu_fiche">
45 
	<div class="colonne">
 45 
	<div class="colonne">
46 
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 46 
		<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
47 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
 47 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3>
48 
			<span id="contenu-0" class="contenu">contenu-0</span>
 48 
			<span id="contenu-0" class="contenu">contenu-0</span>
49 
		</div>
 49 
		</div>
50
50
51 
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 51 
		<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
52 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
 52 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3>
53 
			<span id="contenu-0" class="contenu">contenu-0</span>
 53 
			<span id="contenu-0" class="contenu">contenu-0</span>
54 
		</div>
 54 
		</div>
55
55
56 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
 56 
		<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
57 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
 57 
			<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3>
58 
			<span id="contenu-0" class="contenu">contenu-0</span>
 58 
			<span id="contenu-0" class="contenu">contenu-0</span>
59 
		</div>
 59 
		</div>
60
60
61
61
62 
	</div>
 62 
	</div>
63 
	<div class="colonne"></div>
 63 
	<div class="colonne"></div>
64 
	<div class="colonne"></div>
 64 
	<div class="colonne"></div>
65
65
66 
	<br style="clear:left" />
66 
	<br style="clear:left" />
67 
</div>
 67 
</div>
68 
 
 68 
 
69 
<script type="text/Javascript">
 69 
<script type="text/Javascript">
70 
	var modules = Array();
 70 
	var modules = Array();
71
71
72 
	/** Classe Module
 72 
	/** Classe Module
73 
	* Définit un module de type portlet
 73 
	* Définit un module de type portlet
74 
	**/
 74 
	**/
75 
	function Module(id, module, onglet, statique) {
 75 
	function Module(id, module, onglet, statique) {
76
76
77 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
 77 
		// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu
78 
		this.id = id;
 78 
		this.id = id;
79 
		this.titre;
 79 
		this.titre;
80 
		this.htmlResume;
 80 
		this.htmlResume;
81 
		this.statique = statique;
 81 
		this.statique = statique;
82
82
83 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
83 
		// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement
84 
		this.portlet = module;
 84 
		this.portlet = module;
85 
		this.onglet;
 85 
		this.onglet;
86
86
87 
		// creerPortlet
87 
		// creerPortlet
88 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
 88 
		// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe
89 
		this.creerPortlet = function() {
 89 
		this.creerPortlet = function() {
90 
			var objet = this;
 90 
			var objet = this;
91
91
92 
			var titre = $(module).children('.titre');
 92 
			var titre = $(module).children('.titre');
93 
			titre.className = 'titre ui-widget-header ui-corner-all';
 93 
			titre.className = 'titre ui-widget-header ui-corner-all';
94 
			titre.id = 'titre-' + this.id;
 94 
			titre.id = 'titre-' + this.id;
95
95
96 
			var contenu = $(module).children('.contenu');
 96 
			var contenu = $(module).children('.contenu');
97 
			contenu.id = 'contenu-' + this.id;
 97 
			contenu.id = 'contenu-' + this.id;
98 
			contenu.className ='contenu';
 98 
			contenu.className ='contenu';
99
99
100 
			var lienToggle = document.createElement('span');
 100 
			var lienToggle = document.createElement('span');
101 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
 101 
			lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick';
102 
			$(titre).append(lienToggle);
 102 
			$(titre).append(lienToggle);
103 
			$(lienToggle).click(function() {
 103 
			$(lienToggle).click(function() {
104 
				$(contenu).toggle();
 104 
				$(contenu).toggle();
105
- 
 
- 
 
 105 
				$(this).toggleClass("ui-icon-plusthick");
- 
 
 106 
				$(this).toggleClass("ui-icon-minusthick");
106 
				$(objet.onglet).toggle()
 107 
				$(objet.onglet).toggle();
107 
			});
 108 
			});
108
109
109 
			this.portlet = module;
 110 
			this.portlet = module;
110 
			return module;
111 
			return module;
111 
		}
112 
		}
112
113
113 
		// creerOnglet
 114 
		// creerOnglet
114 
		// Créer l'objet Onglet HTML
 115 
		// Créer l'objet Onglet HTML
115 
		this.creerOnglet = function() {
 116 
		this.creerOnglet = function() {
116 
			var objet = this;
 117 
			var objet = this;
117
118
118 
			var a = $(onglet).find("a");
 119 
			var a = $(onglet).find("a");
119
120
120 
			// Gestion du clic sur le lien
121 
			// Gestion du clic sur le lien
121 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
122 
			// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour
122 
			// déplacer vers la page du module
 123 
			// déplacer vers la page du module
123 
			$(a).click(function() {
 124 
			$(a).click(function() {
124 
				// TODO : Changer l'url par celle du module.
 125 
				// TODO : Changer l'url par celle du module.
125 
				//$(location).attr('href',"http://www.google.fr");
 126 
				//$(location).attr('href',"http://www.google.fr");
126 
			});
 127 
			});
127
128
128 
			if (!statique) {
 129 
			if (!statique) {
129 
				var span = document.createElement('span');
 130 
				var span = document.createElement('span');
130 
				span.className = "ui-icon ui-icon-close";
 131 
				span.className = "ui-icon ui-icon-close";
131
132
132 
				// Gestion de la fermeture de l'onglet
 133 
				// Gestion de la fermeture de l'onglet
133 
				$(span).live( "click", function() {
 134 
				$(span).live( "click", function() {
134 
					$(span).parent().toggle();
 135 
					$(span).parent().toggle();
- 
 
 136 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-plusthick");
- 
 
 137 
					$(objet.portlet).find(".lienToggle").toggleClass("ui-icon-minusthick");
135 
					$(objet.portlet).find(".contenu").toggle(false);
 138 
					$(objet.portlet).find(".contenu").toggle(false);
136 
				});
 139 
				});
137
140
138 
				$(onglet).append(span);
 141 
				$(onglet).append(span);
139 
			}
 142 
			}
140
143
141 
			this.onglet = onglet;
 144 
			this.onglet = onglet;
142 
		}
 145 
		}
143
146
144 
		// Initialisation de l'objet
 147 
		// Initialisation de l'objet
145 
		this.creerPortlet();
 148 
		this.creerPortlet();
146 
		this.creerOnglet();
 149 
		this.creerOnglet();
147
150
148 
		// Accesseurs de la classe
 151 
		// Accesseurs de la classe
149 
		this.getOnglet = function() {
 152 
		this.getOnglet = function() {
150 
			return this.onglet;
153 
			return this.onglet;
151 
		}
 154 
		}
152
155
153 
		this.getPortlet = function() {
 156 
		this.getPortlet = function() {
154
157
155 
			return this.portlet;
 158 
			return this.portlet;
156 
		}
 159 
		}
157 
	}
 160 
	}
158
161
159 
	//Initialisation
 162 
	//Initialisation
160 
	$(document).ready(function() {
 163 
	$(document).ready(function() {
161 
		i = 1;
 164 
		i = 1;
162
165
163 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
 166 
		//Parcourir la totalité des modules générés et les lier grâce à la classe Module
164 
		$(".module").each(function () {
 167 
		$(".module").each(function () {
165 
			i++;
 168 
			i++;
166 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
 169 
			identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")";
167 
			var module = new Module(i, this, $(identifiantOnglet));
 170 
			var module = new Module(i, this, $(identifiantOnglet));
168
171
169 
		});
 172 
		});
170
173
171 
		$( ".colonne" ).sortable({
 174 
		$( ".colonne" ).sortable({
172 
			connectWith: ".colonne"
 175 
			connectWith: ".colonne"
173 
		});
 176 
		});
174 
 
 177 
 
175 
		$( ".colonne" ).disableSelection();
 178 
		$( ".colonne" ).disableSelection();
176 
		$('#zone_onglets').tabs();
 179 
		$('#zone_onglets').tabs();
177 
	});
 180 
	});
178 
</script>
 181 
</script>