我如何格式化Zend_Form_Element_Radio,以便标签跟随输入?

时间:2010-09-04 02:31:25

标签: zend-framework radio-button zend-form

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标记?

6 个答案:

答案 0 :(得分:3)

我创建了一个名为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;
        }

答案 1 :(得分:0)

到目前为止,我最好的想法是从jQuery中更改ZF [Zend Framework] HTML代码,以便它与jQuery UI格式兼容。

以下是解决方案:

在ZF表格构建中

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

这里重要的是div with class = element将包装所有输入[以便在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();
});

答案 2 :(得分:0)

这是你可以做的最好的事情,我在经历了很多痛苦之后才发现它:))

$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);

答案 3 :(得分:0)

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

答案 4 :(得分:-1)

尝试:

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

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

答案 5 :(得分:-1)

这是jQuery的一个问题,而不是Zend Framework。在label标签中包装元素是完全有效的,只是jQuery UI不支持它。我发布了bug report

*更新答案*

但是我认为你要做的事情(正如你所评论的)是使用jQuery UI按钮集,这是我在遇到jQuery UI bug时所做的事情。简而言之,在修复错误之前,您有两个选择:

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

2)使用Dennis D.编写的代码修补Zend Framework单选按钮视图助手。它出现在第169行的Zend_View_Helper_FormRadio文件中(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;