Style d'une informationOutre la possibilité de donner un style à l'ensemble du bloc d'informations et d'utiliser une puce, une numérotation ou une ligne de séparation entre les informations, il est également possible d'afficher chaque information dans un bloc individuel, avec un style particulier. Pour cela, il faut utiliser un élément <affichage> qui va supporter tout les attributs de mise en forme d'un bloc. Outre sa fonction de mise en page, cet élément <affichage> servira également à choisir les données à afficher pour chaque information (titre, aperçu, contenu, vignette, auteur, date de publication...) On peut placer cet élément dans l'élément <valves>, auquel cas il s'appliquera à toutes les informations de toutes les sources. On peut également le placer à l'intérieur d'un élément <source-xxx>, auquel cas il est valable pour les informations de cette source-là (chaque source peut ainsi avoir son propre style). On peut également utiliser plusieurs éléments <affichage> pour changer de style en fonction de différentes conditions (styles différents pour la première ou la dernière information, styles différents pour les informations paires et impaires, etc.). L'élément <affichage> pour sélectionner le style d'une informationPour mettre chaque information dans un bloc avec un style particulier, on utilise un élément <affichage> avec tous les attributs nécessaires à la mise en page désirée. Ces attributs sont les mêmes que ceux utilisés dans tous les blocs: style, bords et ses variantes, etc. Remarque: outre le style, cet élément <affichage> sert également à sélectionner les données à afficher pour chaque information. |
L'exemple ci-contre utilise, pour chaque information, le style class4. |
Code de cet exemple <valves maximum="3"> <affichage style="class4"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax1 |
L'exemple ci-contre utilise le style class4+titre, ce qui va avoir pour effet d'intégrer le titre de l'information dans le style du bloc. Ceci sera valable pour tous les styles dont le nom se termine par '+titre'. |
Code de cet exemple <valves maximum="3"> <affichage style="class4+titre"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax2 |
Combinaison de stylesVous pouvez combiner un style pour le bloc d'informations et un style individuel pour chaque information. De même, vous pouvez opter pour une puce, une numérotation ou une ligne de séparation entre les informations et un style pour chaque information. |
L'exemple ci-contre combine un style pour le bloc d'informations (voile) et un style pour chaque information (clair). Des bords arrondis sont utilisés pour les deux. |
Code de cet exemple <valves maximum="3" style="voile" bords="arrondis"> <affichage style="clair" bords="arrondis"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax3 |
Ici, on combine un style pour les informations avec une numérotation et une ligne de séparation. |
Code de cet exemple <valves séparateur="colorDots5" numérotation="I."> <affichage style="class6" bords="arrondis"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax4 |
Actualités dans des blocs refermablesPour alléger une page, on peut afficher les informations dans des blocs refermables (comme c'est le cas de tous les blocs). Pour cela, on utilise les attributs refermable, état, groupe... Attention que ceci n'est pas compatible avec l'utilisation d'un <résumé> de l'actualité (qui lui aussi utilise le principe des blocs refermables). |
Ici, les blocs d'informations sont refermables grâce à l'attribut refermable. |
Code de cet exemple <valves> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"> <affichage style="class1" bords="arrondis" refermable="oui"/> </source-xml> </valves> |
Ce qui donne: |
loading...ajax5 |
Ici, les blocs d'informations sont fermés par défaut et le titre de l'information apparaît dans la zone titre du bloc (grâce à l'extension +titre dans le nom du style). |
Code de cet exemple <valves> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"> <affichage style="class4+title" bords="arrondis" refermable="oui" état="fermé"/> </source-xml> </valves> |
Ce qui donne: |
loading...ajax6 |
Dans cet exemple, l'utilisation de l'attribut cible="ouvrirFermer" permet d'ouvrir et de fermer l'information en cliquant n'importe où sur l'information (et pas uniquement sur l'icône). |
Code de cet exemple <valves> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"> <affichage style="class4+titre" bords="arrondis" refermable="oui" cible="ouvrirFermer" groupe="news" état="premier-ouvert-sinon-fermé"> <titre/> <vignette/> <contenu/> </affichage> </source-xml> </valves> |
Un seul bloc sera ouvert à la fois, grâce à l'attribut groupe (quand vous ouvrez une information les autres se ferment automatiquement). Par défaut, le premier sera ouvert et les autres fermés grâce à la valeur de l'attribut état. |
loading...ajax7 |
L'exemple ci-contre utilise, pour chaque information, le style colorBar4 et des bords arrondis. Trois sources différentes sont utilisées, mais le style sera le même pour chacune des sources. |
Code de cet exemple <valves maximum="3"> <affichage style="colorBar4" bords="arrondis"/> <source-babelbox box="1" type="2" maximum="1"/> <source-rss href="http://www.lesoir.be/feed/La%20Une/destination_une_block" maximum="1"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"/> </valves> |
Ce qui donne: |
loading...ajax8 |
L'exemple ci-contre utilise trois sources différentes. Chaque source aura son propre style (l'élément <affichage> est en effet placé dans chaque élément <source-xxx>). |
Code de cet exemple <valves maximum="4"> <source-babelbox box="1" type="2" maximum="1"> <affichage style="colorBar2" bords="arrondis"/> </source-babelbox> <source-rss href="http://www.lesoir.be/feed/La%20Une/destination_une_block" maximum="1"> <affichage style="colorBar3" bords="arrondis"/> </source-rss> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"> <affichage style="colorBar4" bords="arrondis"/> </source-xml> </valves> |
Ce qui donne: |
loading...ajax9 |
L'exemple ci-contre utilise deux fois la même source, mais avec un style différent, ce qui crée une alternance visuelle entre chaque information. Remarque: comme expliqué ici, une même information ne sera pas affichée deux fois. |
Code de cet exemple <valves maximum="4"> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"> <affichage style="class1"/> </source-xml> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" maximum="1"> <affichage style="blanc"/> </source-xml> </valves> |
Ce qui donne: Remarque: il existe une autre manière de procéder, encore plus simple, pour réaliser la même chose avec une seule source. |
loading...ajax10 |
L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles. |
Code de cet exemple <valves > <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml" catégories="unes"> <affichage style="class6"/> </source-xml> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"> <affichage style="class1"/> </source-xml> </valves> |
Ce qui donne: Remarque: si vous désirez mettre en avant la première information, il existe une autre manière de procéder, encore plus simple. |
loading...ajax11 |
L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles. |
Code de cet exemple <valves > <affichage style="class1"/> <affichage style="class6" condition="premier"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax12 |
L'exemple ci-contre utilise le style "class6" pour les articles à la une, et le style "class1" pour les autres articles. |
Code de cet exemple <valves > <affichage style="class1" condition="pair"/> <affichage style="class6" condition="impair"/> <source-xml href="http://www.ulb.ac.be/cache/news-test1.xml"/> </valves> |
Ce qui donne: |
loading...ajax13 |