2009-04-22 16 views
6

Ho un elemento pulsante che ho creato in questo modo:Zend Framework Zend_Form Decoratori: <span> Elemento pulsante interno?

$submit = new Zend_Form_Element_Button('submit'); 
$submit->setLabel('My Button'); 
$submit->setDecorators(array(
    'ViewHelper', 
    array('HtmlTag', array('tag' => 'li')) 
)); 
$submit->setAttrib('type', 'submit'); 

Questo genera il seguente codice HTML:

<li> 
    <label for="submit" class="optional">My Button</label> 
    <button name="submit" id="submit" type="submit">My Button</button> 
</li> 

Vorrei avvolgere l'interno del tasto con una campata <> , come questo:

<button...><span>My Button</span></button> 

Qual è il modo migliore per farlo utilizzando Zend_Form?

risposta

7

Ho provato e, in definitiva, non sono riuscito a raggiungere questo me stesso utilizzando lo stesso approccio. Sembrerebbe che il modo più semplice per farlo sarebbe quello di fare:

... 
$submit->setLabel('<span>My Button</span>'); 
... 

Tuttavia, la durata sarà sfuggito. È perfettamente possibile disattivare la fuoriuscita di un decoratore etichetta, tuttavia, l'aggiunta decoratore etichetta rende l'uscita non correttamente, ad esempio:

$decorator = array(
    array('ViewHelper'), 
    array('HtmlTag', array('tag' => 'li')), 
    array('Label', array('escape' => false)) 
); 

$submit = new Zend_Form_Element_Button('submit'); 
$submit->setLabel('<span>My Button</span>'); 
$submit->setDecorators($decorator); 
$submit->setAttrib('type', 'submit'); 

... rende:

<label for="submit" class="optional"><span>My Button</span></label> 
<li> 
    <button name="submit" id="submit" type="submit">&lt;span&gt;My Button&lt;/span&gt</button> 
</li> 

... che , oltre a essere semanticamente scorretto (facilmente risolvibile), sta ancora sfuggendo ai tag span all'interno dell'elemento.

Quindi cosa fai?

Beh, penso che l'approccio migliore (e questo è il mio meta-consiglio quando si tratta di un controllo stretto sul rendering Zend_Form) è quello di utilizzare il decoratore ViewScript.

$submit = new Zend_Form_Element_Button('submit'); 
$submit->setLabel('My Button'); 
$submit->setDecorators(array(array('ViewScript', array('viewScript' => '_submitButton.phtml')))); 
$submit->setAttrib('type', 'submit'); 

... poi in _submitButton.phtml definire quanto segue:

<li> 
    <?= $this->formLabel($this->element->getName(), $this->element->getLabel()); ?> 
    <button 
    <?php 

    $attribs = $this->element->getAttribs(); 

    echo 
    ' name="' . $this->escape($this->element->getName()) . '"' . 
    ' id="' . $this->escape($this->element->getId()) . '"' . 
    ' type="' . $this->escape($attribs['type']) . '"'; 
    ?> 
    <?php 

    $value = $this->element->getValue(); 

    if(!empty($value)) 
    { 
     echo ' value="' . $this->escape($this->element->getValue()) . '"'; 
    } 
    ?> 
    > 
    <span> 
    <?= $this->escape($this->element->getLabel()); ?> 
    </span> 
    </button> 
</li> 

Il _submitButton.phtml file di dovrà essere in una directory Visualizza script (si potrebbe essere meglio l'aggiunta di uno specifico per i decoratori di moduli utilizzando $view->addScriptPath('/path/to/my/form/decorators')).

Questo dovrebbe rendere ciò che stai cercando. Ho appena iniziato a guardare il decoratore di ViewScript a causa di problemi di flessibilità che sto riscontrando nel lavoro.Noterai che il mio script non è così flessibile, e certamente non è in BNF, dati tutti i membri che possono essere popolati sull'elemento oggetto. Detto questo, è un inizio e risolve il tuo problema.

+0

Grazie per la risposta molto dettagliata. Sono a conoscenza del decoratore di ViewScript, ma non sapevo che potesse essere applicato a singoli elementi. – leek

+0

Questo è stato molto utile! – markus

0

Vorrei aggiungere una classe al pulsante, quindi definire quella classe nel CSS per farlo funzionare come una span. Sono sicuro che vuoi fare qualcosa di più che limitarti a farlo.

Basta aggiungere un altro setAttrib() chiamata:

$submit->setAttrib('class', 'submitButton'); 

Poi nel CSS:

.submitButton { 
    display:inline; 
    font-weight:bold; /* Or whatever you're wanting to do */ 
} 

ho aggiunto display: inline come questo renderà il tasto agire come un arco. Questo dovrebbe iniziare almeno. Ovviamente potresti basare il tuo CSS anche sull'ID del pulsante, usa solo display: in linea per ottenere il comportamento di span.

+0

Il mio obiettivo in realtà è quello di fare "arco pulsante {display: none;}" per nascondere il testo del pulsante (ma mi piacerebbe che fosse ancora lì per le persone senza i CSS/Supporto JS). – leek

+0

Aaah. Sapevo che c'era qualcos'altro! – Kekoa

5

Si potrebbe fare questo:

$this->addElement(new Zend_Form_Element_Button(
      'send', 
      array(
       'label' => '<span>registrieren</span>', 
       'class' => 'button-red', 
       'type' => 'submit', 
       'escape' => false, 
       'required' => false, 
       'ignore' => false, 
      ) 
)); 
+0

GRAZIE !!!!!! – wiLLiamcastrO

1

Proprio sfuggire l'etichetta funziona bene. Si rompe solo quando qualcuno inizia a fare scherzi con il decoratore etichetta (di solito accade quando si personalizza tag)

È possibile utilizzare la funzione Zend_Form setElementDecorators() ed escludere alcuni elementi styling. Leggi Esempio n. 3 Impostazione dei decoratori per alcuni elementi in Zend_Form Manual (compresa la nota!) Per ulteriori dettagli.

Per coloro che sono ancora confuso, qui è un codice di esempio per lo stile il modulo come un tavolo, e hanno un pulsante che viene racchiuso in doppio arco:

//(...)putting some other elements in the form first 

//now add submit button 
$form  ->addElement('button', 'submit', array(
         'label'  => '<span><span>SUBMIT</span></span>', 
         'value'  => 'submit' 
      )); 

$form 
      //set decorators for non-button elements 
      ->setElementDecorators(array(
        'ViewHelper', 
        'Errors', 
        array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')), 
        array('Label', array('tag' => 'td')), 
        array(array('row' => 'HtmlTag'), array('tag' => 'tr'))), array('submit'), false) 
      //and then for button elements only 
      ->setElementDecorators(array(
        'ViewHelper', 
        'Errors', 
        array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'element')), 
        array(array('row' => 'HtmlTag'), array('tag' => 'tr'))), array('submit'), true) 
      //and finally for the form 
      ->setDecorators(array(
        'FormElements', 
        array('HtmlTag', array('tag' => 'table')), 
        'Form' 
      )); 

dove $ form è uno Zend_Form elemento. Spero che questo ti aiuti!

0

Prova con

$element->addDecorator('Label', array('tag' => 'span', 'class' => 'aClass'))