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}- tabslide: titre de l'onglet
- tab-class: classe(s) pour onglet
- tab-style: css pour onglet
- panel-class: classe(s) pour panneau
- panel-style: css pour panneau
- 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=false: 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=false: 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=false: slide out after DOM load
- clickScreenToClose=true: 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 defaut), top, right, bottom
Pour la mise en forme, les principales options sont:
- tab-class & tab-style
- le style du bouton
- panel-class & panel-style
- le style du 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-class=bg-bleuClair t-hover-jaune t-blanc | panel-class=bd-bleuClair b2}
{loadposition login}
{/up tabslide}
Login Form
En naut
{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=action| tabLocation=right | offset=140px | action=hover | tab-style=background-color:#f00;border-radius:10px 10px 0 0 | panel-style=border:2px solid #f00}
<p>contenu du volet</p>
<p>{up lorempixel=cats | L=200 | H=150 | style=height:100px;height:75px}</p>
{/up tabslide}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
Mettre 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