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