29
DEC
Colour Picker Rails Plugin
Posted by Adam Posted in Rails Plugins 9 comments
A useful form helper to provide an easy to use colour picker field. Using this plugin you can simply provide a colour field with an integrated javascript colour picker.
Installation Instructions
1. Install the plugin into your Rails application
./script/plugin install http://svn.plasticrain.com/stuff/rails/plugins/colour_picker
This will automatically copy some required resources into the appropriate locations. The colour_picker.js file which powers all the javascript actions will be copied into public/javascripts. Also, a new folder will be created in your public/images folder to contain two required images – a spacer and alternative button icon.
You need to include the javascript in your application’s layout.
<%=javascript_include_tag 'colour_picker'%>
Within your form, simply call the ‘colour_field’ method:
<%=colour_field :object, :method%>
Usage Examples
Use the colour field with a graphical swatch icon rather than a button:
<%=colour_field :object, :method, :use_swatch_icon => true%>
Change the label of the default button:
<%=colour_field :object, :method, {}, {:value => 'Choose a colour' }%>
Code
Subversion – http://svn.plasticrain.com/stuff/rails/plugins/colour_picker
Comments
Add a Comment
pol says....
Thanks for the excellent plugin. Since it is only polite to ask: what license are you distributing this plugin under? Do I have permission to use it in an app that will be used for science?
Posted on Monday, 04 February 2008
pol says....
There is a small bug in this, your javascript references “images/spacer.gif” in the code, but it should be “images/colour_picker/spacer.gif”. There are two links to the image in the JS, the first one is correct, the second one is wrong.
Posted on Monday, 04 February 2008
Adam says....
Hi pol, it’s distributed under the MIT licence. I thought I had put it in the repo.
Also, I will update the javascript files for future reference.
Posted on Wednesday, 06 February 2008
Jeff Coleman says....
Does this allow the user to enter text for the color if they choose? I’m looking for one that allows them to enter the hex code or name of the color, OR use a color picker.
Posted on Sunday, 24 February 2008
Adam Cooke says....
Hi Jeff – yes, the user can enter a hex code directly into the input box if they wish.
Posted on Sunday, 24 February 2008
Dianna says....
I keep getting “Plugin not found” – is this still available?
Posted on Sunday, 02 March 2008
Adam says....
Hi Dianna – all should be fixed now – sorry about that – moved things to a new server and never changed my links over :(
Posted on Monday, 03 March 2008
anne says....
hi, i am not too familiar with scripting and i don’t get how to change the css styles of the colorpickerbox (comes below my lightbox layer which is containing the colorpicker button). i found css styles in the js file but i do not get it how to change it..? thx for any helping in advance..
Posted on Wednesday, 02 April 2008
cs says....
Anne,
in public/javascripts/colour_picker.js around line 50 add a z_index:
document.writeln(”#cp_colorpickerbox {z-index: 100; position: absolute;
Posted on Tuesday, 27 May 2008