छवि चयन के लिए Zend_Form तत्व

नमस्ते लंबे परिचय के बिना, मैं यह दिखाना चाहता हूं कि तत्व कैसा दिखता है, जिसके निर्माण के बारे में मैं बताने जा रहा हूं:


मैंने इसे RadioImage कहने का फैसला किया।

हाल ही में, ऑनलाइन स्टोर में उत्पाद की स्थिति के लिए आइकन डाउनलोड करने और चयन करने की क्षमता के साथ उपयोगकर्ता प्रदान करना आवश्यक था। मैंने विभिन्न jQuery प्लगइन्स का उपयोग करके छोटे आइकन चुनने की समस्या को हल किया (यह तस्वीर मेरी नहीं है):


(और तब, मैं बहुत आलसी था और एक अलग डेकोरेटर / तत्व नहीं लिखा था, लेकिन बस जावास्क्रिप्ट को दरकिनार कर दिया)।

लेकिन इस बार, आइकन अलग-अलग आकार के हो सकते हैं और आम तौर पर छोटा नहीं होना चाहते हैं, और यदि आप बड़े चित्रों के साथ चयन करते हैं, तो यह सामान्य रूप से बाहर खटखटाया जाएगा।

मुझे याद आया कि मैंने पहले ही यह कर लिया था और देखने के लिए चढ़ गया था:

सिद्धांत रूप में, यह एक सामान्य विकल्प है, लेकिन मुझे लगता है कि यह हमारे लिए सामान्य है। कुछ के लिए, यह स्पष्ट नहीं हो सकता है कि इस तरह के एक मध्यस्थ के रूप में चेकबॉक्स की आवश्यकता क्यों है। साथ ही, यह फिर से MultiImageCheckbox का Zend_Form तत्व नहीं है, लेकिन दृश्य स्क्रिप्ट में सीधे जेनरेट किया गया html अच्छा नहीं है। यदि यह दूसरी बार काम में आया, तो आपको इसे मानवीय रूप से करने की आवश्यकता है।

इस बार मुझे केवल एक आइकन का चयन प्रदान करने की आवश्यकता है, इसलिए हमारा तत्व एकाधिक चयन की अनुमति नहीं देगा (लेकिन यह ठीक करना मुश्किल नहीं है, इसके आधार पर एक और तत्व बनाना, उदाहरण के लिए, चेकइमेज)।

एक और आवश्यकता है - 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 सहायक, और इसमें सभी तर्क के लिए एक इंटरफ़ेस है:

App / देखें / सहायक / 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; } } 

वह सब है। ऐसा लगता है कि कुछ भी नहीं भूल गया है।

फिर से चित्र, ताकि स्क्रॉल न हो:



आपका ध्यान देने के लिए धन्यवाद।