@@ -23,6 +23,17 @@ //$('#color1').change(function(){ //alert("color changed"); //}); + + $("#button1").click(function(){ + $("#color1").val("#ffffff"); + $("#color1").change(); + }); + + $("#button2").click(function(){ + $("#color2").val("#000000"); + $("#color2").change(); + }); + }); </script> @@ -65,7 +76,14 @@ div.form-container div.controlset label { width: 100px;} <div class="controlset"><label for="color1">Color 1</label> <input id="color1" type="text" name="color1" value="#333399" /></div> <div class="controlset"><label for="color2">Color 2</label> <input id="color2" type="text" name="color2" value="#FF0000" /></div> <div class="controlset"><label for="color3">Color 3</label> <input id="color3" type="text" name="color3" value="#99cc00" /></div> + </fieldset> + + <div class="buttonrow"> + <div><button type="button" id="button1">Set Color 1 to #FFF</button></div> + <div><button type="button" id="button2">Set Color 2 to #000</button></div> + </div> + </form> </div> demo.html @@ -9,7 +9,8 @@ (function($){ $.fn.colorPicker = function(){ if(this.length > 0) buildSelector(); - return this.each(function(i) { buildPicker(this)}); + return this.each(function(i) { + buildPicker(this)}); }; var selectorOwner; @@ -25,9 +26,16 @@ //add the color picker section $(element).after(control); + + //add even listener to input box + $(element).bind("change", function() { + selectedValue = toHex($(element).val()); + $(element).next(".color_picker").css("background-color", selectedValue); + }); //hide the input box $(element).hide(); + }; buildSelector = function(){ @@ -61,7 +69,6 @@ $("body").append(selector); selector.hide(); - }; checkMouse = function(event){ jquery.colorPicker.js ec028830c312738e4aed26ac06cee33fe81e7f42 lakshan lakshan@web2media.net http://github.com/laktek/really-simple-color-picker/commit/f1c4c494d9e5b3f37844dadef3ae02d1ec0e2909 f1c4c494d9e5b3f37844dadef3ae02d1ec0e2909 2009-10-13T18:33:07-07:00 2009-10-13T18:33:07-07:00 Color picker will change it's color when the input field value is changed externally 1aacbdb9da8075c8a7c5bb78b1a40c5e4fbeefff lakshan lakshan@web2media.net