1,11 → 1,12 |
<h1>Fiche</h1> |
<?php print_r($_GET); ?> |
|
<style> |
#zone_contenu_fiche { |
border:solid 1px red; |
border:solid 1px #DDD; |
border-width:0px 1px 1px 1px; |
width:100%; |
min-height:400px; |
clear:left; |
|
} |
|
.module {margin: 0 1em 1em 0;} |
25,16 → 26,42 |
#dialog label, #dialog input { display:block; } |
#dialog label { margin-top: 0.5em; } |
#dialog input, #dialog textarea { width: 95%; } |
#zone_onglets { margin-top: 1em; } |
#zone_onglets { margin-top: 1em; border-width: 1px 1px 0 1px; border-radius:0; width:99%; font-size:12px} |
#zone_onglets li {float:left} |
#zone_onglets li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; } |
#add_tab { cursor: pointer; } |
</style> |
|
<div id="zone_onglets"><ul></ul></div> |
<div id="zone_onglets" class="ui-tabs ui-widget ui-widget-content ui-corner-all"> |
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"> |
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#fiche">Accueil</a></li> |
<li class="ui-state-default ui-corner-top"><a href="#fiche">Illustrations</a></li> |
<li class="ui-state-default ui-corner-top"><a href="#fiche">Répartition</a></li> |
<li class="ui-state-default ui-corner-top"><a href="#fiche">Wiki</a></li> |
</ul> |
</div> |
|
<div id="zone_contenu_fiche"> |
<div class="colonne"> |
<div id="illustrations" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> |
<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Illustrations</h3> |
<span id="contenu-0" class="contenu">contenu-0</span> |
</div> |
|
<div id="repartition" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> |
<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Répartition</h3> |
<span id="contenu-0" class="contenu">contenu-0</span> |
</div> |
|
<div id="wiki" class="module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"> |
<h3 class="titre ui-widget-header ui-corner-all" id="titre-0">Wiki<span class="lienToggle"></span></h3> |
<span id="contenu-0" class="contenu">contenu-0</span> |
</div> |
|
|
</div> |
<div class="colonne"></div> |
<div class="colonne"></div> |
<div class="colonne"></div> |
|
<br style="clear:left" /> |
</div> |
45,16 → 72,16 |
/** Classe Module |
* Définit un module de type portlet |
**/ |
function Module(id, titre, htmlResume, statique) { |
function Module(id, module, onglet, statique) { |
|
// Variables de classe : identifiant, titre, et le HTML du résumé à afficher dans le contenu |
this.id = id; |
this.titre = titre; |
this.htmlResume = htmlResume; |
this.titre; |
this.htmlResume; |
this.statique = statique; |
|
// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement |
this.portlet; |
this.portlet = module; |
this.onglet; |
|
// creerPortlet |
62,33 → 89,23 |
this.creerPortlet = function() { |
var objet = this; |
|
var module = document.createElement('div'); |
module.id = 'module-' + this.id; |
module.className = 'module ui-widget ui-widget-content ui-helper-clearfix ui-corner-all'; |
|
var titre = document.createElement('h3'); |
var titre = $(module).children('.titre'); |
titre.className = 'titre ui-widget-header ui-corner-all'; |
titre.id = 'titre-' + this.id; |
|
var contenu = document.createElement('span'); |
var contenu = $(module).children('.contenu'); |
contenu.id = 'contenu-' + this.id; |
contenu.className ='contenu'; |
$(titre).html(this.titre); |
|
$(contenu).html(this.htmlResume); |
|
var lienToggle = document.createElement('span'); |
lienToggle.className = 'lienToggle ui-icon ui-icon-minusthick'; |
$(titre).append(lienToggle); |
$(lienToggle).click(function() { |
$(contenu).toggle(); |
//alert($(document).children(contenu)) |
|
$(objet.onglet).toggle() |
}); |
|
titre.appendChild(lienToggle); |
module.appendChild(titre); |
module.appendChild(contenu); |
|
this.portlet = module; |
return module; |
} |
98,11 → 115,7 |
this.creerOnglet = function() { |
var objet = this; |
|
var li = document.createElement('li'); |
var a = document.createElement('a'); |
a.href = '#module-' + this.id; |
$(a).html(this.titre); |
li.appendChild(a); |
var a = $(onglet).find("a"); |
|
// Gestion du clic sur le lien |
// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour |
122,11 → 135,10 |
$(objet.portlet).find(".contenu").toggle(false); |
}); |
|
li.appendChild(span); |
$(onglet).append(span); |
} |
|
this.onglet = li; |
return li; |
this.onglet = onglet; |
} |
|
// Initialisation de l'objet |
144,26 → 156,17 |
} |
} |
|
//Initialisation |
$(document).ready(function() { |
i = 1; |
|
i = 0; |
var module = new Module(i, "Resume-" + i, "contenu-" + i, true); |
modules[i] = module; |
$("#zone_contenu_fiche>div:first-child").append(module.getPortlet()); |
$("#zone_onglets>ul").append(module.getOnglet()); |
//Parcourir la totalité des modules générés et les lier grâce à la classe Module |
$(".module").each(function () { |
i++; |
identifiantOnglet = "#zone_onglets>ul>li:nth-child(" + i +")"; |
var module = new Module(i, this, $(identifiantOnglet)); |
|
var module2 = new Module(i, "Resume-" + i, "contenu-" + i); |
modules[i] = module; |
$("#zone_contenu_fiche>div:first-child").append(module2.getPortlet()); |
$("#zone_onglets>ul").append(module2.getOnglet()); |
i++; |
|
var module3 = new Module(i, "Resume-" + i, "contenu-" + i); |
modules[i] = module; |
$("#zone_contenu_fiche>div:first-child").append(module3.getPortlet()); |
$("#zone_onglets>ul").append(module3.getOnglet()); |
i++; |
}); |
|
$( ".colonne" ).sortable({ |
connectWith: ".colonne" |
171,6 → 174,5 |
|
$( ".colonne" ).disableSelection(); |
$('#zone_onglets').tabs(); |
|
}); |
</script> |