library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Remove label texts, using the background labels

Browse Source
This commit is contained in:
Eduardo Lundgren 2008-08-24 23:35:26 +00:00
parent 9c53dbaf88
commit 339bfaf1b2
1 changed files with 50 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
ui/ui.colorpicker.js
View File

@ -4,7 +4,7 @@
* Copyright (c) 2008 Stefan Petre, Paul Bakaus * Copyright (c) 2008 Stefan Petre, Paul Bakaus
* Dual licensed under the MIT (MIT-LICENSE.txt) * Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses. * and GPL (GPL-LICENSE.txt) licenses.
* *
* http://docs.jquery.com/UI/ColorPicker * http://docs.jquery.com/UI/ColorPicker
* *
* Depends: * Depends:
@ -13,12 +13,12 @@
(function ($) { (function ($) {
$.widget("ui.colorpicker", { $.widget("ui.colorpicker", {
_init: function() { _init: function() {
this.charMin = 65; this.charMin = 65;
var o = this.options, self = this, var o = this.options, self = this,
tpl = '<div class="ui-colorpicker clearfix"><div class="ui-colorpicker-color"><div><div></div></div></div><div class="ui-colorpicker-hue"><div></div></div><div class="ui-colorpicker-new-color"></div><div class="ui-colorpicker-current-color"></div><div class="ui-colorpicker-hex"><label for="ui-colorpicker-hex" title="hex">#</label><input type="text" maxlength="6" size="6" /></div><div class="ui-colorpicker-rgb-r ui-colorpicker-field"><label for="ui-colorpicker-rgb-r">R</label><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-g ui-colorpicker-field"><label for="ui-colorpicker-rgb-g">G</label><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-rgb-b ui-colorpicker-field"><label for="ui-colorpicker-rgb-b">B</label><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-h ui-colorpicker-field"><label for="ui-colorpicker-hsb-h">H</label><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-s ui-colorpicker-field"><label for="ui-colorpicker-hsb-s">S</label><input type="text" maxlength="3" size="3" /><span></span></div><div class="ui-colorpicker-hsb-b ui-colorpicker-field"><label for="ui-colorpicker-hsb-b">B</label><input type="text" maxlength="3" size="3" /><span></span></div><button class="ui-colorpicker-submit ui-default-state" name="submit" type="submit">Done</button></div>'; tpl = '<div class="ui-colorpicker clearfix"><div class="ui-colorpicker-color"><div><div></div></div></div><div class="ui-colorpicker-hue"><div></div></div><div class="ui-colorpicker-new-color"></div><div class="ui-colorpicker-current-color"></div><div class="ui-colorpicker-hex"><label for="ui-colorpicker-hex" title="hex"></label><input type="text" maxlength="6" size="6" /></div><div class="ui-colorpicker-rgb-r ui-colorpicker-field"><label for="ui-colorpicker-rgb-r"></label><input type="text" maxlength="3" size="2" /><span></span></div><div class="ui-colorpicker-rgb-g ui-colorpicker-field"><label for="ui-colorpicker-rgb-g"></label><input type="text" maxlength="3" size="2" /><span></span></div><div class="ui-colorpicker-rgb-b ui-colorpicker-field"><label for="ui-colorpicker-rgb-b"</label><input type="text" maxlength="3" size="2" /><span></span></div><div class="ui-colorpicker-hsb-h ui-colorpicker-field"><label for="ui-colorpicker-hsb-h"></label><input type="text" maxlength="3" size="2" /><span></span></div><div class="ui-colorpicker-hsb-s ui-colorpicker-field"><label for="ui-colorpicker-hsb-s"></label><input type="text" maxlength="3" size="2" /><span></span></div><div class="ui-colorpicker-hsb-b ui-colorpicker-field"><label for="ui-colorpicker-hsb-b"></label><input type="text" maxlength="3" size="2" /><span></span></div><button class="ui-colorpicker-submit ui-default-state" name="submit" type="button">Done</button></div>';
if (typeof o.color == 'string') { if (typeof o.color == 'string') {
this.color = this._HexToHSB(o.color); this.color = this._HexToHSB(o.color);
@ -29,37 +29,37 @@ $.widget("ui.colorpicker", {
} else { } else {
return this; return this;
} }
this.origColor = this.color; this.origColor = this.color;
this.picker = $(tpl); this.picker = $(tpl);
if (o.flat) { if (o.flat) {
this.picker.appendTo(this.element).show(); this.picker.appendTo(this.element).show();
} else { } else {
this.picker.appendTo(document.body); this.picker.appendTo(document.body);
} }
this.fields = this.picker.find('input') this.fields = this.picker.find('input')
.bind('keydown', function(e) { return self._keyDown.call(self, e); }) .bind('keydown', function(e) { return self._keyDown.call(self, e); })
.bind('change', function(e) { return self._change.call(self, e); }) .bind('change', function(e) { return self._change.call(self, e); })
.bind('blur', function(e) { return self._blur.call(self, e); }) .bind('blur', function(e) { return self._blur.call(self, e); })
.bind('focus', function(e) { return self._focus.call(self, e); }); .bind('focus', function(e) { return self._focus.call(self, e); });
this.picker.find('span').bind('mousedown', function(e) { return self._downIncrement.call(self, e); }); this.picker.find('span').bind('mousedown', function(e) { return self._downIncrement.call(self, e); });
this.selector = this.picker.find('div.ui-colorpicker-color').bind('mousedown', function(e) { return self._downSelector.call(self, e); }); this.selector = this.picker.find('div.ui-colorpicker-color').bind('mousedown', function(e) { return self._downSelector.call(self, e); });
this.selectorIndic = this.selector.find('div div'); this.selectorIndic = this.selector.find('div div');
this.hue = this.picker.find('div.ui-colorpicker-hue div'); this.hue = this.picker.find('div.ui-colorpicker-hue div');
this.picker.find('div.ui-colorpicker-hue').bind('mousedown', function(e) { return self._downHue.call(self, e); }); this.picker.find('div.ui-colorpicker-hue').bind('mousedown', function(e) { return self._downHue.call(self, e); });
this.newColor = this.picker.find('div.ui-colorpicker-new-color'); this.newColor = this.picker.find('div.ui-colorpicker-new-color');
this.currentColor = this.picker.find('div.ui-colorpicker-current-color'); this.currentColor = this.picker.find('div.ui-colorpicker-current-color');
this.picker.find('div.ui-colorpicker-submit') this.picker.find('.ui-colorpicker-submit')
.bind('mouseenter', function(e) { return self._enterSubmit.call(self, e); }) .bind('mouseenter', function(e) { return self._enterSubmit.call(self, e); })
.bind('mouseleave', function(e) { return self._leaveSubmit.call(self, e); }) .bind('mouseleave', function(e) { return self._leaveSubmit.call(self, e); })
.bind('click', function(e) { return self._clickSubmit.call(self, e); }); .bind('click', function(e) { return self._clickSubmit.call(self, e); });
this._fillRGBFields(this.color); this._fillRGBFields(this.color);
this._fillHSBFields(this.color); this._fillHSBFields(this.color);
this._fillHexFields(this.color); this._fillHexFields(this.color);
@ -67,7 +67,7 @@ $.widget("ui.colorpicker", {
this._setSelector(this.color); this._setSelector(this.color);
this._setCurrentColor(this.color); this._setCurrentColor(this.color);
this._setNewColor(this.color); this._setNewColor(this.color);
if (o.flat) { if (o.flat) {
this.picker.css({ this.picker.css({
position: 'relative', position: 'relative',
@ -78,14 +78,14 @@ $.widget("ui.colorpicker", {
} }
}, },
destroy: function() { destroy: function() {
this.picker.remove(); this.picker.remove();
this.element.removeData("colorpicker").unbind(".colorpicker"); this.element.removeData("colorpicker").unbind(".colorpicker");
}, },
_fillRGBFields: function(hsb) { _fillRGBFields: function(hsb) {
var rgb = this._HSBToRGB(hsb); var rgb = this._HSBToRGB(hsb);
this.fields this.fields
@ -126,7 +126,7 @@ $.widget("ui.colorpicker", {
} }
}, },
_change: function(e, target) { _change: function(e, target) {
var col; var col;
target = target || e.target; target = target || e.target;
if (target.parentNode.className.indexOf('-hex') > 0) { if (target.parentNode.className.indexOf('-hex') > 0) {
@ -153,11 +153,11 @@ $.widget("ui.colorpicker", {
this._setSelector(col); this._setSelector(col);
this._setHue(col); this._setHue(col);
this._setNewColor(col); this._setNewColor(col);
this._trigger('change', e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) }); this._trigger('change', e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) });
}, },
_blur: function(e) { _blur: function(e) {
var col = this.color; var col = this.color;
this._fillRGBFields(col); this._fillRGBFields(col);
this._fillHSBFields(col); this._fillHSBFields(col);
@ -166,17 +166,17 @@ $.widget("ui.colorpicker", {
this._setSelector(col); this._setSelector(col);
this._setNewColor(col); this._setNewColor(col);
this.fields.parent().removeClass('ui-colorpicker-focus'); this.fields.parent().removeClass('ui-colorpicker-focus');
}, },
_focus: function(e) { _focus: function(e) {
this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65; this.charMin = e.target.parentNode.className.indexOf('-hex') > 0 ? 70 : 65;
this.fields.parent().removeClass('ui-colorpicker-focus'); this.fields.parent().removeClass('ui-colorpicker-focus');
$(e.target.parentNode).addClass('ui-colorpicker-focus'); $(e.target.parentNode).addClass('ui-colorpicker-focus');
}, },
_downIncrement: function(e) { _downIncrement: function(e) {
var field = $(e.target).parent().find('input').focus(), self = this; var field = $(e.target).parent().find('input').focus(), self = this;
this.currentIncrement = { this.currentIncrement = {
el: $(e.target).parent().addClass('ui-colorpicker-slider'), el: $(e.target).parent().addClass('ui-colorpicker-slider'),
@ -188,7 +188,7 @@ $.widget("ui.colorpicker", {
$(document).bind('mouseup.cpSlider', function(e) { return self._upIncrement.call(self, e); }); $(document).bind('mouseup.cpSlider', function(e) { return self._upIncrement.call(self, e); });
$(document).bind('mousemove.cpSlider', function(e) { return self._moveIncrement.call(self, e); }); $(document).bind('mousemove.cpSlider', function(e) { return self._moveIncrement.call(self, e); });
return false; return false;
}, },
_moveIncrement: function(e) { _moveIncrement: function(e) {
this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10)))); this.currentIncrement.field.val(Math.max(0, Math.min(this.currentIncrement.max, parseInt(this.currentIncrement.val + e.pageY - this.currentIncrement.y, 10))));
@ -203,11 +203,11 @@ $.widget("ui.colorpicker", {
return false; return false;
}, },
_downHue: function(e) { _downHue: function(e) {
this.currentHue = { this.currentHue = {
y: this.picker.find('div.ui-colorpicker-hue').offset().top y: this.picker.find('div.ui-colorpicker-hue').offset().top
}; };
this._change.apply(this, [e, this this._change.apply(this, [e, this
.fields .fields
.eq(4) .eq(4)
@ -218,10 +218,10 @@ $.widget("ui.colorpicker", {
$(document).bind('mouseup.cpSlider', function(e) { return self._upHue.call(self, e); }); $(document).bind('mouseup.cpSlider', function(e) { return self._upHue.call(self, e); });
$(document).bind('mousemove.cpSlider', function(e) { return self._moveHue.call(self, e); }); $(document).bind('mousemove.cpSlider', function(e) { return self._moveHue.call(self, e); });
return false; return false;
}, },
_moveHue: function(e) { _moveHue: function(e) {
this._change.apply(this, [e, this this._change.apply(this, [e, this
.fields .fields
.eq(4) .eq(4)
@ -229,7 +229,7 @@ $.widget("ui.colorpicker", {
.get(0)]); .get(0)]);
return false; return false;
}, },
_upHue: function(e) { _upHue: function(e) {
$(document).unbind('mouseup.cpSlider'); $(document).unbind('mouseup.cpSlider');
@ -237,12 +237,12 @@ $.widget("ui.colorpicker", {
return false; return false;
}, },
_downSelector: function(e) { _downSelector: function(e) {
var self = this; var self = this;
this.currentSelector = { this.currentSelector = {
pos: this.picker.find('div.ui-colorpicker-color').offset() pos: this.picker.find('div.ui-colorpicker-color').offset()
}; };
this._change.apply(this, [e, this this._change.apply(this, [e, this
.fields .fields
.eq(6) .eq(6)
@ -255,10 +255,10 @@ $.widget("ui.colorpicker", {
$(document).bind('mouseup.cpSlider', function(e) { return self._upSelector.call(self, e); }); $(document).bind('mouseup.cpSlider', function(e) { return self._upSelector.call(self, e); });
$(document).bind('mousemove.cpSlider', function(e) { return self._moveSelector.call(self, e); }); $(document).bind('mousemove.cpSlider', function(e) { return self._moveSelector.call(self, e); });
return false; return false;
}, },
_moveSelector: function(e) { _moveSelector: function(e) {
this._change.apply(this, [e, this this._change.apply(this, [e, this
.fields .fields
.eq(6) .eq(6)
@ -269,7 +269,7 @@ $.widget("ui.colorpicker", {
.get(0) .get(0)
]); ]);
return false; return false;
}, },
_upSelector: function(e) { _upSelector: function(e) {
$(document).unbind('mouseup.cpSlider'); $(document).unbind('mouseup.cpSlider');
@ -277,25 +277,25 @@ $.widget("ui.colorpicker", {
return false; return false;
}, },
_enterSubmit: function(e) { _enterSubmit: function(e) {
this.picker.find('div.ui-colorpicker-submit').addClass('ui-colorpicker-focus'); this.picker.find('.ui-colorpicker-submit').addClass('ui-colorpicker-focus');
}, },
_leaveSubmit: function(e) { _leaveSubmit: function(e) {
this.picker.find('div.ui-colorpicker-submit').removeClass('ui-colorpicker-focus'); this.picker.find('.ui-colorpicker-submit').removeClass('ui-colorpicker-focus');
}, },
_clickSubmit: function(e) { _clickSubmit: function(e) {
var col = this.color; var col = this.color;
this.origColor = col; this.origColor = col;
this._setCurrentColor(col); this._setCurrentColor(col);
this._trigger("submit", e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) }); this._trigger("submit", e, { options: this.options, hsb: col, hex: this._HSBToHex(col), rgb: this._HSBToRGB(col) });
return false; return false;
}, },
_show: function(e) { _show: function(e) {
this._trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }); this._trigger("beforeShow", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) });
var pos = this.element.offset(); var pos = this.element.offset();
var viewPort = this._getScroll(); var viewPort = this._getScroll();
var top = pos.top + this.element[0].offsetHeight; var top = pos.top + this.element[0].offsetHeight;
@ -310,21 +310,21 @@ $.widget("ui.colorpicker", {
if (this._trigger("show", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) { if (this._trigger("show", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) {
this.picker.show(); this.picker.show();
} }
var self = this; var self = this;
$(document).bind('mousedown.colorpicker', function(e) { return self._hide.call(self, e); }); $(document).bind('mousedown.colorpicker', function(e) { return self._hide.call(self, e); });
return false; return false;
}, },
_hide: function(e) { _hide: function(e) {
if (!this._isChildOf(this.picker[0], e.target, this.picker[0])) { if (!this._isChildOf(this.picker[0], e.target, this.picker[0])) {
if (this._trigger("hide", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) { if (this._trigger("hide", e, { options: this.options, hsb: this.color, hex: this._HSBToHex(this.color), rgb: this._HSBToRGB(this.color) }) != false) {
this.picker.hide(); this.picker.hide();
} }
$(document).unbind('mousedown.colorpicker'); $(document).unbind('mousedown.colorpicker');
} }
}, },
_isChildOf: function(parentEl, el, container) { _isChildOf: function(parentEl, el, container) {
if (parentEl == el) { if (parentEl == el) {
@ -367,14 +367,14 @@ $.widget("ui.colorpicker", {
s: Math.min(100, Math.max(0, hsb.s)), s: Math.min(100, Math.max(0, hsb.s)),
b: Math.min(100, Math.max(0, hsb.b)) b: Math.min(100, Math.max(0, hsb.b))
}; };
}, },
_fixRGB: function(rgb) { _fixRGB: function(rgb) {
return { return {
r: Math.min(255, Math.max(0, rgb.r)), r: Math.min(255, Math.max(0, rgb.r)),
g: Math.min(255, Math.max(0, rgb.g)), g: Math.min(255, Math.max(0, rgb.g)),
b: Math.min(255, Math.max(0, rgb.b)) b: Math.min(255, Math.max(0, rgb.b))
}; };
}, },
_HexToRGB: function (hex) { _HexToRGB: function (hex) {
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)}; return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
@ -458,7 +458,7 @@ $.widget("ui.colorpicker", {
this._setNewColor(col); this._setNewColor(col);
} }
}); });
$.extend($.ui.colorpicker, { $.extend($.ui.colorpicker, {