Utilisation d'onglets pour paginer les informationsLorsque un grand nombre d'informations doit être affiché, il est possible de "paginer" le bloc d'informations. Un nombre prédéterminé d'informations prendra alors place dans chacune des "pages" et un système d'onglets peut être utilisé pour naviguer entre ces pages. Ce nombre est fixé par l'attribut maximum-par-onglets. Dès que cet attribut est présent et que le nombre des informations est supérieur à celui-ci, les informations s'afficheront en plusieurs pages avec, éventuellement, des onglets afin de pouvoir passer d'une page à l'autre. On peut choisir le type d'onglets grâce à l'attribut onglets, comme dans une présentation. De même, on peut choisir le délai d'affichage avant de passer d'un onglet à l'autre ainsi que l'effet visuel de transition grâce aux attributs délai-présentation et effet-transition (voir présentation). |
Dans cet exemple, on va chercher 3 informations et on autorise une seule information par onglet. On aura donc trois onglets différents. Comme rien n'est précisé, les onglets ne sont pas affichés et la transition d'un onglet à l'autre se fera automatiquement toutes les 4 secondes. |
Exemple <valves maximum="3" style="class1" maximum-par-onglets="1"> <source-babelbox box="1" type="2"/> </valves> loading...ajax1 |
Même exemple que le précédent, mais on utilise des onglets de type "disque", un délai de 8 secondes et une transition du type "droite1Lente". |
Exemple <valves maximum="3" style="class1" maximum-par-onglets="1" onglets="disques" délai-transition="8" effet-transition="droite1Lente"> <source-babelbox box="1" type="2"/> </valves> loading...ajax2 |
Même exemple que le précédent, mais cette fois-ci, le délai de transition est égal à "manuel". La transition d'un onglet à l'autre ne se fera que si l'utilisateur clique sur un des onglets. |
Exemple <valves maximum="3" style="class1" maximum-par-onglets="1" onglets="disques" délai-transition="manuel" effet-transition="droite2TrèsLente"> <source-babelbox box="1" type="2"/> </valves> loading...ajax3 |
Ici, toutes les actualités de Babelbox sont affichées et présentées 4 par 4 dans des onglets différents. La transition pour passer d'un onglet à l'autre est égale à "fondue1Lente". |
Exemple <valves style="voile" bords="arrondis" maximum-par-onglets="4" onglets="détachés" délai-transition="manuel" effet-transition="fondue1Lente"> <source-babelbox box="1" type="2"/> </valves> loading...ajax4 |