Как добавить Colorpicker в Rails Active Admin?

Question

Я хочу реализовать это http://www.eyecon.ro/colorpicker/#about или любой другой набор цветов в одной из форм активного администратора.

Любая помощь понесена.

Спасибо, GS

Answer 1

Самый быстрый способ, чтобы получить эту работу просто добавить класс к введенному с помощью input_html опций.

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

А потом в active_admin.js.coffee, добавьте в код, чтобы включить .colorpicker поля ввода в цвет сборщиков.

Если вы собираетесь делать много из них или добавлять к ним варианты, возможно, стоит сделать custom Formtastic input, который добавляет эти классы и объединяет параметры, которые могут быть выбраны библиотекой colorpicker.

Answer 2

Поскольку вы хотите использовать «сырую» библиотеку, это будет немного сложнее, вы должны переименовать пути изображений, которые использует библиотека, javascripts и т. Д. ... поэтому я порекомендую вас использовать другой ColorPicker с рельсами-интеграции, это будет намного проще, проверить это один для примера jQuery colorpicker for Rails, чтобы использовать это следить за этим шаги

первый ваш Gemfile

gem 'jquery-minicolors-rails' 

второй добавить requiere для JS в active_admin и загрузить функцию minicolors()

active_admin.js 

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

третий добавить CSS в верхней части дерзости активного администратора

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 3

Вы можете использовать цветной ввод html5. Вот пример:

f.input :color, as: :color

Я использую рельсы 4.2.0 и 2.2.1 рубин и она отлично работает для меня.