Magento后台input输入框添加颜色选择器(js colorpicker)

1,先在system.xml里定义field

比如

1
2
3
4
5
6
7
8
9
10
11
<fields>
<text_color translate="label">
<label>Text Color</label>
<frontend_type>text</frontend_type>
<frontend_model>cookiewarning/adminhtml_system_config_color</frontend_model>
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</text_color>
</fields>

 

2,在cookiewarning/adminhtml_system_config_color里设置改input的class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
class Zou_CookieWarning_Block_Adminhtml_System_Config_Color extends Mage_Adminhtml_Block_System_Config_Form_Field {
protected function _getElementHtml( Varien_Data_Form_Element_Abstract $element ) {
$color = new Varien_Data_Form_Element_Text();
$data = array(
'name' => $element->getName(),
'html_id' => $element->getId(),
);
$color->setData( $data );
$color->setValue( $element->getValue() );
$color->setForm( $element->getForm() );
$color->addClass( 'jscolor {hash:true} ' . $element->getClass() );
return $color->getElementHtml();
}

}

设置的class为jscolor {hash:true}。这个class是JsColor插件需要的。

 

3,在adminhtml/default/default/zou/cookiewarning.xml里引入js。

1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<layout>
<adminhtml_system_config_edit>
<reference name="head">
<action method="addJs"><script>zou/cookiewarning/jscolor/jscolor.js</script></action>
</reference>
</adminhtml_system_config_edit>
</layout>

 

4,下载JsColor文件,解压后放在js/zou/cookiewarning目录下

5,清空magento缓存,刷新页面。就生效了。

jietu20180301-133514

坚持原创技术分享,您的支持将鼓励我继续创作!