Question

我想在 Magento 1.7 CE 管理面板中添加颜色选择器。知道我已经使用了自定义选择模型，但我找不到如何添加自定义颜色选择器。

任何人都可以帮助我吗？

感谢。

Answer 1

查看JSColor：

http://jscolor.com/

它是一个开源且易于使用的Javascript库。您所要做的就是在应用程序中的某个位置导入库，而不是简单地使用“color”类创建输入。 JSColor完成剩下的工作。我刚刚在最近的Magento项目中使用它，希望它也能满足您的需求。

<强>更新：为了更深入地回答海报的问题，这里是我如何在我的magento应用程序中实现jscolor：

首先确保你已经提取了JSColor的javascript文件，我在我的模块的layout.xml中做了这个，你也可以这样做：

<layout version="0.1.0">
<default>
    <reference name="head">
        <action method="addJs">
            <script>jscolor/jscolor.js</script>
        </action>
    </reference>
</default>

在自定义块的html中，您可以放置代码来创建jscolor输入：

<input class="color {required:false, adjust:false, hash:true}">

使用JSColor就像将类指定为颜色一样简单，加上您想要设置的任何其他设置（参见jscolor文档）。

或者，如果您使用的是标准Magento管理面板表单并且想要利用预制的Magento块，则可以让您的块扩展Varien_Data_Form_Element_Text并执行以下操作：

$fieldset->addType('mycustomblock', 'Mycompany_Mymodule_Block_Adminhtml_Edit_Elements_Mycustomblock');

            $fieldset->addField(
            'mycustomblock',
            'mycustomblock',
            array(
                'label'     => Mage::helper('MyModule')->__($label),
                'required'  => true,
                'name'      => 'yourinputname',
                'class'     => 'color {required:false, adjust:false, hash:true}',
                'value'     => $value
            )
        );

Answer 2

在MAGENTO ADMIN CONFIGURATION PAGE中添加颜色选择器

有时您可能希望在Magento模块或扩展程序的管理配置页面中添加颜色选择器。您可能认为这是一项重大任务，但请相信我这就像任何事情一样简单。很少有XML代码可以为您完成。以下是执行此操作的确切步骤。

在adminhtml/default/default/layout目录中，为模块创建布局XML文件。让我们将其命名为picker.xml。在picker.xml中写下以下内容： -

   <?xml version="1.0"?>
     <layout version="0.1.1">
        <adminhtml_system_config_edit>
           <reference name="head">
               <action method="addJs"><file>jscolor/jscolor.js</file></action>
           </reference>
        </adminhtml_system_config_edit>
     </layout>

将模块config.xml中的布局文件声明为：

<config>
 ...
   <adminhtml>
     <layout>
       <updates>
         <basket>
           <file>picker.xml</file>
         </basket>
       </updates>
     </layout>
   </adminhtml>
 ...
</config>

在您的模块system.xml中，将颜色选择器字段添加为：

<config>
   <sections>
     <myconfig module="picker" translate="label">
  <groups>
<my_group translate="label">
  <my_color>
   <label>Background Color</label>
   <frontend_type>text</frontend_type>
   <validate>color</validate> <!-- This is important -->
   <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>
   <comment>Specify the background color.</comment>
  </my_color>
<my_group>

就是这样，你就完成了。 它将在管理员系统配置字段中显示如下： -

Answer 3

您还可以在字段定义中添加验证颜色，它会自动显示颜色选择器已在管理员中加载jscolor库。

                   <color_field>
                        <label>Color</label>
                        <frontend_type>text</frontend_type>
                        <validate>color</validate>
                        <sort_order>12</sort_order>
                        <show_in_default>1</show_in_default>
                        <show_in_website>1</show_in_website>
                        <show_in_store>1</show_in_store>
                    </color_field>

magento管理面板中的颜色选择器

3 个答案: