[英]How to add Colorpicker in Rails Active Admin?
因為你想使用一個“原始”庫,它會有點復雜,你應該重命名庫正在使用的圖像的路徑,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,但這對我來說已經足夠了,是最簡單的方式, 問候!
最快捷的方法就是使用input_html
選項在輸入中添加一個類。
f.input :color, input_html: { class: 'colorpicker' }
然后在active_admin.js.coffee
,添加代碼以將.colorpicker
輸入字段轉換為顏色選擇器。
如果你要制作很多它們,或者為它們添加選項,那么制作一個自定義的Formtastic輸入可能是值得的,它可以添加這些類並合並顏色選擇器庫可以選擇的選項。
您可以使用html5顏色輸入。 這是一個例子:
f.input :color, as: :color
我正在使用rails 4.2.0和ruby 2.2.1,它對我來說很好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.