Archive | JQuery RSS feed for this section

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?

Advertisements