我将如何格式化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

这是一个与jQuery和不Zend框架的问题。元素在标签标签中的包装是完全有效的，只是jQuery UI不支持它。我发布了一个bug report。

*更新答案*

不过，我想你正在尝试做的（如你评论）是使用jQuery UI的buttonset，这是当我遇到了jQuery UI的错误来了我在做什么。总之，你有两个选择，直到bug被修复：

1）使用丹尼斯D.的自定义视图助手超过默认的单选按钮元素。

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

就是这样（再次丹尼斯·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 2

尝试：

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

退房zendcasts video about it它真的很棒。装饰者可能会非常复杂的ZF，但这个视频真的解释得很好。

Answer 3

我已经创建了一个名为MyLib_View_Helper_FormRadio的自定义视图帮助器（因此如果引导程序这样做会自动调用它），并覆盖并更改Line 160（Version 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 4

可能是我最好的主意，到目前为止，是从内jQuery的改变ZF [Zend框架] HTML代码，使之变得与jQuery UI格式兼容。

这里是解决方案：

在ZF建筑形式

：

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

这里最重要的是与类的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 5

这为t他最好的东西，你可能会有很多痛苦的:)）

$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 6

从不同的岗位上同一主题我的答案应该使用CSS帮你zend form for multicheckbox remove input from labels