tabslide ~ des onglets sur le bord du site

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)

➠ tabslide : ajoute des onglets pour ouvrir un panneau sur les bords de la fenetre

Cliquer pour lire la documentation

syntaxe {up tabslide=btn-text | tabLocation=top}contenu{/up tabslide}
utilisation :
- un sommaire sur le coté du site
- un module connexion

author Lomart version 1.0 - 07/2017 credit script de hawk-ip license GNU/GPLv3

tabslide: titre de l'onglet
tab-style: classes et styles inline pour onglet
panel-style: classes et styles inline pour panneau
tab-class: classe(s) pour onglet (obsolète)
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 = 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-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

connexion

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.

test

contenu du volet

A droite

{up tabslide=action| tabLocation=right | onLoadSlideOut | offset=140px | action=hover | tab-style=background-color:#f00;border-radius:10px 10px 0 0 | 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 lorempixel=cats | L=200 | H=150 | style=height:100px;height:75px}</p>
{/up tabslide}

action

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}

en bas