Introducing the Crayonbox Color Picker plugin for jQuery

In one of the products we’re unveiling soon, we need a color picker. But looking at the ones available, nothing was simple enough. Our users don’t need a Photoshop-like interface. They need a few simple colors. Like choosing crayons from a box…

Running with the metaphor, we created the Crayonbox Color Picker. It inserts as many or as few color choices as you want next to an input field. It’s really simple to install, and configure, and doesn’t need any images, just a little styling. And most importantly, it’s really simple to use.

  • Glen

    Perefect! Exactly what I’ve been looking!

  • Glen

    for

  • Glen

    Suggestion: cause <span class=”crayonbox”> to inherit the id from <input type=”text” id=”defaultExample” /> resulting in something like this: <span class=”crayonbox” id=”defaultExample_crayonbox”>. Then we can do: $(”#defaultExample_crayonbox”).click(SomeFunction); with multiple Crayonboxes on a single page.

  • http://gelform.com Corey H Maass

    Glen – Interesting idea. However you can accomplish this with the jQuery ‘:has’ selector. For your example, use $(‘.crayonbox:has(#defaultExample)’).click(SomeFunction);

  • Glen

    Thanks for the tip!

  • Glen

    Is there a way for the user to deselect all crayons?

  • http://gelform.com Corey H Maass

    Right now, no. Thinking to add an option for an X to unselect. Also optionally you’ll be able to use tags instead of tags so you can tab thru them. Or buttons. Version 2, under way.