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 fenêtre

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: UP-1.0 @credit: script de hawk-ip @license: GNU/GPLv3 @tags: Body

    l'onglet

    • tabslide: titre de l'onglet
    • tab-style: classes et styles inline pour onglets
    • tab-class: classe(s) pour onglet (obsolète)

    le panneau

    • id: identifiant
    • panel-style: classes et styles inline pour panneau
    • panel-class: classe(s) pour panneau (obsolète)

    Options JS disparues - conservés pour compatibilité

    • speed = 300: OBSOLETE voir bounceSpeed
    • positioning = fixed: or absolute, so tabs move when window scrolls
    • toggleButton = .tab-opener: not often used

    paramétres JS : définition de l'onglet

    • tabLocation = left: position : left, right, top ou bottom
    • onLoadSlideOut: slide out after DOM load
    • clickScreenToClose = 1: fermer l'onglet lorsque le reste de l'écran est cliqué
    • tabHandle = .handle: Sélecteur JQuery pour l'onglet, peut utiliser #
    • action = click: mode ouverture : 'hover' ou 'click'
    • hoverTimeout = 5000: sélai en ms pour garder l'onglet ouvert après la fin du survol - uniquement si action = 'hover'
    • offset = 200px: distance pour top or left (bottom or right si offsetReverse est vrai)
    • offsetReverse: true= aligné a droite ou en bas
    • otherOffset = null: si défini, la taille du panneau est définie pour maintenir cette distance à partir du bas ou de la droite (haut ou gauche si offsetReverse)
    • handleOffset = null: Si null, détecte la bordure du panneau pour bien aligner la poignée, sinon la distance en px
    • handleOffsetReverse: si vrai, poignée alignée avec la droite ou le bas du panneau

    paramétres JS : Animation

    • bounceDistance = 50px: distance autorisée pour le rebond
    • bounceTimes = 4: nombre de rebonds si 'bounce' est appelé
    • bounceSpeed = 300: vitesse d'animation des rebonds

    paramétres JS : image pour l'onglet

    • pathToTabImage = null: image facultative à afficher dans l'onglet
    • imageHeight = null: hauteur image
    • imageWidth = null: largeur image

    paramétres JS : pour expert

    • onOpen = function () {}: appelé après l'ouverture
    • onClose = function () {}: appelé après la fermeture
    • onSlide = function () {}: appelé après l'ouverture ou la fermeture

    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}
{loadmoduleid 143}
{/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

    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.

    test

    contenu du volet

    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

    Sommaire

    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

    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

    Pour info, cette page utilise 7 action(s) :
    upactionslist (1) tabslide (4) toc (1) jcontent-info (1)
    Détails