frendeitpt

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 - MAJ 05/2020 @credit: script de hawk-ip @license: GNU/GPLv3 @tags: Body
  • tabslide: titre de l'onglet
  • tab-style: classes et styles inline pour onglets
  • tab-class: classe(s) pour onglet (obsolète)
  • panel-style: classes et styles inline pour panneau
  • panel-class: classe(s) pour panneau (obsolète)
  • speed = 300: OBSOLETE voir bounceSpeed
  • positioning = fixed: or absolute, so tabs move when window scrolls
  • toggleButton = .tab-opener: not often used
  • tabLocation = left: left, right, top ou bottom
  • tabHandle = .handle: JQuery selector for the tab, can use #
  • action = click: action open, 'hover' or 'click'
  • hoverTimeout = 5000: ms to keep tab open after no longer hovered - only if action = 'hover'
  • 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
  • bounceSpeed = 300: time to animate bounces
  • 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
  • onOpen = function() {}: handler called after opening
  • onClose = function() {}: handler called after closing
  • onSlide = function() {}: handler called after opening or closing

    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