0.イントロ。
開発プロセスでは、多くの場合、さまざまなカスタム選択、入力、ファイルダウンローダーなどを使用する必要があります。 この場合、ZFは標準のフォーム要素(captchaは例外)以外のボックスからは何も知らないため、クライアント側で追加のハンドラーを記述する必要があります。 この記事では、jQuery用のfacebookに似たTextboxListプラグインに基づく要素の作成について説明します。
1.理論。
実際、新しい要素を作成するには、次の2つの条件が満たされている必要があります。- Zend_Form_Element_Xhtmlから継承した要素クラスが必要です。
- レンダリングを担当するビューヘルパー。
- 要素の名前は名前空間(この場合はEve_)に存在し、正しく構成されている必要があります。
2.練習。
2.1。 Eve_Form_Element_TextboxListを作成します
クラス構造は、次の主要部分で構成されています。- 要素をレンダリングするビューヘルパーを指定します。
- デフォルトオプションの設定。
- オプションを設定(または結合)するためのメソッドのオーバーロード(オプション);
- 他のオプション\メソッドはこの段階では必要なく、Zend_Form_Elementで見ることができます。
コメント付きのリスト内のクラスのソースコード:
class Eve_Form_Element_TextboxList extends Zend_Form_Element_Xhtml { /** * * @var string */ public $helper = 'formTextboxList'; /** * - * @var array */ public $options = array( 'js_main' => '/js/jquery.textboxlist.js', // 'js_autocomplete' => '/js/jquery.textboxlist.autocomplete.js', // ( ) 'js_growinginput' => '/js/jquery.growinginput.js', // 'use_autocompletion' => '0', // 'autocomplete_script' => null, // backend, 'css_main' => '/css/textboxlist.css', // 'css_autocomplete' => '/css/textboxlist.autocomplete.css', ); /** * * * @param array $options * @return Eve_Form_Element_TextboxList */ public function setOptions(array $options) { /** * , , * */ $diff = array_intersect_key($options, $this->options); $this->options = array_merge($this->options, $diff); /** * , html */ foreach ($diff as $key => $option) { unset ($options[$key]); } parent::setOptions($options); return $this; } }
2.2。 ビューヘルパーEve_View_Helper_FormTextboxListを作成します
クラスには、ヘルパーのアクセス時に自動的に呼び出される、クラスの名前に一致するメソッドが必要です。リストコード+コメント:
class Eve_View_Helper_FormTextboxList extends Zend_View_Helper_FormElement { /** * Generates a 'textboxList' element. * * @access public * * @param string|array $name If a string, the element name. If an * array, all other parameters are ignored, and the array elements * are extracted in place of added parameters. * * @param mixed $value The element value. * * @param array $attribs Attributes for the element tag. * * @return string The element XHTML. */ public function formTextboxList($name, $value = '', $attribs = null, $options = null) { $id = $name; $elemId = $this->view->escape($id); $xhtml = '<input type="text" name="' . $this->view->escape($name) . '" id="' . $this->view->escape($id) . '"'; // if (!empty($value)) { $xhtml .= ' value="' . $this->view->escape($value) . '"'; } // html $xhtml .= $this->_htmlAttribs($attribs); $xhtml .= '/>' . PHP_EOL; /** * , , .. , * , . */ // add content and end tag $xhtml .= $content . ($this->view->doctype()->isXhtml() ? '/>' : '>') . PHP_EOL; $this->view->headScript->appendFile($options['js_growinginput']); $this->view->headScript->appendFile($options['js_main']); $this->view->headScript->appendFile($options['js_autocomplete']); $this->view->headLink->appendStylesheet($options['css_main']); $this->view->headLink->appendStylesheet($options['css_autocomplete']); $xhtml .= '<script type="text/javascript"> var tl_' . $elemId . ' = new $.TextboxList("#' . $elemId. '", {unique: true, plugins: {autocomplete: {}}}); '; if ((int) $options['use_autocompletion'] == 1) { if (!$options['autocomplete_script']) { throw new Zend_View_Exception('No autocompletion backend is set for ' . __CLASS__ . ' plugin.'); } else { $.getJSON('" . $options['autocomplete_script'] . "', null, function (data) { tl.plugins['autocomplete'].setValues(data); tl.getContainer().removeClass('textboxlist-loading'); });"; } } $xhtml .= '</script>'; return $xhtml; } }
2.3。 設定による初期化。
多くの場合、通常と変わりません: elements.categories.type = textboxList elements.categories.options.label = Categories elements.categories.options.use_autocompletion = 1 elements.categories.options.autocomplete_script = /categories/ajax/get-all/
3.アウトロ。
したがって、まったく新しいタイプの入力を描画する別個の要素が作成されました。jqueryプラグインは、 http://devthought.com/projects/jquery/textboxlist/にあります 。
プラグインには、このコンポーネントの一部として実装されていない十分なオプションがあり、はい、プラグインは無料ライセンスの下にありません。
UPD: 1.更新済み( このコメントを参照