From 77cea8f36476e4195fac38bd57fecd70d642b24d Mon Sep 17 00:00:00 2001
From: Richard Worth
A simple component to select color in the same way you select color in Adobe Photoshop
-Flat mode.
--
-
-$('#colorpickerHolder').ColorPicker({flat: true});
-
- Custom skin and using flat mode to display the color picker in a custom widget.
-Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.
- -
-$('#colorpickerField1').ColorPicker({
- onSubmit: function(hsb, hex, rgb) {
- $('#colorpickerField1').val(hex);
- },
- onBeforeShow: function () {
- $(this).ColorPickerSetColor(this.value);
- }
-})
-.bind('keyup', function(){
- $(this).ColorPickerSetColor(this.value);
-});
-
- Attached to DOMElement and using callbacks to live preview the color and adding animation.
--
-$('#colorSelector').ColorPicker({
- color: '#0000ff',
- onShow: function (colpkr) {
- $(colpkr).fadeIn(500);
- return false;
- },
- onHide: function (colpkr) {
- $(colpkr).fadeOut(500);
- return false;
- },
- onChange: function (hsb, hex, rgb) {
- $('#colorSelector div').css('backgroundColor', '#' + hex);
- }
-});
-
- A simple component to select color in the same way you select color in Adobe Photoshop
+Flat mode.
++
+
+$('#colorpickerHolder').ColorPicker({flat: true});
+
+ Custom skin and using flat mode to display the color picker in a custom widget.
+Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.
+ +
+$('#colorpickerField1').ColorPicker({
+ onSubmit: function(hsb, hex, rgb) {
+ $('#colorpickerField1').val(hex);
+ },
+ onBeforeShow: function () {
+ $(this).ColorPickerSetColor(this.value);
+ }
+})
+.bind('keyup', function(){
+ $(this).ColorPickerSetColor(this.value);
+});
+
+ Attached to DOMElement and using callbacks to live preview the color and adding animation.
++
+$('#colorSelector').ColorPicker({
+ color: '#0000ff',
+ onShow: function (colpkr) {
+ $(colpkr).fadeIn(500);
+ return false;
+ },
+ onHide: function (colpkr) {
+ $(colpkr).fadeOut(500);
+ return false;
+ },
+ onChange: function (hsb, hex, rgb) {
+ $('#colorSelector div').css('backgroundColor', '#' + hex);
+ }
+});
+
+ Blind horizontally
-Blind vertically
-Bounce 3 times
-Clip horizontally
-Clip vertically
-Drop down
-Drop up
-Drop left
-Drop right
-Explode in 9 pieces
-Explode in 36 pieces
-Fold
-Highlight
-Pulsate 2 times
-Puff
-Scale
-Shake
-Slide down
-Slide up
-Slide left
-Slide right
-Transfer to first element
-Blind horizontally
+Blind vertically
+Bounce 3 times
+Clip horizontally
+Clip vertically
+Drop down
+Drop up
+Drop left
+Drop right
+Explode in 9 pieces
+Explode in 36 pieces
+Fold
+Highlight
+Pulsate 2 times
+Puff
+Scale
+Shake
+Slide down
+Slide up
+Slide left
+Slide right
+Transfer to first element
+This is a visual test page for developers and demonstrates some of the features included in ui.spinner. Mousewheel support is provided by the mousewheel plugin.
- --
- -- - - - -
- --
- -- - - - -
- --
- -- - - - -
- --
- - - - -
- --
- -- - - - -
- -This is a visual test page for developers and demonstrates some of the features included in ui.spinner. Mousewheel support is provided by the mousewheel plugin.
+ ++
+ ++ + + + +
+ ++
+ ++ + + + +
+ ++
+ ++ + + + +
+ ++
+ + + + +
+ ++
+ ++ + + + +
+ +