conteneur
(obligatoire) est l'identifiant d'un div chargé de recevoir les différents panneaux.options
est un objet permettant de passer les paramètres de d'affichage et de fonctionnement du composant. Il s'agit de :
Les effets appliqués lors des transitions peuvent être ajustés en utilisant la méthode : jsFF.setSpanTransition(id, transition)
prenant comme argument l'identifiant du spaner et un effet à appliquer, parmi :
sinoidal
.SwingFromTo
Elastic
.SwingFrom
.SwingTo
.Bounce
BouncePast
.EaseFromTo
.EaseFrom
.EaseTo
.
Il est possible de gérer les évènements émis par le composant en utilisant le code suivant :
document.observe("fluidspaner:ready", function(event) { // ... });en ciblant l'un des 3 évènements :
fluidspaner:ready
qui est émis lorsque le composant a terminé son initialisation.fluidspaner:beforeSlide
qui est émis lorsque avant que le composant ne commence lancer l'animation de transition.fluidspaner:afterSlide
qui est émis lorsque après une transition.Le composant prévoit également de récupérer via une requête Ajax le contenu d'un panneau, pour ce faire, il suffit simplement de renseigner
la structure HTML sous-jacente pour les DIV de contenu avec la classe ajaxspaner
et lui founir également un attribut title="URL à récupérer"
.
Le composant se base sur une structure html particulière afin de décrite les différents panneaux à afficher, telle que :
<div id="nouv_spaner" class="SPaner"> <div class="spaner_ajaxloader"></div> <div class="boxspaner" id="SpanerBox"> <!-- Panneau 1 --> <a name="_panneau1"></a> <div class="tabspaner" id="panneau1" style="width: 1015px"> <div class="spaner-content" style="width: 95%; height: 100%;"> contenu panneau 2 <div> <div> <!-- Panneau 2 --> <a name="_panneau2"></a> <div class="tabspaner" id="panneau2" style="width: 1015px"> <div class="spaner-content" style="width: 95%; height: 100%;"> contenu panneau 2 <div> <div> <div> <div>
L'exemple ci-dessus :