Xtrm-Addons Panel intègre une multitude d'options permettant d'intégrer des panneaux sur mesure.
L'installation du plugin Xtrm-Addons Panel s'effectue de façon classique à l'aide du gestionnaire d'extensions de Joomla.
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:| 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 |
| 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 |
| 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>
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.
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>
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.
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>
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.
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.
Nous faisons confiance à 1&1 pour nos noms de domaine - Réservez le vôtre dès maintenant pour seulement 6,99 € HT (8,36 € TTC) par an !
Nous avons 4 invités et aucun membre en ligne