1,2 → 1,176 |
<h1>Fiche</h1> |
<?php print_r($_GET); ?> |
<?php print_r($_GET); ?> |
|
<style> |
#zone_contenu_fiche { |
border:solid 1px red; |
width:100%; |
min-height:400px; |
} |
|
.module {margin: 0 1em 1em 0;} |
.module .titre{ margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; cursor:pointer;} |
.module .titre .ui-icon { float: right; } |
.module .contenu { padding: 0.4em; } |
|
.colonne {float:left; padding-bottom:100px; width:30%} |
|
.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; } |
.ui-sortable-placeholder * { visibility: hidden; } |
|
#zone_onglets ul li {list-style:none} |
.lienToggle {cursor:pointer} |
|
|
#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 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_contenu_fiche"> |
<div class="colonne"></div> |
<div class="colonne"></div> |
<div class="colonne"></div> |
|
<br style="clear:left" /> |
</div> |
|
<script type="text/Javascript"> |
var modules = Array(); |
|
/** Classe Module |
* Définit un module de type portlet |
**/ |
function Module(id, titre, htmlResume, 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.statique = statique; |
|
// Les objets Portlet et Onglet que l'ont garde en mémoire pour pouvoir y accéder facilement |
this.portlet; |
this.onglet; |
|
// creerPortlet |
// Créer l'objet Portlet HTML à afficher et le stocker dans les variables de classe |
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'); |
titre.className = 'titre ui-widget-header ui-corner-all'; |
titre.id = 'titre-' + this.id; |
|
var contenu = document.createElement('span'); |
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'; |
$(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; |
} |
|
// creerOnglet |
// Créer l'objet Onglet HTML |
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); |
|
// Gestion du clic sur le lien |
// Comme les liens sont mis en place par jqueryui tabs, il faut ajouter une surcouche pour |
// déplacer vers la page du module |
$(a).click(function() { |
// TODO : Changer l'url par celle du module. |
//$(location).attr('href',"http://www.google.fr"); |
}); |
|
if (!statique) { |
var span = document.createElement('span'); |
span.className = "ui-icon ui-icon-close"; |
|
// Gestion de la fermeture de l'onglet |
$(span).live( "click", function() { |
$(span).parent().toggle(); |
$(objet.portlet).find(".contenu").toggle(false); |
}); |
|
li.appendChild(span); |
} |
|
this.onglet = li; |
return li; |
} |
|
// Initialisation de l'objet |
this.creerPortlet(); |
this.creerOnglet(); |
|
// Accesseurs de la classe |
this.getOnglet = function() { |
return this.onglet; |
} |
|
this.getPortlet = function() { |
|
return this.portlet; |
} |
} |
|
$(document).ready(function() { |
|
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()); |
i++; |
|
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" |
}); |
|
$( ".colonne" ).disableSelection(); |
$('#zone_onglets').tabs(); |
|
}); |
</script> |