2014-02-14 3 views
2

Как отредактировать содержимое кнопки элемента Button (формы ZF2)? Я могу установить ярлык, но я хотел бы вставить в него некоторый HTML-код.Содержимое кнопки в формах ZF2

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => 'Modifica', 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-warning' 
     ) 
    )); 

Благодаря

+0

у должен вынести кнопку с содержимым HTML вручную. Если я не ошибаюсь, это невозможно, если у Zend \ Form есть html-контент, так как он будет скрыт изнутри по соображениям безопасности. – Sam

ответ

13

Вы можете просто использовать опцию disable_html_escape. Это работает для меня.

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => '<i class="icon icon-foo"></i> Submit', 
      'label_options' => array(
       'disable_html_escape' => true, 
      ) 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-success' 
     ) 
    )); 
5

FormButton вид помощник будет автоматически избежать содержимого кнопки HTML, как правильно @ Сэм упоминается.

Единственный способ избежать этого - использовать пользовательский помощник вида кнопки. Вместо того, чтобы удалять функциональные возможности эвакуации (поскольку текстовое содержимое кнопки должно быть все еще экранировано); вы можете расширить помощник вида и добавить дополнительный параметр, позволяющий отображать html (я предполагаю, что это значок начальной загрузки).

Например

use Zend\Form\View\Helper\FormButton as ZendFormButton; 

class FormButton extends ZendFormButton 
{ 

    public function render(ElementInterface $element, $buttonContent = null) 
    { 
     $content = (isset($buttonContent)) ? $buttonContent : $element->getLabel(); 
     $icon = isset($element->getOption('icon')) ? $element->getOption('icon') : ''; 

     $escape = $this->getEscapeHtmlHelper(); 

     return $this->openTag($element) . $icon . $escape($content) . $this->closeTag(); 
    } 

} 

Затем создайте «» invokable запись конфигурации с использованием зарегистрированного имени View Helper в кнопку по умолчанию («form_button») в менеджере сервисов. Это будет , тогда означает, что наш помощник будет использоваться вместо стандартного Zend\Form\View\Helper\FormButton.

// Module.php 
public function getViewHelperConfig() 
{ 
    return array(
     'invokables' => array(
      'form_button' => 'MyModule\Form\View\Helper\FormButton', 
     ) 
    ); 
} 

Наконец, изменить спецификацию кнопки элемента, чтобы добавить новую опцию «ICON»

$this->add(array(
    'type' => 'Button', 
    'name' => 'submit', 
    'options' => array(
     'label' => 'Modifica', 
     'icon' => '<i class="icon icon-foo">', 
    ), 
    'attributes' => array(
     'type' => 'submit', 
     'class' => 'btn btn-warning' 
    ) 
)); 

Некоторые другие точки

  • Если вы используете перевод для кнопки затем выше код удалит эту функциональность; это можно легко добавить снова (просто посмотрите в помощнике просмотра кнопки). Я удалил его, чтобы сделать пример clearer
  • Вы также можете расширить его, чтобы добавить к нему любое количество других параметров (возможно, положение значка до или после текста кнопки). Помощнику вида просто нужно будет прочитать эту опцию и вывести правильный HTML.
3

Если все, что вам нужно, это просто значок, с помощью CSS является гораздо более простой вариант, в виде файла, который вы просто добавить пользовательский класс CSS к кнопке, а затем в таблицах стилей добавить значок в класс, используя до и содержание, как это:

$this->add(array(
     'type' => 'Button', 
     'name' => 'submit', 
     'options' => array(
      'label' => 'Modifica', 
     ), 
     'attributes' => array(
      'type' => 'submit', 
      'class' => 'btn btn-warning custom-btn-with-icon' 
     ) 
    )); 

затем в CSS:

.custom-btn-with-icon:before { 
    content: '\uxf005'; // this is the unicode of the custom-char you need for your icon 
    font-family: 'fontAwesome'; // and this is the icon font of your project 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^