La balise de classe / The class tag : <b:class>

La balise singleton <b:class> est une balise d'instruction qui permet d'ajouter à la balise parente une valeur dans un attribut class.

La syntaxe

XML

<div>

  <b:class cond='CONDITION' name='CLASS_NAME'/>

</div>

• La balise <b:class> travaille dans l'ensemble du code XML, excepté à l'intérieur d'un balisage <![CDATA[.

• Plusieurs balises <b:class> peuvent se cumuler.

• Les balises <b:class> ne peuvent pas s'imbriquer.

Les attributs

La balise doit contenir plusieurs attributs dont certains sont obligatoires.

<b:class cond='CONDITION'
         name='CLASS_NAME'/>

<b:class cond='CONDITION'
         expr:name='EXPRESSION'/>

Attributs	Description	Classification	Préfixe « expr: »	Implantation
name	Nom de classe. La valeur attendue est le nom de la classe qui sera ajouté à la balise parente. Accompagné du préfixe expr:, la valeur peut-être : une donnée de type string. une expression Blogger dont le résultat est de type string.	Classification : HTML classic	Préfixe « expr: » : Autorisé	Implantation : Obligatoire
cond	Condition d'exécution de la balise. La valeur attendue doit être boolean (true ou false). Elle peut être une valeur explicite, une donnée ou une expression Blogger.	Classification : XML Blogger Expression	Préfixe « expr: » : Autorisé	Implantation : Facultative

Quelques exemples

Ajouter une classe

<div>

  <b:class name='footer'/>

</div>

La nouvelle classe footer sera ajoutée à la balise parente <div> dans le rendu HTML.

Résultat

<div class='footer'>

</div>

Ajouter une classe avec une condition

<div>

  <b:class cond='data:view.isHomepage' name='footer'/>

</div>

La nouvelle classe footer sera ajoutée à la balise parente <div> dans le rendu HTML uniquement si la page courante est la page d'accueil.

Résultat si vrai

<div class='footer'>

</div>

Résultat si faux

<div>

</div>

Ajouter une classe à une classe existante

<div class='section'>

  <b:class name='footer'/>

</div>

La nouvelle classe footer sera ajoutée à la balise parente <div> dans le rendu HTML. Les classes existantes dans la balise parente sont conservées.

Résultat

<div class='section footer'>

</div>

Astuce :

Pour écraser une classe existante, utilisez la balise d'attribut.

Écraser la classe existante

<div class='footer'>

  <b:attr name='class' value='header'/>

</div>

Cumuler plusieurs classes

<div class='section'>

  <b:class name='footer'/>
  <b:class name='left'/>

</div>

Les nouvelles classes footer et left seront ajoutées à la balise parente <div> dans le rendu HTML. Les classes existantes dans la balise parente sont conservées.

Résultat

<div class='section footer left'>

</div>

Ajouter une classe variable

<div>

  <b:class expr:name='data:view.isHomepage ? "superfooter" : "footer"'/>

</div>

L'attribut name a été converti en une expression Blogger pouvant contenir une donnée ou une opération. Dans cet exemple, l'expression est un opérateur ternaire. Le nom de la nouvelle classe sera superfooter si la page courante est la page d'accueil. Dans le cas contraire, le nom de nouvelle classe sera footer.

Résultat si page d'accueil

<div class='superfooter'>

</div>

Résultat si autre page

<div class='footer'>

</div>

Les autres balises

• <b:attr>
• <b:class>
• <b:comment>
• <b:defaultmarkups>
<b:defaultmarkup>
• <b:eval>
• <b:if>
<b:elseif>
<b:else>
• <b:includable>
<b:include>
• <b:loop>
• <b:message>
<b:param>
• <b:section>
• <b:skin>
<b:template-skin>
• <b:switch>
<b:case>
<b:default>
• <b:tag>
• <b:template-script>
• <b:widget>
• <b:widget-settings>
<b:widget-setting>
• <b:with>
• <data:foo>
• <![CDATA[]]>

Retourner à l'introduction