Zend_View-Helpers-HeadStyle.xml 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <sect3 id="zend.view.helpers.initial.headstyle">
  2. <title>HeadStyle Helper</title>
  3. <para>
  4. O elemento HTML <code>&lt;style&gt;</code> é usado para incluir
  5. folhas de estilo CSS de forma inline no elemento HTML <code>&lt;head&gt;</code>.
  6. </para>
  7. <note>
  8. <title>Use o HeadLink para "linkar" arquivos CSS</title>
  9. <para>
  10. O <link linkend="zend.view.helpers.initial.headlink">HeadLink</link>
  11. deve ser usado para criar elementos <code>&lt;link&gt;</code> para
  12. a inclusão de folhas de estilo externas. <code>HeadScript</code> é usado quando
  13. você deseja definir folhas de estilo inline.
  14. </para>
  15. </note>
  16. <para>
  17. O assistente <code>HeadStyle</code> dá suporte aos seguintes métodos para a configuração
  18. e adição de declarações de folhas de estilo:
  19. </para>
  20. <itemizedlist>
  21. <listitem><para><code>appendStyle($content, $attributes =
  22. array())</code></para></listitem>
  23. <listitem><para><code>offsetSetStyle($index, $content, $attributes =
  24. array())</code></para></listitem>
  25. <listitem><para><code>prependStyle($content, $attributes =
  26. array())</code></para></listitem>
  27. <listitem><para><code>setStyle($content, $attributes =
  28. array())</code></para></listitem>
  29. </itemizedlist>
  30. <para>
  31. Em todos os casos, <code>$content</code> é a verdadeira declaração CSS.
  32. $attributes são quaisquer atributos adicionais que você dejesa prover para a
  33. tag <code>style</code>: lang, title, media, ou dir são todos admissíveis.
  34. </para>
  35. <para>
  36. <code>HeadStyle</code> também permite a captura de declarações de estilo; isso
  37. pode ser útil se você quiser criar as declarações através de programação,
  38. e então colocalas em outro lugar. A utilização disso será mostrada em um exemplo abaixo.
  39. </para>
  40. <para>
  41. Finalmente, você pode usar o método <code>headStyle()</code> para
  42. acrescentar rapidamente elementos de declaração; a assinatura para isso é
  43. <code>headStyle($content$placement = 'APPEND', $attributes = array())</code>.
  44. <code>$placement</code> deve ser 'APPEND', 'PREPEND', ou 'SET'.
  45. </para>
  46. <para>
  47. <code>HeadStyle</code> sobrescreve <code>append()</code>,
  48. <code>offsetSet()</code>, <code>prepend()</code>, e <code>set()</code>
  49. para forçar o uso dos métodos especiais listados acima. Internamente
  50. ele armazena cada item como um token <code>stdClass</code> , que depois
  51. é serializado usando o método <code>itemToString()</code>. Isso permite
  52. que você faça verificações nos itens da pilha, e opcionalmente modifique
  53. estes itens simplesmente modificando o objeto retornado.
  54. </para>
  55. <para>
  56. O assistente <code>HeadStyle</code> é uma implementação concreta
  57. do assistente <link linkend="zend.view.helpers.initial.placeholder">Placeholder</link>.
  58. </para>
  59. <example id="zend.view.helpers.initial.headstyle.basicusage">
  60. <title>Uso Básico do Assistente HeadStyle</title>
  61. <para>
  62. Você pode especificar uma nova tag de estilo a qualquer momento:
  63. </para>
  64. <programlisting role="php"><![CDATA[
  65. <?php // adding scripts
  66. $this->headStyle()->appendStyle($styles);
  67. ?>
  68. ]]></programlisting>
  69. <para>
  70. A ordenação é muito importante no CSS; você talvez tenha que
  71. assegurar que as declarações sejam carregadas em uma ordem específica
  72. devido à ordem do CSS; use as diretivas append, prepend, e offsetSet
  73. para lhe auxiliar nessa tarefa:
  74. </para>
  75. <programlisting role="php"><![CDATA[
  76. <?php // Putting styles in order
  77. // place at a particular offset:
  78. $this->headStyle()->offsetSetStyle(100, $customStyles);
  79. // place at end:
  80. $this->headStyle()->appendStyle($finalStyles);
  81. // place at beginning
  82. $this->headStyle()->prependStyle($firstStyles);
  83. ?>
  84. ]]></programlisting>
  85. <para>
  86. When you're finally ready to output all style declarations in your
  87. layout script, simply echo the helper:
  88. </para>
  89. <programlisting role="php"><![CDATA[
  90. <?= $this->headStyle() ?>
  91. ]]></programlisting>
  92. </example>
  93. <example id="zend.view.helpers.initial.headstyle.capture">
  94. <title>Capturing Style Declarations Using the HeadStyle Helper</title>
  95. <para>
  96. Sometimes you need to generate CSS style declarations
  97. programmatically. While you could use string concatenation,
  98. heredocs, and the like, often it's easier just to do so by creating
  99. the styles and sprinkling in PHP tags. <code>HeadStyle</code> lets
  100. you do just that, capturing it to the stack:
  101. </para>
  102. <programlisting role="php"><![CDATA[
  103. <?php $this->headStyle()->captureStart() ?>
  104. body {
  105. background-color: <?= $this->bgColor ?>;
  106. }
  107. <?php $this->headStyle()->captureEnd() ?>
  108. ]]></programlisting>
  109. <para>
  110. The following assumptions are made:
  111. </para>
  112. <itemizedlist>
  113. <listitem><para>
  114. The style declarations will be appended to the stack. If you
  115. wish for them to replace the stack or be added to the top,
  116. you will need to pass 'SET' or 'PREPEND', respectively, as
  117. the first argument to <code>captureStart()</code>.
  118. </para></listitem>
  119. <listitem><para>
  120. If you wish to specify any additional attributes for the
  121. <code>&lt;style&gt;</code> tag, pass them in an array as
  122. the third argument to <code>captureStart()</code>.
  123. </para></listitem>
  124. </itemizedlist>
  125. </example>
  126. </sect3>
  127. <!--
  128. vim:se ts=4 sw=4 et:
  129. -->