Fonctionnalités de la librairie jsFF

Documentation de la librairie jsFF : composant fluidSpaner

La méthode jsFF.addFluidSpaner(conteneur, options) permet d'initialiser le composant fluidSpaner qui permet de gérer le changement de contenu des différents panneaux composant de la page à l'aide de transitions animées.
Le composant fluidSpaner autonome est accessible depuis la page de ses créateurs à : http://spaner.web-medias.com/slide.php

La méthode prend 2 arguments :
  • 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 :
    • autowidth : booléen permettant au composant de calculer automatiquement la largeur des panneaux.
    • usearrowkeys : booléen validant l'utilisation des flèches du clavier pour la navigation entre les panneaux.
    • usewheel : booléen validant l'utilisation de la molette pour naviguer entre les différents panneaux.
    • prevnextloop : booléen permettant de boucler sur l'affichage des panneaux.
    • showLocation : booléen permettant d'utiliser les ancres (???).

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 :

panneau1 | panneau2

contenu panneau 1 ...