Digital Magic Productions - jPicker - A jQuery Color Picker Plugin - Quality PLR Download
jPicker - A jQuery Color Picker Plugin. jPicker is a fast, lightweight jQuery plugin for including an advanced color picker in your web projects. It has been painstakenly ported from John Dyers' awesome work on his picker using the Prototype framework.
jPicker supports all current browsers and has been extensively tested in Chrome, Firefox, IE5.5+, Safari, and Opera.
If you are updating a current version, you MUST always use the CSS and image files from the download as there may have been changes.
If you are moving from a V1.0.* version, you MUST read the docs below to implement some changes to the Color object returned by the callback functions.
View John Dyer's prototype plugin here.
View jPicker details a docs below.
Check out the source from Google Code.
jPicker Inline Example jPicker can be used inline by binding to any block level element.
jPicker() -- no arguments
$(document).ready( function() { $('#Inline').jPicker(); });
jPicker Expandable Example jPicker can also display only a small picker icon that opens a popup for editing.
jPicker({ window: { expandable: true }})
$(document).ready( function() { $('#Expandable').jPicker( { window: { expandable: true } }); });
jPicker Alpha Channel Example jPicker can also pick colors with alpha (transparency) values.
jPicker({ window: { expandable: true }})
$(document).ready( function() { $('#Alpha').jPicker( { window: { expandable: true }, color: { alphaSupport: true, active: new $.https://www.tradebit.comor({ ahex: '99330099' }) } }); });
jPicker Binded Example jPicker can also be binded to an input element.
jPicker() -- no arguments
$(document).ready( function() { $('#Binded').jPicker(); });
Multiple jPicker Binded Example jPicker can also be binded to multiple elements at a time.
jPicker() -- no arguments
$(document).ready( function() { $('.Multiple').jPicker(); });
jPicker Callback Functions Register for callback function to have it interact with your page.
jPicker([settings, [commitCallback, [liveCallback, [cancelCallback]]]])
$(document).ready( function() { var LiveCallbackElement = $('#Live'), LiveCallbackButton = $('#LiveButton'); // you don't want it searching this // on every live callback!!! $('#Callbacks').jPicker( {}, function(color, context) { var all = https://www.tradebit.com('all'); alert('Color chosen - hex: ' + (all && '#' + https://www.tradebit.comx || 'none') + ' - alpha: ' + (all && all.a + '' || 'none')); $('#Commit').css( { backgroundColor: all && '#' + https://www.tradebit.comx || 'transparent' }); // prevent IE from throwing exception if hex is empty }, function(color, context) { if (context == https://www.tradebit.com(0)) alert('Color set from button'); var hex = https://www.tradebit.com('hex'); https://www.tradebit.com( { backgroundColor: hex && '#' + hex || 'transparent' }); // prevent IE from throwing exception if hex is empty }, function(color, context) { alert('"Cancel" Button Clicked'); }); $('#LiveButton').click( function() { $.https://www.tradebit.comt[0].https://www.tradebit.com('hex', 'e2ddcf', this); }); }); -- Commit Live
Commit Live
jPicker Settings And Colors Use the "val" method on the active color for interaction with the picker.
(jQuery).https://www.tradebit.comt[index]
$(document).ready( function() { $('#AlterColors').jPicker(); $('#GetActiveColor').click( function() { alert($.https://www.tradebit.comt[0].https://www.tradebit.com('ahex')); }); $('#GetRG').click( function() { var rg=$.https://www.tradebit.comt[0].https://www.tradebit.com('rg'); alert('red: ' + rg.r + ', green: ' + rg.g); }); $('#SetHue').click( function() { $.https://www.tradebit.comt[0].https://www.tradebit.com('h', 133); }); $('#SetValue').click( function() { $.https://www.tradebit.comt[0].https://www.tradebit.com('v', 38); }); $('#SetRG').click( function() { $.https://www.tradebit.comt[0].https://www.tradebit.com('rg', { r: 213, g: 118 }); }); });
jPicker Core jPicker Core function - returns the jQuery object.
jPicker([settings, [commitCallback, [liveCallback, [cancelCallback]]]])
Settings settings [object]: (with defaults)
{ window: // used to define the position of the popup window // only useful in binded mode { title: null, // any title for the jPicker window itself - displays // "Drag Markers To Pick A Color" if left null position: { x: 'screenCenter', // acceptable values "left", "center", "right", // "screenCenter", or relative px value y: 'top', // acceptable values "top", "bottom", "center", or relative px // value }, expandable: false, // default to large static picker - set to true to make an // expandable picker (small icon with popup) - set // automatically when binded to input element liveUpdate: true, // set false if you want the user to click "OK" before the // binded input box updates values (always "true" for // expandable picker) alphaSupport: false, // set to true to enable alpha picking alphaPrecision: 0, // set decimal precision for alpha percentage display - // hex codes do not map directly to percentage integers - // range 0-2 updateInputColor: true // set to false to prevent binded input colors from // changing }, color: { mode: 'h', // acceptable values "h" (hue), "s" (saturation), "v" (brightness), // "r" (red), "g" (green), "b" (blue), "a" (alpha) active: new $.https://www.tradebit.comor({ hex: 'ffc000' }), // accepts any declared // https://www.tradebit.comor object or hex string WITH OR WITHOUT '#' quickList: // this list of quick pick colors - override for a different list [ new $.https://www.tradebit.comor({ h: 360, s: 33, v: 100}), // accepts any declared // https://www.tradebit.comor object or hex string WITH OR WITHOUT '#' new $.https://www.tradebit.comor({ h: 360, s: 66, v: 100}), (...) // removed for brevity new $.https://www.tradebit.comor({ h: 330, s: 100, v: 50}), new $.https://www.tradebit.comor() ] }, images { clientPath: '/jPicker/images/', // Path to image files colorMap: // colorMap size and arrow icon { width: 256, // Map width - don't override unless using a smaller image set height: 256, // Map height - don't override unles using a smaller image set arrow: { file: 'https://www.tradebit.com', // Arrow icon image file width: 15, // Arrow icon width height: 15 // Arrow icon height } }, colorBar: // colorBar size and arrow icon { width: 20, // Bar width - don't override unless using a smaller image set height: 256, // Bar height - don't override unless using a smaller image set arrow: { file: 'https://www.tradebit.com', // Arrow icon image file width: 40, // Arrow icon width height: 9 // Arrow icon height } }, picker: // picker icon and size { file: 'https://www.tradebit.com', // Picker icon image file width: 25, // Picker width - don't override unless using a smaller image set height: 24 // Picker height - don't override unless using a smaller image set } }, localization: { text: { title: 'Drag Markers To Pick A Color', newColor: 'new', currentColor: 'current', ok: 'OK', cancel: 'Cancel' }, tooltips: { colors: { newColor: 'New Color - Press OK To Commit', currentColor: 'Click To Revert To Original Color' }, buttons: { ok: 'Commit To This Color Selection', cancel: 'Cancel And Revert To Original Color' }, hue: { radio: 'Set To Hue Color Mode', textbox: 'Enter A Hue Value (0-360°)' }, saturation: { radio: 'Set To Saturation Color Mode', textbox: 'Enter A Saturation Value (0-100)' }, brightness: { radio: 'Set To Brightness Color Mode', textbox: 'Enter A Brightness Value (0-100)' }, red: { radio: 'Set To Red Color Mode', textbox: 'Enter A Red Value (0-255)' }, green: { radio: 'Set To Green Color Mode', textbox: 'Enter A Green Value (0-255)' }, blue: { radio: 'Set To Blue Color Mode', textbox: 'Enter A Blue Value (0-255)' }, alpha: { radio: 'Set To Alpha Color Mode', textbox: 'Enter A Alpha Value (0-100)' }, hex: { textbox: 'Enter A Hex Color Value (#000000-#ffffff)', alpha: 'Enter A Alpha Value (#00-#ff)' } } } }
Callback Pattern function(https://www.tradebit.comor color, object context){...}
jPicker List The list of active jPicker objects.
(jQuery).https://www.tradebit.comt[]
jPicker Color Class Definition of the https://www.tradebit.comor class.
(jQuery).https://www.tradebit.comor() (jQuery).https://www.tradebit.comor({ ahex: 'ffffffff' }) (jQuery).https://www.tradebit.comor({ hex: 'ffffff', [a: (0-255)] }) (jQuery).https://www.tradebit.comor({ r: (0-255), g: (0-255), b: (0-255), [a: (0-255)] }) (jQuery).https://www.tradebit.comor({ h: (0-360), s: (0-100), v: (0-100), [a: (0-255)] }) { val: function(name, value, context), bind: function(callback) where callback is function(color, [context]), unbind: function(callback) } method "val" usage val(name) : get value 'r': red (0-255) 'g': green (0-255) 'b': blue (0-255) 'a': alpha (0-255) 'h': hue (0-360) 's': saturation (0-100) 'v': value (0-100) 'hex': hex (000000-ffffff) 'ahex': ahex (00000000-ffffffff) 'all': all all ex. Usage val('r'): (0-255) val('h'): (0-360) val('hex'): (000000-ffffff) val('rg'): { r: (0-255), g: (0-255) } val('rgba'): { r: (0-255), g: (0-255), b: (0-255), a: (0-255) } val('hvga'): { h: (0-255), v: (0-100), g: (0-255), a: (0-255) } val('all'): { r: (0-255), g: (0-255), b: (0-255), a: (0-255), h: (0-360) -- s: (0-100), v: (0-100), hex: (000000-ffffff), -- ahex: (00000000-ffffffff) } val(name, value, [context]) : set value 'r': red (0-255) 'g': green (0-255) 'b': blue (0-255) 'a': alpha (0-255) 'h': hue (0-360) 's': saturation (0-100) 'v': value (0-100) 'hex': hex (000000-ffffff) 'ahex': ahex (00000000-ffffffff) ex. Usage val('r', (0-255)) || val('r', { r: (0-255) }) val('h', (0-360)) || val('h', { h: (0-360) }) val('hex', (000000-ffffff)) || val('hex', { hex: (000000-ffffff) }) val('rg', { r: (0-255), g: (0-255) }) val('rgba', { r: (-255), g: (0-255), b: (0-255), a: (0-255) }) val(null, { r: (0-255), g: (0-255) }) val('hvga'): incorrect usage - cannot set hsv AND rgb as they will conflict
jPicker ColorMethod Utility Class Static methods for altering and retrieving different color spaces.
(jQuery).https://www.tradebit.comxToRgba: function(hex) returns { r: (0-255), g: (0-255), b: (0-255), a: (0-255) } (jQuery).https://www.tradebit.comidateHex: function(hex) returns new hex string (jQuery).https://www.tradebit.comaToHex: function({ r: (0-255), g: (0-255), b: (0-255), a: (0-255) }) returns hex string (jQuery).https://www.tradebit.comToHex: function(number) returns hex string (jQuery).https://www.tradebit.comxToInt: function(hex) return integer (jQuery).https://www.tradebit.comToHsv: function({ r: (0-255), g: (0-255), b: (0-255) }) returns { h: (0-360), s: (0-100), v: (0-100) } (jQuery).https://www.tradebit.comToRgb: function({ h: (0-360), s: (0-100), v: (0-100) }) returns { r: (0-255), g: (0-255), b: (0-255) }
Known Issues - Attaching multiple jPicker objects on a single page will slow performance.
- jPicker creates a new instance of the picker for every element. Performance will suffer when binding dozens of instances.
Coming Soon -
- Will consider supporting jQuery ThemeRoller CSS API for theming the UI if demand exists.
Planned For Future Release - Move the jPicker object to a single instance that all selection instances point to.
- This will result in much faster operation and initialization for pages with multiple pickers.
- Add activateCallback option for calling a callback function when the jPicker is activated or its binding is switched to a different picker element.
Change Log - V1.1.5:
- Corrected Color object constructor to allow setting of the "alpha" value as per the documentation which previously didn't work.
- Added support for translucency for quickList colors with checkered background - Only available if "alphaSupport" is enabled.
- Restricted default color to "alpha" of 255 if "alphaSupport" is disabled - It will now assign an explicit alpha of 255 when disabled.
- Added new setting variable "alphaPrecision" which indicates the number of decimal points to allow in the alpha percentage display - Now defaults to 0.
- V1.1.4:
- Changed "alpha" range from 0-100 to 0-255 to correct truncating and rounding errors caused by attempting to get an integer percentage that matches a hex value.
- "alpha" percentage display will now show up to 1 decimal point for more accurate representation of "alpha" value.
- Color object now accepts "alpha" values in a range of 0-255 and also returns the same when getting the "alpha" value. You will need to run ((alpha * 100) / 255) to retrieve a percentage value.
- Reworked the table layout and labels to remove the need for the label to reference the radio input box. This reduces injected code and removes the need to generate unique ids on the radio buttons.
- Transparent/invisible caret on NULL color is now corrected - uses the same caret color as a white color.
- Setting a binded input value of "" or no value attribute will now create a NULL color on initialization instead of the settings default color.
- Added a dynamic, invisible "iframe" behind a dialog picker in all browsers that fail https://www.tradebit.comModel (currently IE
