0

我使用 Zend_Form 和它的默认装饰器来创建一个表单。这将输出以下 HTML：

<dl>
<dt><label for="title">Title</label></dt>
<dd>
  <input type="text" name="title" value="some title">
  <ul>
    <li>Some error message for the title</li>
    <li>Some other error message for the title</li>
  </ul>
</dd>
<dt><label for="type">Type</label></dt>
<dd>
  <select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select>
  <ul>
    <li>Some error message for the type</li>
    <li>Some other error message for the type</li>
  </ul>
</dd>
<dt><label for="description">Description</label></dt>
<dd>
  <textarea name="description" rows="40" cols="100">This is a description of the item</textarea>
  <ul>
    <li>Some error message for the description</li>
    <li>Some other error message for the description</li>
  </ul>
</dd>

我需要对其进行样式设置，以便标签出现在相关输入框的左侧，并且无序列表中的任何错误都出现在它们相关的元素的右侧。

在过去的美好时光（笑话），我可以使用具有 3 列的表来实现我想要的，如下所示：

<table>
<tr>
  <th><label for="title">Title</label></th>
  <td><input type="text" name="title" value="some title"></td>
  <td>
    <ul>
      <li>Some error message for the title</li>
      <li>Some other error message for the title</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="type">Type</label>
  </th>
  <td><select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select></td>
  <td>
    <ul>
      <li>Some error message for the type</li>
      <li>Some other error message for the type</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="description">Description</label></th>
  <td><textarea name="description" rows="40" cols="100">This is a description of the item</textarea></td>
  <td>
    <ul>
      <li>Some error message for the description</li>
      <li>Some other error message for the description</li>
    </ul>
  </td>
</tr>
</table>

显然，这并不是我真正想要考虑的事情。主要是因为我真的不想将列固定为相同的宽度。

我也尝试不使用 zend 表单装饰器方法，因为从代码可读性的角度来看，您需要提供的糟糕的嵌套数组非常糟糕。我理想的方法可能是在每个标签、输入和 ul 周围包裹一个 div，然后在 div 上使用 clear:both。然后我可以在每个标签、输入和 ul 上使用 float:left。

我一直在这里测试这个问题的各种其他答案：http: //htmledit.squarefree.com/

不过，似乎没有其他人的解决方案真正起作用。显然，它需要在 IE 中工作，尽管在 IE7 之前不需要。如果有人能想出只在 IE8 中有效的东西，那可能一推就可以了。

我曾尝试将自定义视图脚本应用于表单元素，但由于选择而引发了一大堆其他问题。

根据以下文章，将 ul 元素放在 dl 的 dd 部分中是完全有效的，只是不在 dt 中：http: //www.maxdesign.com.au/articles/definition/

4

2 回答 2

1

使用 jQuery。我认为错误 ul 元素有一些与之关联的错误类。Javascript：

$('ul.error').each(function(){
  $(this).appendTo(     //get error <ul>
   $(this)              //start chain from self
   .parent()            //move to parent <td>
   .prev()              //move to previous <td> element
  );                // and append there.
});
于 2012-08-02T21:55:57.373 回答
0

这个问题的答案似乎是您必须在 Zend Framework 1 中使用装饰器。

您可能认为 viewScripts 是一种解决方案，但似乎如果您沿着这条路线走，那么您将打开一罐蠕虫，因为您最终将不得不为按钮、文件元素、文本输入、选择、单选和复选框创建不同的视图脚本因为它们都需要稍微不同的东西传递给实际渲染元素的内置助手。至少使用装饰器可以避免在每个脚本中复制一定数量的布局，只需添加或删除装饰器。

看起来他们正在放弃 ZF2 中的装饰器方法，尽管采用更适合 MVC 的东西。

于 2012-08-07T15:14:38.183 回答