我将如何格式化 Zend_Form_Element_Radio 以便标签跟随输入？

Question

Zend_Form_Element_Radio 的默认装饰器是

<label for="type_id-1"><input type="radio" name="type_id" id="type_id-1" value="1">Pack</label>

label 标签包装了input 标签。相反，我想看起来像

<input type="radio" name="type_id" id="type_id-1" value="1"><label for="type_id-1">Pack</label>

我认为这可能与元素的“标签”有关，但这是不同的。即使使用以下代码，我仍然会得到包装收音机的标签。当我使用这个表单代码时。

public function init()
{
    parent::init();

    $this->setName('createdomain');

    $type_id = new Zend_Form_Element_Radio('type_id');
    $type_id->setLabel('Please Choose')
            ->setRequired()
            ->setMultiOptions(array('m' => "male", 'f' => 'female'));

    $this->addElement($type_id);

    $this->setElementDecorators(array(
    'ViewHelper',
     array('Label',array('placement' => 'APPEND')),
));       
}

结果我得到了这个 HTML

<form id="createdomain" enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form">
<label for="type_id-m"><input type="radio" name="type_id" id="type_id-m" value="m">male</label><br />
<label for="type_id-f"><input type="radio" name="type_id" id="type_id-f" value="f">female</label>
<label for="type_id" class="required">Please Choose</label></dl>
</form>

注意label 标签如何包裹input 标签？

Answer 1

我创建了一个名为 MyLib_View_Helper_FormRadio 的自定义视图助手（因此如果您的引导这样做，它会自动调用），并在第 160 行（版本 1.11）覆盖并更改了 Zend_View_Helper_FormRadio::formRadio() 方法，其中单选按钮位于已创建。

---

$label = '<label ' . $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">'
               . $opt_label 
               .'</label>';

        // Wrap the radios in labels
        $radio =  '<input type="' . $this->_inputType . '"'
                . ' name="' . $name . '"'
                . ' id="' . $optId . '"'
                . ' value="' . $this->view->escape($opt_value) . '"'
                . $checked
                . $disabled
                . $this->_htmlAttribs($attribs)
                . $endTag;

        if ('prepend' == $labelPlacement) {
            $radio = $label . $radio;
        }
        elseif ('append' == $labelPlacement) {
            $radio .= $label;
        }

Answer 2

到目前为止，我最好的想法可能是从 jQuery 中更改 ZF [Zend Framework] HTML 代码，使其与 jQuery UI 格式兼容。

解决办法如下：

在 ZF Form 构造中：

$this->setElementDecorators(array(
                                'ViewHelper',
                                'Errors',
                                array(array('rowElement'=>'HtmlTag'), array('tag'=>'div', 'class'=>'element')),
                                array('Label', array('class'=>'first')),
        ));

这里重要的是带有 class=element 的 div 将包装所有输入 [以便在 jQuery 中轻松获取它们]

这里是JS代码：

$(function() {
    $( "div.element > label" ).each(function() {
        $('input', this).after('<label for="'+$(this).attr('for')+'"></label>');
        $('label', this).text($(this).text());
        var input = $('input', this).detach();
        var label = $('label', this).detach();

        var parent = $(this).parent();
        $(this).remove(); 
        input.appendTo(parent);
        label.appendTo(parent);
    });
    $( "div.element" ).buttonset();
});

Answer 3

这是你能做的最好的事情，我在经历了很多痛苦之后才找到它:))

$radios = new Zend_Form_Element_Radio('notifications');
$notificationTypesArray = array();
foreach ($notificationTypes as $key => $value) {
     $notificationTypesArray[$key] = $value
$radios->removeDecorator('DtDdWrapper');
$radios->removeDecorator('HtmlTag');
$radios->setSeparator('</td></tr><tr><td class="notification_type_row">');
$radios->setDecorators(array(
    'ViewHelper',
    'Errors',
    array(array('data' => 'HtmlTag'), array('tag' => 'td', 'class' => 'notification_type_row')),
    array('Label', array('tag' => 'span')),
    array(array('row' => 'HtmlTag'), array('tag' => 'tr')),
);
$radios->addMultiOptions($notificationTypesArray);              
$this->addElement($radios);

Answer 4

我在同一主题的不同帖子中的回答应该对您有所帮助zend form for multicheckbox remove input from labels

Answer 5

这是 jQuery 而不是 Zend 框架的问题。 label 标签中元素的包装是完全有效的，只是 jQuery UI 不支持它。我已经发布了bug report。

* 更新答案 *

但是，我认为您正在尝试做的事情（正如您所评论的）是使用 jQuery UI 按钮集，这就是我遇到 jQuery UI 错误时所做的事情。简而言之，在修复错误之前，您有两种选择：

1) 使用 Dennis D. 的自定义视图助手覆盖默认的单选按钮元素。

2) 使用 Dennis D. 编写的代码修补 Zend Framework 单选按钮视图助手。它出现在文件 Zend_View_Helper_FormRadio 的第 169 行（Zend 框架版本 1.11.0）。

首先新建一个标签并关闭标签

// Create the label
$label = '<label'
. $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">'
. (('prepend' == $labelPlacement) ? $opt_label : '')
. '<input type="' . $this->_inputType . '"'
. $opt_label
. '</label>';

其次将创建单选按钮的代码更改为：

// Create the radio button
$radio = '<input type="' . $this->_inputType . '"'

第三次删除视图助手中标签标签的关闭（就像你已经完成的那样），更改：

. $endTag
. (('append' == $labelPlacement) ? $opt_label : '')
. '</label>';

然后简单地替换为：

. $endTag;

然后使用放置定位将单选和标签组合起来：

// Combine the label and the radio button
if ('prepend' == $labelPlacement) {
    $radio = $label . $radio;
} else {
    $radio = $radio . $label;
}

就是这样（Dennis D 再次在视图助手中完成了它）但是更改后的代码应该看起来像（从第 169 行开始：

// Create the label
        $label = '<label'
                . $this->_htmlAttribs($label_attribs) . ' for="' . $optId . '">'
                . $opt_label
                . '</label>';

        // Create the radio button
        $radio = '<input type="' . $this->_inputType . '"'
                . ' name="' . $name . '"'
                . ' id="' . $optId . '"'
                . ' value="' . $this->view->escape($opt_value) . '"'
                . $checked
                . $disabled
                . $this->_htmlAttribs($attribs)
                . $endTag;

        // Combine the label and the radio button
        if ('prepend' == $labelPlacement) {
            $radio = $label . $radio;
        } else {
            $radio = $radio . $label;
        }
        // add to the array of radio buttons
        $list[] = $radio;

Answer 6

试试：

$this->setElementDecorators(array(
        'ViewHelper',
         array('Label',array('placement' => 'APPEND')),
    ));

查看zendcasts video about it 真的很棒。 ZF 的装饰器可能真的很复杂，但这个视频很好地解释了这一点。