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 7 より前ではありませんが、IE で動作する必要があります。誰かが IE8 でのみ動作するものを考え出すことができれば、それはすぐに問題ないかもしれません。

フォーム要素にカスタム ビュー スクリプトを適用しようとしましたが、選択が原因で他の多くの問題が発生しました。

次の記事によると、dt ではなく、dl の dd 部分に ul 要素を配置することは完全に有効です: http://www.maxdesign.com.au/articles/definition/

4

2 に答える 2

1

jQuery を使用します。error 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

この問題に対する答えは、ZendFramework1でデコレータを使用する必要があるということのようです。

viewScriptsは解決策だと思うかもしれませんが、そのルートをたどると、ボタン、ファイル要素、テキスト入力、選択、ラジオ、チェックボックス用に異なるビュースクリプトを作成する必要があるため、ワームの缶を開いているようです。それらはすべてわずかに異なるものを必要とするため、実際に要素をレンダリングする組み込みのヘルパーに渡されます。少なくともデコレータを使用すると、デコレータを追加または削除するだけで、各スクリプト購入で一定量のレイアウトの複製を回避できます。

彼らはZF2のデコレータアプローチを放棄しているように見えますが、MVCにより適したものを採用しています。

于 2012-08-07T15:14:38.183 に答える