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

Question

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

谁能帮我吗？

谢谢。

score 7 · Accepted Answer

查看 JSColor：

它是一个开源且非常易于使用的 Javascript 库。您所要做的就是在应用程序的某个地方导入库，而不是简单地使用“颜色”类创建一个输入。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
            )
        );

score 1 · Accepted Answer

在 MAGENTO 管理员配置页面中添加颜色选择器

有时您可能想在 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>

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

score 0 · Accepted Answer

您还可以将验证颜色添加到字段定义中，它将自动显示颜色选择器已在管理员中加载了 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 - magento 管理面板中的颜色选择器

3 回答 3

Related

Reference