From 979e64bdd20afd4fd096c5fe089d3aa6e3c89880 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 10 Jul 2008 15:52:18 +0000 Subject: - moved all default css files into themes/default - added Colorpicker, heavily modified for UI (thanks Stefan!) --- tests/visual/colorpicker.html | 358 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 358 insertions(+) create mode 100644 tests/visual/colorpicker.html (limited to 'tests') diff --git a/tests/visual/colorpicker.html b/tests/visual/colorpicker.html new file mode 100644 index 000000000..ef99f13fe --- /dev/null +++ b/tests/visual/colorpicker.html @@ -0,0 +1,358 @@ + + + + + + ColorPicker + + + + + + + + + + + + + + +
+

Color Picker

+ +
+
+

About

+

A simple component to select color in the same way you select color in Adobe Photoshop

+

Features

+
    +
  • Flat mode - as element in page
    • +
  • Powerful controls for color selection
    • +
  • Easy to customize the look by changing some images
    • +
  • Fits into the viewport
    • +
+

Examples

+

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);
+	}
+});
+
+
+
+
+ + -- cgit v1.2.3