frendeitpt

scroller ~ vos infos défilent verticalement

Avec cette action vous pouvez faire défiler verticalement les données saisies entre les shortcodes

🆙 scroller : Défilement vertical d'une liste d'éléments

Cliquer pour lire la documentation

syntaxe : {up scroller}suite d'éléments{/up scroller}
author LOMART version UP-1.7 license GNU/GPLv3 credit Super Treadmill de nishadmenezes adapté pour UP tags layout-dynamic
  • scroller = 3: nombre d'élément ou hauteur du bloc en px
  • class: classe(s) pour la balise principale
  • style: style inline pour la balise principale
  • css-head (base-css): règles CSS définies par le webmaster (ajout dans le head)
  • runAfterPageLoad = false:
  • direction = up: sens du défilement (up/down)
  • speed = medium: slow (5000), medium (3000), fast (1200) ou durée en millisecondes
  • viewable = 3: nombre d'élément ou hauteur du bloc en px (idem scroller)
  • pause = 1: stop on hover

    Saisie du contenu

    Les éléments à scroller sont insérer entre le shortcode ouvrant et le shortcode ferment. Nous allons voir comment les saisir.

    du contenu HTML

    Le résultat

    Ligne 1

    Ligne 2

    Ligne 3

    Ligne 4

    Ligne 5

    Ligne 6

    Ligne 7

    Ligne 8

    Le shortcode
    {up scroller=4
 | class=bd-gris ph1
 | css-head=#id p[margin:0]}
  <p>Ligne 1</p>
  <p class="bg-bleuPale tr">Ligne 2</p>
  <div style="background:yellow">Ligne 3</div>
  <p>Ligne 4</p>
  <p>Ligne 5</p>
  <p>Ligne 6</p>
  <p>Ligne 7</p>
  <p>Ligne 8</p>
{/up scroller}
    Les explications

    L'action scroller reçoit comme paramètre le nombre de ligne à afficher.

    class ajoute un filet gris et un padding à gauche et à droite.

    css-head est une règle générale à cette instance de l'action (#id) qui supprime les marges pour les lignes du contenu entre les shortcodes

    Tous les blocs de premier niveau sont considérés comme des éléments par scroller.

    un élément structure (ul, ol, dl, ...)

    Le résultat
    • Ligne 1
    • Ligne 2
    • Ligne 3
    • Ligne 4
    • Ligne 5
    • Ligne 6
    • Ligne 7
    • Ligne 8
    Le shortcode
    {up scroller=60px | class=bg-beige}
<ul style="list-style:inside square; padding-left:0">
  <li class="t-rouge list-none">{up icon=ok,green}Ligne 1</li>
  <li>Ligne 2</li>
  <li>Ligne 3</li>
  <li>Ligne 4</li>
  <li>Ligne 5</li>
  <li>Ligne 6</li>
  <li>Ligne 7</li>
  <li>Ligne 8</li>
</ul>
{/up scroller}
    Les explications

    Pour cet exemple, nous indiquons la hauteur du scroller en pixel et non en nombre de lignes.

    Le contenu ne comportant qu'un bloc de premier niveau, il est utilisé comme bloc principal pour le scroller et ses blocs internes deviennent les lignes.

    Le style de la balise UL est conservé. Ce qui permet de changer la puce et supprimer la marge gauche

    Avec tag séparateur

    Le résultat
    Bloc 1

    Bloc 2

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Aliquam erat volutpat. Nunc auctor. Mauris pretium quam et urna. Fusce nibh.

    Bloc 3

    Très peu de texte

    Le shortcode
    {up scroller=1 | class=bg-beige}
	<h5>Bloc 1</h5>
	{up lorem-placeimg=tech | style=height:200px}
	{===}
	<p><strong>Bloc 2</strong></p>
	<p>Lorem ...</p>
	{===}
	<p>Bloc 3</p>
{/up scroller}
    Les explications

    Chacune des parties séparées par les tags {====} (minima 3 signes égal) est considérée comme un élément à scroller. Le début de chaque élément s'arrête bien en haut du bloc scroller.

    Le nombre d'éléments à afficher simultanément étant précisé, la hauteur du bloc est celle du premier élément.

    Avec d'autres actions

    csv2list

    Le résultat
    • 2.3.3 – 2.3.7Gingerbread
    • 4.0.3 – 4.0.4Ice Cream Sandwich
    • 4.1.x, 4.2.x et 4.3Jelly Bean
    • 4.4KitKat
    • 5.0 et 5.1Lollipop
    • 6.0Marshmallow
    • 7.0 et 7.1Nougat
    • 8.0 et 8.1Oreo
    • 9Pie
    Le shortcode
    {up scroller=5}
{up csv2list=https://lomart.fr/images/demo/android-version.csv | leaders}
{/up scroller}
    Les explications

    On ne peut guère faire plus simple. L'action csv2list retourne une structure HTML liste à partir d'un fichier CSV. Ce code est ensuite pris en charge par scroller

    jcontent-by-categories

    Le résultat
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    {title} {subtitle}
    {date-crea} par {author}
    Le shortcode
    {up scroller=5
 | style=border:2px solid #369
 | css-head=#id .treadmill-unit[outline:1px solid #369;padding-left:5px]}
  {up jcontent-by-categories=8 | maxi=8 | main-tag=0}
    <b>{title}</b> {subtitle}<br><small>{date-crea} par {author}</small>
  {/up jcontent-by-categories}
{/up scroller}
    Les explications

    Nous utilisons l'action jcontent-by-categories pour récupérer les 8 derniers articles. La seule subtilité est de récupérer chaque élément séparément. Pour cela nous utilisons main-tag=0

    Au niveau des options scroller, juste des ajouts de CSS pour soigner la présentation.

    Le résultat

    upsearch
    recherche shortcode et contenu

    \Recherche une action dans le contenu des articles et/ou modules

    Lire la suite crée le 28 mai 2021 par lomart

    jcontent-info
    afficher des éléments de l'article en cours

    \Affiche des informations sur l'article courant

    Lire la suite crée le 25 mai 2021 par lomart

    treeview
    affiche une liste sous forme d'un arbre

    \transforme une liste à puces en treeview

    Lire la suite crée le 11 mai 2021 par lomart

    folder-list
    affiche le contenu d'un dossier sur le serveur

    \pour lister le contenu d'un dossier sur le serveur

    Lire la suite crée le 11 mai 2021 par lomart

    jcontent-by-subcat
    articles par catégorie et sous-catégories

    \Liste des articles par catégorie et sous-catégories

    Lire la suite crée le 11 mai 2021 par lomart

    Le shortcode
    {up scroller=230px
 | css-head=#id .treadmill-unit:nth-of-type(even)[opacity:0.2]}

  {up jcontent-by-categories=8 | maxi=5 | main-tag=0
   | template=article-avec-image}

{/up scroller}
    Les explications

    Pour cet exemple, hormis l'utilisation d'un template défini dans le prefs.ini de l'action jcontent-by-categories, nous utilisons les mêmes options.

    La difficulté est de ne pas maitriser la hauteur des différents éléments. L'action utilise la hauteur du premier pour tous les éléments. Comme cela peut poser des problèmes, j'utilise une hauteur en pixels scroller=230px et une astuce CSS qui diminue l'opacité du 2ème élément (qui est pair).

    et les autres

    Potentiellement, toutes les actions qui retournent un contenu structuré sont utilisables

    😉Au besoin, créez ou modifiez une action pour obtenir vos données dans un format accepté par scroller

    Les options

    Peu d'options pour cette action

    Option Commentaire
    scroller nombre d'éléments visibles ou si l'argument se termine par px: hauteur du bloc principal en pixels
    class, style, css-head pour styler le bloc principal
    direction up (défaut) ou down. sens de défilement des éléments
    speed medium par défaut. sinon slow (5000), medium (3000), fast (1200) ou durée en millisecondes
    pause 1 par défaut, le défilement s'arrête lors du survol par la souris. 0 pour le continuer.