Zend_View-Helpers-HeadStyle.xml 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!-- EN-Revision: 17175 -->
  3. <!-- Reviewed: no -->
  4. <sect3 id="zend.view.helpers.initial.headstyle">
  5. <title>L'aide de vue HeadStyle</title>
  6. <para>
  7. L'élément HTML <code>&lt;style&gt;</code> est utilisé pour inclure des feuilles de
  8. styles <acronym>CSS</acronym> à l'intérieur de l'élément HTML <code>&lt;head&gt;</code>.
  9. </para>
  10. <note>
  11. <title>Utilisez HeadLink pour lier des fichiers CSS externes</title>
  12. <para>
  13. <link linkend="zend.view.helpers.initial.headlink">HeadLink</link> devrait être
  14. utilisé pour inclure des feuilles de styles externes. <code>HeadStyle</code> ne devrait
  15. être utilisé que si vous souhaitez définir des feuilles de styles internes.
  16. </para>
  17. </note>
  18. <para>
  19. L'aide de vue <code>HeadStyle</code> supporte les méthodes suivantes pour l'ajout et
  20. le paramétrage des déclarations de feuilles de styles :
  21. </para>
  22. <itemizedlist>
  23. <listitem>
  24. <para><methodname>appendStyle($content, $attributes = array())</methodname></para>
  25. </listitem>
  26. <listitem>
  27. <para><methodname>offsetSetStyle($index, $content, $attributes = array())</methodname></para>
  28. </listitem>
  29. <listitem>
  30. <para><methodname>prependStyle($content, $attributes = array())</methodname></para>
  31. </listitem>
  32. <listitem>
  33. <para><methodname>setStyle($content, $attributes = array())</methodname></para>
  34. </listitem>
  35. </itemizedlist>
  36. <para>
  37. Dans tous les cas, <varname>$content</varname> est le contenu des déclarations <acronym>CSS</acronym>.
  38. <varname>$attributes</varname> sont les attributs additionnels que vous pouvez fournir à la balise
  39. <code>style</code> : "lang", "title", "media", ou "dir" sont autorisés.
  40. </para>
  41. <note>
  42. <title>Paramétrez des commentaires conditionnels</title>
  43. <para>
  44. <code>HeadStyle</code> vous permet d'englober vos balises de style avec des
  45. commentaires conditionnels, ce qui permet de les masquer pour des navigateurs
  46. spécifiques. Pour ajouter les balises conditionnelles, fournissez le paramètre
  47. <code>conditional</code> en tant que partie du paramètre <varname>$attrs</varname> lors de
  48. l'appel de la méthode.
  49. </para>
  50. <example id="zend.view.helpers.initial.headstyle.conditional">
  51. <title>HeadStyle avec des commentaires conditionnels</title>
  52. <programlisting language="php"><![CDATA[
  53. // adding scripts
  54. $this->headStyle()->appendStyle($styles, array('conditional' => 'lt IE 7');
  55. ]]></programlisting>
  56. </example>
  57. </note>
  58. <para>
  59. <code>HeadStyle</code> permet aussi la capture des déclarations de style ; ceci peut
  60. être utile si vous voulez créer des déclarations par programme, et ensuite les placer à un
  61. autre endroit. L'utilisation de cette fonctionnalité est montrée dans un exemple
  62. ci-dessous.
  63. </para>
  64. <para>
  65. Enfin, vous pouvez utiliser la méthode <methodname>headStyle()</methodname> pour ajouter
  66. rapidement des éléments de déclarations ; la signature de la méthode est
  67. <methodname>headStyle($content$placement = 'APPEND', $attributes = array())</methodname>.
  68. <varname>$placement</varname> peut être "APPEND", "PREPEND", ou "SET".
  69. </para>
  70. <para>
  71. <code>HeadStyle</code> surcharge chacune des méthodes <methodname>append()</methodname>,
  72. <methodname>offsetSet()</methodname>, <methodname>prepend()</methodname>, et <methodname>set()</methodname> pour imposer
  73. l'utilisation des méthodes spéciales listées ci-dessus. En interne, il stocke chaque élément
  74. sous la forme d'un <code>stdClass</code>, qui est ensuite sérialisé en utilisant la méthode
  75. <methodname>itemToString()</methodname>. Ceci vous permet de réaliser des vérifications sur les éléments
  76. de la pile, et optionnellement modifier ces éléments en modifiant simplement l'objet
  77. retourné.
  78. </para>
  79. <para>
  80. L'aide <code>HeadStyle</code> est une implémentation concrète de l'aide <link
  81. linkend="zend.view.helpers.initial.placeholder">Placeholder</link>.
  82. </para>
  83. <example id="zend.view.helpers.initial.headstyle.basicusage">
  84. <title>Utilisation basique de l'aide HeadStyle</title>
  85. <para>
  86. Vous pouvez spécifier une nouvelle balise de style à n'importe quel moment
  87. :
  88. </para>
  89. <programlisting language="php"><![CDATA[
  90. // ajout de styles
  91. $this->headStyle()->appendStyle($styles);
  92. ]]></programlisting>
  93. <para>
  94. L'ordre est très important avec les <acronym>CSS</acronym> ; vous pouvez devoir assurer que les
  95. déclarations soient chargées dans un ordre spécifique dû à l'ordre de la cascade ;
  96. employez les diverses directives "append", "prepend", et "offsetSet" pour faciliter
  97. cette tâche :
  98. </para>
  99. <programlisting language="php"><![CDATA[
  100. // Mettre les styles dans le bon ordre
  101. // - placer à un offset particulier
  102. $this->headStyle()->offsetSetStyle(100, $stylesPerso);
  103. // - placer à la fin
  104. $this->headStyle()->appendStyle($stylesFinaux);
  105. // - placer au début
  106. $this->headStyle()->prependStyle($stylesInitiaux);
  107. ]]></programlisting>
  108. <para>
  109. Quand vous êtes finalement prêt à afficher toutes les déclarations de styles dans
  110. votre script de layout, faîtes un simple <code>echo</code> de l'aide :
  111. </para>
  112. <programlisting language="php"><![CDATA[
  113. <?php echo $this->headStyle() ?>
  114. ]]></programlisting>
  115. </example>
  116. <example id="zend.view.helpers.initial.headstyle.capture">
  117. <title>Capturer les déclarations de style en utilisant l'aide HeadStyle</title>
  118. <para>
  119. Parfois vous devez produire des déclarations de styles <acronym>CSS</acronym> par programme. Même si
  120. vous pouvez employer la concaténation de chaînes, les "heredocs", ou tout autre
  121. équivalent, il est souvent plus facile de faire juste la création des styles et de les
  122. entourer par des balises <acronym>PHP</acronym>. <code>HeadStyle</code> vous permet de le faire, et capture
  123. ainsi l'élément dans la pile :
  124. </para>
  125. <programlisting language="php"><![CDATA[
  126. <?php $this->headStyle()->captureStart() ?>
  127. body {
  128. background-color: <?php echo $this->bgColor ?>;
  129. }
  130. <?php $this->headStyle()->captureEnd() ?>
  131. ]]></programlisting>
  132. <para>Les suppositions suivantes sont considérées :</para>
  133. <itemizedlist>
  134. <listitem>
  135. <para>
  136. Les déclarations de styles sont ajoutées à la pile. Si vous souhaitez
  137. qu'elles remplacent la pile ou qu'elles soient ajoutées en début de pile, vous
  138. devez fournir "SET" ou "PREPEND", en tant que premier argument de
  139. <methodname>captureStart()</methodname>.
  140. </para>
  141. </listitem>
  142. <listitem>
  143. <para>
  144. Si vous souhaitez spécifier un quelconque attribut additionnel pour la
  145. balise <code>&lt;style&gt;</code>, fournissez-le sous la forme d'un tableau en
  146. deuxième argument de <methodname>captureStart()</methodname>.
  147. </para>
  148. </listitem>
  149. </itemizedlist>
  150. </example>
  151. </sect3>