
Cette action permet d'ajouter très facilement des onglets sur les 4 côtés de la fenêtre du navigateur.
Sur un script de hawk-ip (licence GPL v3.0)
{up tabslide=btn-text | tabLocation=top}
contenu{/up tabslide}
utilisation :
- un sommaire sur le coté du site
- un module connexion
- tabslide: titre de l'onglet
- tab-style: classes et styles inline pour onglet
- tab-class: classe(s) pour onglet (obsolète)
- panel-style: classes et styles inline pour panneau
- panel-class: classe(s) pour panneau (obsolète)
- tabLocation = left: left, right, top or bottom
- tabHandle = .handle: JQuery selector for the tab, can use #
- speed = 300: time to animate
- action = click: action open, 'hover' or 'click'
- offset = 200px: distance pour top or left (bottom or right if offsetReverse is true)
- offsetReverse = 0: true= aligné a droite ou en bas
- otherOffset = null: if set, panel size is set to maintain this dist from bottom or right (top or left if offsetReverse)
- handleOffset = null: e.g. '10px'. If null, detects panel border to align handle nicely
- handleOffsetReverse = 0: if true, handle aligned with right or bottom of panel
- bounceDistance = 50px: how far bounce event will move everything
- bounceTimes = 4: how many bounces when 'bounce' is called
- positioning = fixed: or absolute, so tabs move when window scrolls
- pathToTabImage = null: optional image to show in the tab
- imageHeight = null:
- imageWidth = null:
- onLoadSlideOut = 0: slide out after DOM load
- clickScreenToClose = 1: close tab when rest of screen clicked
- toggleButton = .tab-opener: not often used
- onOpen = function() {:
- onClose = function() {:
Syntaxe minimale
{up tabslide=TITRE | tabLocation=bottom}
<p>contenu du volet</p>
{/up tabslide}
- tabslide
- l'argument principal est le titre de l'onglet
- tabLocation
- la position de l'onglet: left (par défaut), top, right, bottom
Pour la mise en forme, les principales options sont:
- tab-style
- classe(s) et style(s) inline pour le bouton.
- panel-style
- classe(s) et style(s) inline pour le panneau de contenu
- action
- click par défaut. hover affiche l'onglet lors de son survol
- offset
- la distance entre l'angle de l'écran et l'onglet
Consultez la documentation de l'action pour les autres options.
Attention : si le panel contient des images,
il est important d'en spécifier les dimensions (style="weight:XXpx;height:XXpx") pour que le script puisse calculer la taille du panneau
Les exemples
Voici le code pour les 4 onglets visibles sur cette page
A gauche
{up tabslide=connexion | tab-style=bg-bleuClair t-hover-jaune t-blanc | panel-style=bd-bleuClair;border-size:2px}
{loadposition login}
{/up tabslide}
Depuis la version 1.5 de UP, il est possible de mélanger des classes et des styles. Ne pas oublier de mettre un point-virgule comme séparateur entre une classe et un style
En haut
{up tabslide=test | tabLocation=top | tab-style=background-color:#069;color:#fff | panel-style=border:2px solid #069;z-index:12000 }</p>
<p>contenu du volet</p>
<p><img src="/images/photos/Ecureuil-rouge-eurasien-mini.jpg" alt="" style="height: 164px; width: 262px;" /></p>
{/up tabslide}
Noter la présence d'un z-index:12000 pour s'assurer que l'onglet soit au-dessus de la barre de menu.
A droite
{up tabslide=Sommaire| tabLocation=right | onLoadSlideOut | offset=140px | action=hover
| tab-style=background-color:#f00;border-radius:10px 10px 0 0;t-blanc;b | panel-style=border:2px solid #f00}
<p>Cet onglet est affiché à l'ouverture de la page.
Il sera masqué lors d'un clic sur la page.t</p>
<p>{up toc | class=chevron | heading=Sommaire de la page}</p>
{/up tabslide}
Vous remarquerez que UP supporte le mélange des classes et styles dans les options tab-style
Cet onglet est affiché à l'ouverture de la page.
Il sera masqué lors d'un clic sur la page.
En bas
{up tabslide=en bas | tabLocation=bottom | tab-style=background-color:limeGreen;color:yellow | panel-style=border:2px dotted limeGreen;background-color:lightyellow}
<p>contenu du volet</p>
{/up tabslide}
contenu du volet
Un onglet sur toutes les pages du site
Ma méthode personnelle, comme j'ai toujours un module LM-Custom publié en position debug, il suffit d'y ajouter le shortcode qui appelle cet onglet. Cela fonctionne aussi avec le module personnalisé standard de Joomla