tabslide ~ des onglets sur le bord du site

Une action pour afficher des onglets sur les bords du navigateur

➠ tabslide : ajoute des onglets pour ouvrir un panneau sur les bords de la fenetre DEMO
syntaxe {up tabslide=btn-text | tabLocation=top}contenu{/up tabslide}
author Lomart version 1.0 - 07/2017 credit script de hawk-ip license GNU/GPLv3
  • 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() {:

    Sur un script de hawk-ip (licence GPL v3.0)

    Cette action permet d'ajouter très facilement des onglets sur les 4 côtés de la fenêtre du navigateur.

    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 | panel-class=bd-bleuClair b2}
    {loadposition login}
    {/up tabslide}
    
    connexion

    Login Form

    En naut

    {up tabslide=test | tabLocation=top | tab-style=background-color:#069 | panel-style=border:2px solid #069 }</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}
    test

    contenu du volet

    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}
    action

    contenu du volet

    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

    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