Subversion Repositories eFlore/Applications.eflore-consultation

Compare Revisions

Ignore whitespace Rev 200 → Rev 201

/trunk/modules/fiche/squelettes/fiche_accueil.tpl.html
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>