JQuery: ColorPicker Example

11 Feb

What? Zend guru working with pure JQuery.

You may have question in your mind.

Okay story begins here. Actually I tried my best to attach JQuery ColorPicker to my Zend Form text element using ZendX/JQuery form element, but didn’t succeed.

That was painful.

I tried and tried again, but result was not different. So I decided why not created it using the standard html input box and use java script to attach ColorPicker to that, instead of relaying on the Zend JQuery form elements and helpers.

So here I am, creating input box with JQuery ColorPicker.

I hopefully will try to implement same in the Zend Framework JQuery form elements that are shipped with latest version of ZF.

At the end of this article we will have a ColorPicker like the following.

 

JQuery Color Picker

JQuery Color Picker

 

Firs you will need to have following three files.

jquery.js

colorpicker.js

colorpicker.css

Download these three files from jquery website and place them in the js directory. Now

Write the following code in your file

<link rel=”stylesheet” href=”css/colorpicker.css” type=”text/css” />

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript” src=”js/colorpicker.js”></script>

<input type=”text” maxlength=”6″ size=”6″ id=”colorpickerField1″ value=”” />

<script>

$(“#colorpickerField1”).colorpicker({});

</script>

What we do in the above code.

  1. include necessary css and js files.
  2. define input box
  3. and

 

<script>

$(“#colorpickerField1”).colorpicker({});

</script>

 

The rest for us, attach a very nice and beautiful ColorPicker to our input box.

However we are not over here.

The real question is how to put color value in the input box?

Yes, a nice question.

So to achieve this you will need to replace

 

<script>

$(“#colorpickerField1”).colorpicker({});

</script>

 

with the following code.

 

<script>

$(‘#colorpickerField1’).ColorPicker({

      onSubmit: function(hsb, hex, rgb) {

                  $(‘#colorpickerField1’).val(hex);

      }

})

</script>

Isn’t it simple enough?

5 Responses to “JQuery: ColorPicker Example”

  1. Ahsan Shahzad February 16, 2009 at 9:36 am #

    nice and informative article🙂,

    how you tried to implement this using Zend framework ?

    i have an idea in my mind for it’s implementations, asking you to match if i am thinking right or not🙂

  2. Ahsan Shahzad February 16, 2009 at 9:38 am #

    one thing more: Nice Template u selected🙂

  3. Sarfraz Ahmed September 24, 2009 at 11:55 am #

    that is nice post🙂

  4. Eduardo Mozart de Oliveira January 9, 2010 at 3:45 am #

    Vry very very very nice post! This helped me a lot of, color picker were giving me headache. Sorry my English, i’m brazilian🙂

  5. Eduardo Mozart de Oliveira January 9, 2010 at 4:24 am #

    Just to help you:
    put the script with this format:

    jQuery(document).ready(function () { $('#colorpickerField2').ColorPicker({
    onSubmit: function(hsb, hex, rgb) {
    $('#colorpickerField2').val(hex);
    }
    }) })


    because IE8 shows error kb927917 with your method.🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: