Les caractéristiques du plugin Xtrm-Addons Panel

Xtrm-Addons Panel intègre une multitude d'options permettant d'intégrer des panneaux sur mesure.

• Ajout des librairies css et javascript à chaque page.
• Ajout des librairies css et javascript par auto-détection de code.
• Ajout de panneaux verticaux.
• Ajout de panneaux horizontaux.
• Effet de glissement vertical.
• Effet de glissement horizontal.

Installation

1 - Installation

L'installation du plugin Xtrm-Addons Panel s'effectue de façon classique à l'aide du gestionnaire d'extensions de Joomla.

2 - Configuration

Ajout des libraires:

Option qui permet de sélectionner par quelle méthode doivent être chargées les librairies javascript et css.
Toujours: Charge les fichiers javascript et css à chaque page.
Auto-détection: Charge les fichiers javascript et css si au moins un panel est détecté dans la page.

Utiliser le CSS:

Option qui permet de sélectionner si le plugin doit utiliser ses propres css ou non.
Fichier: Charge le fichier spécifié.
Aucun: Aucun fichier n'est chargé.

Fichier:

Chemin du fichier css à incorporer dans les pages.

Comment utiliser Xtrm-Addons Panel !?

Une fois le plugin activé et configuré, il ne reste plus qu'à insérer vos panneaux dans les contenus de votre choix.

Comment dois je procèder ?

Xtrm-Addons Panel Plugin ne possède aucun tag particulier et se compose de code HTML classique basé sur les class des éléments.

Il existe deux types de class du point de vue du plugin:

Classes réservées

Ces classes sont utilisées pour la mise en forme par le css mais servent également au fonctionnement des paneaux d'affichage et sont utilisées par la librarie javascript basée sur mootools.

Class	Tag	Description	Version
xtrm-panel	div	Identifie un div comme conteneur principal d'un panneau d'affichage.	1.0.0
xtrm-panel-header	ul	Identifie un ul comme conteneur d'une liste d'onglets.	1.0.0
xtrm-panel-active	li	Identifie un li comme conteneur du lien actif.	1.0.0
xtrm-panel-content	div	Identifie un div comme le conteneur du panneau d'affichage.	1.0.0
xtrm-panel-display	div	Identifie un div comme le panneau d'affichage.	1.0.0
hidden	div	Cache un div de contenu.	1.0.0

Les classes ci-dessous permettent d'assigner différents effets de transition.

Class	Tag	Description	Version
xtrm-fx-horizontal	div.xtrm-panel-display	Réalise une transition sliding de haut en bas.	1.0.0
xtrm-fx-vertical	div.xtrm-panel-display	Réalise une transition sliding de droite à gauche.	1.0.0
xtrm-fx-reveal	div.xtrm-panel-display	Réalise une transition fading avec disparition et apparition du contenu par transparence.	1.0.0

Classes d'affichage

Les classes d'affichage sont des classes prédéfinies pouvant servir à afficher les panneaux sous différentes formes verticalement et horizontalement.

Class	Tag	Description	Version
xtrm-panel-vertical-left	div.xtrm-panel	Affichage d'un menu vertical à gauche.	1.0.0
xtrm-fx-vertical-content	div.xtrm-panel-content	Affichage d'un menu vertical à gauche avec effet de sliding vertical.	1.0.0
xtrm-fx-reveal-content	div.xtrm-panel-content	Affichage d'un menu vertical à gauche avec effet de fading.	1.0.0

Les classes utilisées par Xtrm-Addons Panel Plugin sont préfixées par xtrm afin d'assurer une compatibilité maximale avec l'ensemble de Joomla! ainsi qu'avec les extensions tierces qui pourrait être installées.
Afin de customiser au maximum vos panneaux, vous pouvez ajouter vos propres classes.

Exemple d'ajout d'un panneau avec menu horizontal (classique par défaut).

<div class="xtrm-panel">
  <ul class="xtrm-panel-header">
    <li class="xtrm-panel-active">
      <a href="#" rel="monPanel-1">Panel 1</a></li>
    <li><a href="#" rel="monPanel-2">Panel 2</a></li>
    <li><a href="#" rel="monPanel-3">Panel 3</a></li>
  </ul>
 
  <div class="xtrm-panel-content">
    <div class="xtrm-panel-display">
    </div>
  </div>
  <div class="clear"></div>
</div>
<div id="monPanel-1" class="hidden">
  Contenu du panneau 1
</div>
<div id="monPanel-2" class="hidden">
  Contenu du panneau 2
</div>
<div id="monPanel-3" class="hidden">
  Contenu du panneau 3
</div>

1 - Déclaration du conteneur externe:

Le conteneur externe est l'élément principal qui va contenir le menu ainsi que le panneau qui va s'afficher avec ou sans effet de transition.

Il se déclare de la manière la plus simple comme ceci:

<div class="xtrm-panel">
<!--  
- Menu de navigation entre les panneaux.
- Panneau d'affichage principal.
-->
</div>

Par défaut, le panneau d'affichage est configuré pour être horizontal avec un menu positionné en haut et un panneau d'affichage au dessous.

<div class="xtrm-panel sert d'identificateur pour l'ajout des librairies par auto-détection.

Classes d'affichage:
xtrm-panel-vertical-left: Affichage d'un menu vertical à gauche.

2 - Déclaration du menu:

Le menu permettant de naviguer entre les différents panneaux se présente sous la forme d'une liste de liens qui pourra être positionnée aussi bien horizontalement que verticalement de même qu'au dessus ou au dessous du panneau d'affichage.

Le menu se déclare de la façon suivante:

<ul class="xtrm-panel-header">
<!--  
- Eléments de menu.
-->
</ul>

3 - Déclaration d'un élément de menu:

Les éléments de menu sont constituées d'une liste de liens correspondants chacun à un panneau d'affichage.

Chaque élément de menu se déclare de la façon suivante:

<li>
  <a href="#" rel="panel-content-1">Panel 1</a>
</li>

A chaque lien trouvé dans la liste sera associé le panneau correspondant avec rel du lien égal id du panneau.

4 - Déclaration de l'élément actif du menu:

Le lien actif par defaut se définit avec la classe réservée xtrm-panel-active

Il se déclare de la façon suivante:

<li class="xtrm-panel-active">
  <a href="#" rel="panel-content-1">Panel 1</a>
</li>

5 - Déclaration du panneau d'affichage principal:

Le panneau d'affichage est composé de 2 éléments permettant l'affichage de données avec différents effets de transition.

Il se déclare de la façon suivante:

<div class="xtrm-panel-content">
  <div class="xtrm-panel-display"></div>
</div>

Le premier div contenant la classe xtrm-panel-content correspond à la zone d'affichage du panneau qui doit contenir les données.
Le second div interne contenant la classe xtrm-panel-display correspond à l'élément qui va recevoir les données à afficher.

6 - Déclaration des éléments de contenus:

Les éléments de contenus sont les différents panneaux qui contiennent les informations qui devront être affichées.

Un contenu se déclare de la façon suivante:

<div id="monPanel-1" class="hidden">
  Contenu du panneau 1
</div>

A chaque contenu doit correspondre le lien correspondant avec id du panneau égal à l'attribut rel du lien.

Changelog

Version 1.1.0 (2012-01-18)

*

JS Librarie injecte le panneau dans la zone d'affichage au lieu de le dupliquer avant de l'afficher.

*

Correction crash lors de la création de flux.

Version 1.0.0 (2011-12-12)