如何在Rails Active Admin中添加Colorpicker？

Question

我想在其中一个Active Admin表单中实现http://www.eyecon.ro/colorpicker/#about或任何其他颜色选择器。

任何帮助都是适用的。

谢谢，GS

Answer 1

因为你想使用一个“原始”库，它会有点复杂，你应该重命名库正在使用的图像的路径，javascripts等...所以我建议你使用另一个颜色选择器使用rails-integration，它会轻松很多，请查看这个例如jails colorpicker for Rails ，使用此按照以下步骤操作

首先是你的宝石文件

gem 'jquery-minicolors-rails'

第二步将js的requiere添加到active_admin并加载minicolors（）函数

active_admin.js

//= require active_admin/base
//= require jquery
//= require jquery.minicolors
jQuery( function($) {
    $(".colorpicker").minicolors()
});

第三步将css添加到sass活动管理员的顶部

active_admin.css.scss

/*
*= require jquery.minicolors
*/
// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

最后以你的形式出现这样的事情

f.input :name, input_html: { class: 'colorpicker' }

你可以看到我使用类colopicker来识别jquery函数的输入

你可以申请更多的CSS，但这对我来说已经足够了，是最简单的方式， 问候！

Answer 2

最快捷的方法就是使用input_html选项在输入中添加一个类。

f.input :color, input_html: { class: 'colorpicker' }

然后在active_admin.js.coffee ，添加代码以将.colorpicker输入字段转换为颜色选择器。

如果你要制作很多它们，或者为它们添加选项，那么制作一个自定义的Formtastic输入可能是值得的，它可以添加这些类并合并颜色选择器库可以选择的选项。

Answer 3

您可以使用html5颜色输入。 这是一个例子：

f.input :color, as: :color

我正在使用rails 4.2.0和ruby 2.2.1，它对我来说很好。