README

一个非常简单的用于 Symfony2 表单的颜色选择器，使用 tkrotoff 的 simplecolorpicker

安装

此包与 Symfony 2.1 兼容。请在您的 composer.json 中添加以下内容

"oh/color-picker-type-bundle": "dev-master"

在 composer.json 中的 repositories 数组中，您需要添加 JavaScript 包

    "repositories" : [{
        "type": "package",
        "package": {
            "version": "master",
            "name": "tkrotoff/jquery-simplecolorpicker",
            "source": {
                "url": "https://github.com/tkrotoff/jquery-simplecolorpicker.git",
                "type": "git",
                "reference": "master"
            }
        }
}
]

在您的 app/AppKernel.php 中注册此包

// app/AppKernel.php
public function registerBundles()
    {
        $bundles = array(
            new Oh\ColorPickerTypeBundle\OhColorPickerTypeBundle(),
            // ...

如果您尝试使用 Symfony 2.0，可能需要更改一些选项

如果您想自动包含包中的资产，请将 OhColorPickerTypeBundle 添加到 assetic

# app/config/config.yml
# Assetic Configuration
assetic:
    bundles:        [ 'OhColorPickerTypeBundle' ]

使用方法

此包包含一个新的 FormType，名为 ColorPickerType，可以像这样用于您的表单

use Oh\ColorPickerTypeBundle\Form\Type\ColorPickerType;
[...]
$builder->add('color', new ColorPickerType());

在您的模型中可以添加验证类

// Your model eg, src/My/Colors/Entity/MyColor.php
use Symfony\Component\Validator\Constraints as Assert;
use Oh\ColorPickerTypeBundle\Validator\Constraints as OhAssertColor;

class MyColor
{

    /**
     * @ORM\Column(type="string", length=6, nullable=true)
     * @Assert\NotBlank()
     * @OhAssertColor\HexColor(groups={"colours"})
     */
    public $color;

}

包含布局的 twig 模板。

# your config.yml
twig:
    form:
        resources:
            # This uses the default - you can put your own one here
            - 'OhColorPickerTypeBundle:Form:fields.html.twig'

# or in your twig template
{% form_theme my_form 'OhColorPickerTypeBundle:Form:_event.html.twig' %}

选项

有几个选项，大多数都是自我解释的。建议您将 JavaScript 和 CSS 与其他库一起包含，但如果您想快速测试，可以使用下面的 include_* 选项通过表单字段包含它们（您必须将包添加到您的配置中的 assetic.bundles 数组中 - 见上面）。

array(
        'include_jquery'    => false, // include jquery from google cdn
        'include_js'        => false, // include the javascript
        'include_js_constructor'=>true, // include the constructor for each field
        'include_css'       => false, // include the css
        'picker'            => false // an openable picker rather than an expanded selection
)

截图

默认表单

已知问题

因为表单类型模板包含 JavaScript，所以目前还没有一种方法可以将它们全部放在页面底部，所以它们被包含在字段的底部。这意味着 jQuery 和 JavaScript 插件需要在字段之前包含。我不确定是否有解决方法，但我想这将在表单框架的后续版本中得到解决。

致谢

• Ollie Harridge (ollietb) 为主要作者。
• Tanguy Krotoff (tkrotoff) 为 jQuery 插件