🕳️ 🖤 ⬅️ 画像選択用のZend_Form要素 🤘🏿 🕺 ✋🏿

こんにちは。長い紹介なしで、要素がどのように見えるかを示したいと思います。

RadioImageと呼ぶことにしました。

最近、オンラインストアで製品ステータスのアイコンをダウンロードして選択する機能をユーザーに提供する必要がありました。私はさまざまなjQueryプラグインを使用して小さなアイコンを選択する問題を解決していました（この写真は私のものではありません）。

（そして、ちなみに、私はとても怠け者で、別のデコレータ/要素を書いておらず、単にJavaScriptをバイパスしていました）。

しかし、今回は、アイコンのサイズを変えることができ、一般的に小さくすることは望ましくありません。大きな写真で選択すると、一般的な形式からノックアウトされます。

私はすでにこれを行っていたことを思い出し、見に登りました：

原則として、これは通常のオプションですが、開発者にとっては通常のことだと思います。一部の人にとっては、ここでチェックボックスなどの仲介者が必要な理由が明確でないかもしれません。さらに、これは再びMultiImageCheckboxタイプのZend_Form要素ではありませんが、ビュースクリプトで直接生成されたhtmlだけでは適切ではありません。 2度目に便利になった場合は、人間的に行う必要があります。

今回は、アイコンを1つだけ選択する必要があるため、要素で複数選択を許可しません（ただし、これを修正することは難しくありません。これに基づいて、CheckImageなどの別の要素を作成します）。

もう1つの要件があります。jQuery、私はZendX_JQueryのようなヘルパーを使用することに慣れていますが、Zend_VIew_Helper_HeadScriptを使用してファイルをjsコードに接続できます。

さあ、コメントを付けてコーディングしましょう。私は前に戻って始めます-フォームで：

アプリケーション/フォーム/ ProductStatus.php

<?php class Form_ProductStatus extends Zend_Form { public function init() { $this->setMethod('post'); $this->setName('statusform'); $this->setAttrib('enctype', 'multipart/form-data'); $this->addElement('text', 'prodstatus_name', array( 'required' => true, 'label' => 'Status Name', 'filters' => array('StringTrim') )); //     $img = new App_Form_Element_RadioImage('prodstatus_icon', array( 'label' => 'Select Icon', // HTML         <img /> 'width' => '48' )); // BaseUrl        , //        - $bu = $this->getView()->baseUrl(); //     /  , //       $icons = array( "black_new.png" => $bu.'/icons/black_new.png', "black_sale.png" => $bu.'/icons/black_sale.png', "blue_new.png" => $bu.'/icons/blue_new.png', "label_sale.png" => $bu.'/icons/label_sale.png', "new_blue.png" => $bu.'/icons/new_blue.png', "new_red.png" => $bu.'/icons/new_red.png', "sale_blue.png" => $bu.'/icons/sale_blue.png', "sale_green.png" => $bu.'/icons/sale_green.png', "sale_yellow.png" => $bu.'/icons/sale_yellow.png', "sticker_blue_sale.png" => $bu.'/icons/sticker_blue_sale.png' ); //  $key -      // . .    [«prodstatus_icon»] => $key (  ) // $val       img .. <img src="$val"/> foreach ($icons as $key => $val) { //      (      select) //     addMultiOptions()   //       $img->addMultiOption($key, $val); } $this->addElement($img); $this->addElement('submit', 'Save'); } }

一見すると大量のコードのように見えるかもしれませんが、ライブプロジェクトでは数行かかります。

  $img = new App_Form_Element_SelectImage('prodstatus_icon', array( 'label' => 'Select Icon', 'width' => '48' )); $icons = App_Tool::scandir(PUBLIC_PATH.'/modules/products/icons', 'png'); foreach ($icons as $icon) { $img->addMultiOption($icon, $this->getView()->baseUrl().'/modules/products/icons/'.$icon); } $this->addElement($img);

私の意見では、要素の初期化は非常に簡単です-まさにそれは再利用のためです。ライブラリでの実装方法は次のとおりです。

アプリ/フォーム/要素/ RadioImage.php

 <?php require_once 'Zend/Form/Element/Multi.php'; /** * RadioImage form element * * @category App * @package App_Form * @subpackage Element */ class App_Form_Element_RadioImage extends Zend_Form_Element_Multi { /** * @var string */ public $helper = 'FormRadioImage'; }

多くの組み込みZend_Form要素との類推により、この要素はFormRadioImageヘルパーとその中のすべてのロジックへのインターフェースにすぎません。

アプリ/ビュー/ヘルパー/ FormRadioImage.php

 <?php require_once 'Zend/View/Helper/FormElement.php'; /** * @category App * @package App_View * @subpackage Helper * @uses ZendX_Jquery */ class App_View_Helper_FormRadioImage extends Zend_View_Helper_FormElement { /** * @param string|array $name     "name"  <input /> * @param mixed $value   -   *   . * @param array|string $attribs Html    . * @param array $options        . * @return string  html */ public function formRadioImage($name, $value = null, $attribs = null, $options = null) { $info = $this->_getInfo($name, $value, $attribs, $options); extract($info); // name, value, attribs, options //       (     ) $options = (array) $options; $xhtml = ''; $list = array(); //      ,   $list[] = '<input type="hidden" id="'.$name.'" name="'.$name.'" value="'.$value.'" />'; require_once 'Zend/Filter/Alnum.php'; $filter = new Zend_Filter_Alnum(); //   CSS      //    class="selected" $selectedClass = (isset($attribs['selectedClass']) && !empty ($attribs['selectedClass']))?$attribs['selectedClass']:'selected'; $selectedClass = $filter->filter($selectedClass); if(!isset($attribs['class'])) $attribs['class'] = null; //      CSS  ( ) $classBck = $attribs['class']; //    foreach ($options as $optVal => $imgPath) { //  id   <img /> $imgId = $id . '-' . $filter->filter($optVal); //  ,       selected if ($optVal == $value) { $attribs['class'] .= " ".$selectedClass; } //     $list[] = '<img ' . 'src="'.$imgPath.'" ' . 'id="'.$imgId.'" ' . 'rel="'.$optVal.'" ' . $this->_htmlAttribs($attribs) . '/>'; //   selected,        if(strstr($attribs['class'], $selectedClass)) $attribs['class'] = $classBck; } //    ,       $list[] = '<br /><a href=\"javascript;\">Reset Selection</a>'.PHP_EOL; $xhtml .= implode(PHP_EOL, $list); //     jQuery //        hidden  $this->view->jQuery()->addOnLoad(" //    $('#$name-element img').click(function(){ $('#$name').val($(this).attr('rel')); $('#$name-element img').removeClass('$selectedClass'); $(this).addClass('$selectedClass'); }); //    $('#$name-element a').click(function(){ $('#$name-element img').removeClass('$selectedClass'); $('#$name').val('') return false; }); "); //     (-) //    css        CSS $this->view->headStyle(" #$name-element img {cursor:pointer; border:3px solid white} #$name-element img.selected {border:3px solid blue} "); return $xhtml; } }

それだけです何も忘れていないようです。

上にスクロールしないように、もう一度画像を作成します。

ご清聴ありがとうございました。

画像選択用のZend_Form要素

More articles: