|
|
@@ -1,155 +1,217 @@
|
|
|
-<sect3 id="zend.view.helpers.initial.headstyle">
|
|
|
- <title>HeadStyle Helper</title>
|
|
|
-
|
|
|
- <para>
|
|
|
- O elemento HTML <code><style></code> é usado para incluir
|
|
|
- folhas de estilo CSS de forma inline no elemento HTML <code><head></code>.
|
|
|
- </para>
|
|
|
-
|
|
|
- <note>
|
|
|
- <title>Use o HeadLink para "linkar" arquivos CSS</title>
|
|
|
-
|
|
|
- <para>
|
|
|
- O <link linkend="zend.view.helpers.initial.headlink">HeadLink</link>
|
|
|
- deve ser usado para criar elementos <code><link></code> para
|
|
|
- a inclusão de folhas de estilo externas. <code>HeadScript</code> é usado quando
|
|
|
- você deseja definir folhas de estilo inline.
|
|
|
- </para>
|
|
|
- </note>
|
|
|
-
|
|
|
- <para>
|
|
|
- O assistente <code>HeadStyle</code> dá suporte aos seguintes métodos para a configuração
|
|
|
- e adição de declarações de folhas de estilo:
|
|
|
- </para>
|
|
|
-
|
|
|
- <itemizedlist>
|
|
|
- <listitem><para><code>appendStyle($content, $attributes =
|
|
|
- array())</code></para></listitem>
|
|
|
- <listitem><para><code>offsetSetStyle($index, $content, $attributes =
|
|
|
- array())</code></para></listitem>
|
|
|
- <listitem><para><code>prependStyle($content, $attributes =
|
|
|
- array())</code></para></listitem>
|
|
|
- <listitem><para><code>setStyle($content, $attributes =
|
|
|
- array())</code></para></listitem>
|
|
|
- </itemizedlist>
|
|
|
-
|
|
|
- <para>
|
|
|
- Em todos os casos, <code>$content</code> é a verdadeira declaração CSS.
|
|
|
- $attributes são quaisquer atributos adicionais que você dejesa prover para a
|
|
|
- tag <code>style</code>: lang, title, media, ou dir são todos admissíveis.
|
|
|
- </para>
|
|
|
-
|
|
|
- <para>
|
|
|
- <code>HeadStyle</code> também permite a captura de declarações de estilo; isso
|
|
|
- pode ser útil se você quiser criar as declarações através de programação,
|
|
|
- e então colocalas em outro lugar. A utilização disso será mostrada em um exemplo abaixo.
|
|
|
- </para>
|
|
|
-
|
|
|
- <para>
|
|
|
- Finalmente, você pode usar o método <code>headStyle()</code> para
|
|
|
- acrescentar rapidamente elementos de declaração; a assinatura para isso é
|
|
|
- <code>headStyle($content$placement = 'APPEND', $attributes = array())</code>.
|
|
|
- <code>$placement</code> deve ser 'APPEND', 'PREPEND', ou 'SET'.
|
|
|
- </para>
|
|
|
-
|
|
|
- <para>
|
|
|
- <code>HeadStyle</code> sobrescreve <code>append()</code>,
|
|
|
- <code>offsetSet()</code>, <code>prepend()</code>, e <code>set()</code>
|
|
|
- para forçar o uso dos métodos especiais listados acima. Internamente
|
|
|
- ele armazena cada item como um token <code>stdClass</code> , que depois
|
|
|
- é serializado usando o método <code>itemToString()</code>. Isso permite
|
|
|
- que você faça verificações nos itens da pilha, e opcionalmente modifique
|
|
|
- estes itens simplesmente modificando o objeto retornado.
|
|
|
- </para>
|
|
|
-
|
|
|
- <para>
|
|
|
- O assistente <code>HeadStyle</code> é uma implementação concreta
|
|
|
- do assistente <link linkend="zend.view.helpers.initial.placeholder">Placeholder</link>.
|
|
|
- </para>
|
|
|
-
|
|
|
- <example id="zend.view.helpers.initial.headstyle.basicusage">
|
|
|
- <title>Uso Básico do Assistente HeadStyle</title>
|
|
|
-
|
|
|
- <para>
|
|
|
- Você pode especificar uma nova tag de estilo a qualquer momento:
|
|
|
- </para>
|
|
|
-
|
|
|
- <programlisting role="php"><![CDATA[
|
|
|
-<?php // adding scripts
|
|
|
-$this->headStyle()->appendStyle($styles);
|
|
|
-?>
|
|
|
-]]></programlisting>
|
|
|
-
|
|
|
- <para>
|
|
|
- A ordenação é muito importante no CSS; você talvez tenha que
|
|
|
- assegurar que as declarações sejam carregadas em uma ordem específica
|
|
|
- devido à ordem do CSS; use as diretivas append, prepend, e offsetSet
|
|
|
- para lhe auxiliar nessa tarefa:
|
|
|
- </para>
|
|
|
-
|
|
|
- <programlisting role="php"><![CDATA[
|
|
|
-<?php // Putting styles in order
|
|
|
-
|
|
|
-// place at a particular offset:
|
|
|
-$this->headStyle()->offsetSetStyle(100, $customStyles);
|
|
|
-
|
|
|
-// place at end:
|
|
|
-$this->headStyle()->appendStyle($finalStyles);
|
|
|
-
|
|
|
-// place at beginning
|
|
|
-$this->headStyle()->prependStyle($firstStyles);
|
|
|
-?>
|
|
|
-]]></programlisting>
|
|
|
-
|
|
|
- <para>
|
|
|
- When you're finally ready to output all style declarations in your
|
|
|
- layout script, simply echo the helper:
|
|
|
- </para>
|
|
|
-
|
|
|
- <programlisting role="php"><![CDATA[
|
|
|
-<?= $this->headStyle() ?>
|
|
|
-]]></programlisting>
|
|
|
- </example>
|
|
|
-
|
|
|
- <example id="zend.view.helpers.initial.headstyle.capture">
|
|
|
- <title>Capturing Style Declarations Using the HeadStyle Helper</title>
|
|
|
-
|
|
|
- <para>
|
|
|
- Sometimes you need to generate CSS style declarations
|
|
|
- programmatically. While you could use string concatenation,
|
|
|
- heredocs, and the like, often it's easier just to do so by creating
|
|
|
- the styles and sprinkling in PHP tags. <code>HeadStyle</code> lets
|
|
|
- you do just that, capturing it to the stack:
|
|
|
- </para>
|
|
|
-
|
|
|
- <programlisting role="php"><![CDATA[
|
|
|
-<?php $this->headStyle()->captureStart() ?>
|
|
|
-body {
|
|
|
- background-color: <?= $this->bgColor ?>;
|
|
|
-}
|
|
|
-<?php $this->headStyle()->captureEnd() ?>
|
|
|
-]]></programlisting>
|
|
|
-
|
|
|
- <para>
|
|
|
- The following assumptions are made:
|
|
|
- </para>
|
|
|
-
|
|
|
- <itemizedlist>
|
|
|
- <listitem><para>
|
|
|
- The style declarations will be appended to the stack. If you
|
|
|
- wish for them to replace the stack or be added to the top,
|
|
|
- you will need to pass 'SET' or 'PREPEND', respectively, as
|
|
|
- the first argument to <code>captureStart()</code>.
|
|
|
- </para></listitem>
|
|
|
-
|
|
|
- <listitem><para>
|
|
|
- If you wish to specify any additional attributes for the
|
|
|
- <code><style></code> tag, pass them in an array as
|
|
|
- the third argument to <code>captureStart()</code>.
|
|
|
- </para></listitem>
|
|
|
- </itemizedlist>
|
|
|
- </example>
|
|
|
-</sect3>
|
|
|
-<!--
|
|
|
-vim:se ts=4 sw=4 et:
|
|
|
--->
|
|
|
+<?xml version="1.0" encoding="UTF-8"?>
|
|
|
+<!-- EN-Revision: 20794 -->
|
|
|
+<!-- Reviewed: no -->
|
|
|
+<sect3 id="zend.view.helpers.initial.headstyle">
|
|
|
+ <title>Assistente HeadStyle</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ O elemento HTML <emphasis><style></emphasis> é usado para incluir folhas de estilo
|
|
|
+ <acronym>CSS</acronym> de forma inline no elemento HTML <emphasis><head></emphasis>.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <note>
|
|
|
+ <title>Use o HeadLink para "linkar" arquivos CSS</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ O <link linkend="zend.view.helpers.initial.headlink">HeadLink</link> deve ser usado para
|
|
|
+ criar elementos <emphasis><link></emphasis> para a inclusão de folhas de estilo
|
|
|
+ externas. <classname>HeadStyle</classname> é usado quando você deseja definir folhas de
|
|
|
+ estilo inline.
|
|
|
+ </para>
|
|
|
+ </note>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ O assistente <classname>HeadStyle</classname> dá suporte aos seguintes métodos para a
|
|
|
+ configuração e adição de declarações de folhas de estilo:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <itemizedlist>
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ <command>appendStyle($content, $attributes = array())</command>
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ <command>offsetSetStyle($index, $content, $attributes = array())</command>
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ <command>prependStyle($content, $attributes = array())</command>
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ <command>setStyle($content, $attributes = array())</command>
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+ </itemizedlist>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ Em todos os casos, <varname>$content</varname> é a verdadeira declaração
|
|
|
+ <acronym>CSS</acronym>. <varname>$attributes</varname> são quaisquer atributos adicionais
|
|
|
+ que você dejesa prover para a tag <property>style</property>: lang, title, media, ou dir são
|
|
|
+ todos admissíveis.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <note>
|
|
|
+ <title>Setting Conditional Comments</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ <classname>HeadStyle</classname> allows you to wrap the style tag in conditional
|
|
|
+ comments, which allows you to hide it from specific browsers. To add the conditional
|
|
|
+ tags, pass the conditional value as part of the <varname>$attributes</varname> parameter
|
|
|
+ in the method calls.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <example id="zend.view.helpers.initial.headstyle.conditional">
|
|
|
+ <title>Headstyle With Conditional Comments</title>
|
|
|
+
|
|
|
+ <programlisting language="php"><![CDATA[
|
|
|
+// adding scripts
|
|
|
+$this->headStyle()->appendStyle($styles, array('conditional' => 'lt IE 7'));
|
|
|
+]]></programlisting>
|
|
|
+ </example>
|
|
|
+ </note>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ <classname>HeadStyle</classname> também permite a captura de declarações de estilo; isso
|
|
|
+ pode ser útil se você quiser criar as declarações através de programação, e então colocá-las
|
|
|
+ em outro lugar. A utilização disso será mostrada em um exemplo abaixo.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ Finalmente, você pode usar o método <methodname>headStyle()</methodname> para acrescentar
|
|
|
+ rapidamente elementos de declaração; a assinatura para isso é
|
|
|
+ <methodname>headStyle($content$placement = 'APPEND', $attributes = array())</methodname>.
|
|
|
+ <varname>$placement</varname> deve ser 'APPEND', 'PREPEND', ou 'SET'.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ <classname>HeadStyle</classname> sobrescreve <methodname>append()</methodname>,
|
|
|
+ <methodname>offsetSet()</methodname>, <methodname>prepend()</methodname>, e
|
|
|
+ <methodname>set()</methodname> para forçar o uso dos métodos especiais listados acima.
|
|
|
+ Internamente ele armazena cada item como um token <property>stdClass</property>, que depois
|
|
|
+ é serializado usando o método <methodname>itemToString()</methodname>. Isso permite que você
|
|
|
+ faça verificações nos itens da pilha, e opcionalmente modifique estes itens simplesmente
|
|
|
+ modificando o objeto retornado.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ O assistente <classname>HeadStyle</classname> é uma implementação concreta do <link
|
|
|
+ linkend="zend.view.helpers.initial.placeholder">assistente Placeholder</link>.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <note>
|
|
|
+ <title>UTF-8 encoding used by default</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ By default, Zend Framework uses <acronym>UTF-8</acronym> as its default encoding, and,
|
|
|
+ specific to this case, <classname>Zend_View</classname> does as well. Character encoding
|
|
|
+ can be set differently on the view object itself using the
|
|
|
+ <methodname>setEncoding()</methodname> method (or the the <varname>encoding</varname>
|
|
|
+ instantiation parameter). However, since <classname>Zend_View_Interface</classname> does
|
|
|
+ not define accessors for encoding, it's possible that if you are using a custom view
|
|
|
+ implementation with this view helper, you will not have a
|
|
|
+ <methodname>getEncoding()</methodname> method, which is what the view helper uses
|
|
|
+ internally for determining the character set in which to encode.
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ If you do not want to utilize <acronym>UTF-8</acronym> in such a situation, you will
|
|
|
+ need to implement a <methodname>getEncoding()</methodname> method in your custom view
|
|
|
+ implementation.
|
|
|
+ </para>
|
|
|
+ </note>
|
|
|
+
|
|
|
+ <example id="zend.view.helpers.initial.headstyle.basicusage">
|
|
|
+ <title>Uso Básico do Assistente HeadStyle</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ Você pode especificar uma nova tag de estilo a qualquer momento:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <programlisting language="php"><![CDATA[
|
|
|
+// adding styles
|
|
|
+$this->headStyle()->appendStyle($styles);
|
|
|
+]]></programlisting>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ A ordenação é muito importante no <acronym>CSS</acronym>; você talvez tenha que
|
|
|
+ assegurar que as declarações sejam carregadas em uma ordem específica devido à ordem da
|
|
|
+ cascata; use as diretivas append, prepend, e offsetSet para lhe auxiliar nessa tarefa:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <programlisting language="php"><![CDATA[
|
|
|
+// Putting styles in order
|
|
|
+
|
|
|
+// place at a particular offset:
|
|
|
+$this->headStyle()->offsetSetStyle(100, $customStyles);
|
|
|
+
|
|
|
+// place at end:
|
|
|
+$this->headStyle()->appendStyle($finalStyles);
|
|
|
+
|
|
|
+// place at beginning
|
|
|
+$this->headStyle()->prependStyle($firstStyles);
|
|
|
+]]></programlisting>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ When you're finally ready to output all style declarations in your
|
|
|
+ layout script, simply echo the helper:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <programlisting language="php"><![CDATA[
|
|
|
+<?php echo $this->headStyle() ?>
|
|
|
+]]></programlisting>
|
|
|
+ </example>
|
|
|
+
|
|
|
+ <example id="zend.view.helpers.initial.headstyle.capture">
|
|
|
+ <title>Capturing Style Declarations Using the HeadStyle Helper</title>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ Sometimes you need to generate <acronym>CSS</acronym> style declarations
|
|
|
+ programmatically. While you could use string concatenation,
|
|
|
+ heredocs, and the like, often it's easier just to do so by creating
|
|
|
+ the styles and sprinkling in <acronym>PHP</acronym> tags.
|
|
|
+ <classname>HeadStyle</classname> lets you do just that, capturing it to the stack:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <programlisting language="php"><![CDATA[
|
|
|
+<?php $this->headStyle()->captureStart() ?>
|
|
|
+body {
|
|
|
+ background-color: <?php echo $this->bgColor ?>;
|
|
|
+}
|
|
|
+<?php $this->headStyle()->captureEnd() ?>
|
|
|
+]]></programlisting>
|
|
|
+
|
|
|
+ <para>
|
|
|
+ The following assumptions are made:
|
|
|
+ </para>
|
|
|
+
|
|
|
+ <itemizedlist>
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ The style declarations will be appended to the stack. If you
|
|
|
+ wish for them to replace the stack or be added to the top,
|
|
|
+ you will need to pass 'SET' or 'PREPEND', respectively, as
|
|
|
+ the first argument to <methodname>captureStart()</methodname>.
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+
|
|
|
+ <listitem>
|
|
|
+ <para>
|
|
|
+ If you wish to specify any additional attributes for the
|
|
|
+ <emphasis><style></emphasis> tag, pass them in an array as
|
|
|
+ the second argument to <methodname>captureStart()</methodname>.
|
|
|
+ </para>
|
|
|
+ </listitem>
|
|
|
+ </itemizedlist>
|
|
|
+ </example>
|
|
|
+</sect3>
|
|
|
+<!--
|
|
|
+vim:se ts=4 sw=4 et:
|
|
|
+-->
|