颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar

from: 颜色选择器 colorpicker
http://jscolor.com/
http://dematte.at/colorPicker/
http://www.free-color-picker.com/color-picker-samples.php
http://www.nogray.com/color_picker.php
http://www.mattkruse.com/javascript/colorpicker/

 

ColorPicker2.js代码
 1 // ===================================================================
 2 // Author: Matt Kruse <matt@mattkruse.com>
 3 // WWW: http://www.mattkruse.com/
 4 //
 5 // NOTICE: You may use this code for any purpose, commercial or
 6 // private, without any further permission from the author. You may
 7 // remove this notice from your final code if you wish, however it is
 8 // appreciated by the author if at least my web site address is kept.
 9 //
10 // You may *NOT* re-distribute this code in any way except through its
11 // use. That means, you can include it in your product, or your web
12 // site, or any other form where the code is actually being used. You
13 // may not put the plain javascript up on your site for download or
14 // include it in your javascript libraries for download. 
15 // If you wish to share this code with others, please just point them
16 // to the URL instead.
17 // Please DO NOT link directly to my .js files from your site. Copy
18 // the files to your server and use them there. Thank you.
19 // ===================================================================
20 
21 /* SOURCE FILE: AnchorPosition.js */
22 function getAnchorPosition(anchorname){var useWindow=false;var coordinates=new Object();var x=0,y=0;var use_gebi=false, use_css=false, use_layers=false;if(document.getElementById){use_gebi=true;}else if(document.all){use_css=true;}else if(document.layers){use_layers=true;}if(use_gebi && document.all){x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);}else if(use_gebi){var o=document.getElementById(anchorname);x=AnchorPosition_getPageOffsetLeft(o);y=AnchorPosition_getPageOffsetTop(o);}else if(use_css){x=AnchorPosition_getPageOffsetLeft(document.all[anchorname]);y=AnchorPosition_getPageOffsetTop(document.all[anchorname]);}else if(use_layers){var found=0;for(var i=0;i<document.anchors.length;i++){if(document.anchors[i].name==anchorname){found=1;break;}}if(found==0){coordinates.x=0;coordinates.y=0;return coordinates;}x=document.anchors[i].x;y=document.anchors[i].y;}else{coordinates.x=0;coordinates.y=0;return coordinates;}coordinates.x=x;coordinates.y=y;return coordinates;}
23 function getAnchorWindowPosition(anchorname){var coordinates=getAnchorPosition(anchorname);var x=0;var y=0;if(document.getElementById){if(isNaN(window.screenX)){x=coordinates.x-document.body.scrollLeft+window.screenLeft;y=coordinates.y-document.body.scrollTop+window.screenTop;}else{x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;}}else if(document.all){x=coordinates.x-document.body.scrollLeft+window.screenLeft;y=coordinates.y-document.body.scrollTop+window.screenTop;}else if(document.layers){x=coordinates.x+window.screenX+(window.outerWidth-window.innerWidth)-window.pageXOffset;y=coordinates.y+window.screenY+(window.outerHeight-24-window.innerHeight)-window.pageYOffset;}coordinates.x=x;coordinates.y=y;return coordinates;}
24 function AnchorPosition_getPageOffsetLeft(el){var ol=el.offsetLeft;while((el=el.offsetParent) != null){ol += el.offsetLeft;}return ol;}
25 function AnchorPosition_getWindowOffsetLeft(el){return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;}
26 function AnchorPosition_getPageOffsetTop(el){var ot=el.offsetTop;while((el=el.offsetParent) != null){ot += el.offsetTop;}return ot;}
27 function AnchorPosition_getWindowOffsetTop(el){return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;}
28 
29 /* SOURCE FILE: PopupWindow.js */
30 function PopupWindow_getXYPosition(anchorname){var coordinates;if(this.type == "WINDOW"){coordinates = getAnchorWindowPosition(anchorname);}else{coordinates = getAnchorPosition(anchorname);}this.x = coordinates.x;this.y = coordinates.y;}
31 function PopupWindow_setSize(width,height){this.width = width;this.height = height;}
32 function PopupWindow_populate(contents){this.contents = contents;this.populated = false;}
33 function PopupWindow_setUrl(url){this.url = url;}
34 function PopupWindow_setWindowProperties(props){this.windowProperties = props;}
35 function PopupWindow_refresh(){if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).innerHTML = this.contents;}else if(this.use_css){document.all[this.divName].innerHTML = this.contents;}else if(this.use_layers){var d = document.layers[this.divName];d.document.open();d.document.writeln(this.contents);d.document.close();}}else{if(this.popupWindow != null && !this.popupWindow.closed){if(this.url!=""){this.popupWindow.location.href=this.url;}else{this.popupWindow.document.open();this.popupWindow.document.writeln(this.contents);this.popupWindow.document.close();}this.popupWindow.focus();}}}
36 function PopupWindow_showPopup(anchorname){this.getXYPosition(anchorname);this.x += this.offsetX;this.y += this.offsetY;if(!this.populated &&(this.contents != "")){this.populated = true;this.refresh();}if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).style.left = this.x + "px";document.getElementById(this.divName).style.top = this.y;document.getElementById(this.divName).style.visibility = "visible";}else if(this.use_css){document.all[this.divName].style.left = this.x;document.all[this.divName].style.top = this.y;document.all[this.divName].style.visibility = "visible";}else if(this.use_layers){document.layers[this.divName].left = this.x;document.layers[this.divName].top = this.y;document.layers[this.divName].visibility = "visible";}}else{if(this.popupWindow == null || this.popupWindow.closed){if(this.x<0){this.x=0;}if(this.y<0){this.y=0;}if(screen && screen.availHeight){if((this.y + this.height) > screen.availHeight){this.y = screen.availHeight - this.height;}}if(screen && screen.availWidth){if((this.x + this.width) > screen.availWidth){this.x = screen.availWidth - this.width;}}var avoidAboutBlank = window.opera ||( document.layers && !navigator.mimeTypes['*']) || navigator.vendor == 'KDE' ||( document.childNodes && !document.all && !navigator.taintEnabled);this.popupWindow = window.open(avoidAboutBlank?"":"about:blank","window_"+anchorname,this.windowProperties+",width="+this.width+",height="+this.height+",screenX="+this.x+",left="+this.x+",screenY="+this.y+",top="+this.y+"");}this.refresh();}}
37 function PopupWindow_hidePopup(){if(this.divName != null){if(this.use_gebi){document.getElementById(this.divName).style.visibility = "hidden";}else if(this.use_css){document.all[this.divName].style.visibility = "hidden";}else if(this.use_layers){document.layers[this.divName].visibility = "hidden";}}else{if(this.popupWindow && !this.popupWindow.closed){this.popupWindow.close();this.popupWindow = null;}}}
38 function PopupWindow_isClicked(e){if(this.divName != null){if(this.use_layers){var clickX = e.pageX;var clickY = e.pageY;var t = document.layers[this.divName];if((clickX > t.left) &&(clickX < t.left+t.clip.width) &&(clickY > t.top) &&(clickY < t.top+t.clip.height)){return true;}else{return false;}}else if(document.all){var t = window.event.srcElement;while(t.parentElement != null){if(t.id==this.divName){return true;}t = t.parentElement;}return false;}else if(this.use_gebi && e){var t = e.originalTarget;while(t.parentNode != null){if(t.id==this.divName){return true;}t = t.parentNode;}return false;}return false;}return false;}
39 function PopupWindow_hideIfNotClicked(e){if(this.autoHideEnabled && !this.isClicked(e)){this.hidePopup();}}
40 function PopupWindow_autoHide(){this.autoHideEnabled = true;}
41 function PopupWindow_hidePopupWindows(e){for(var i=0;i<popupWindowObjects.length;i++){if(popupWindowObjects[i] != null){var p = popupWindowObjects[i];p.hideIfNotClicked(e);}}}
42 function PopupWindow_attachListener(){if(document.layers){document.captureEvents(Event.MOUSEUP);}window.popupWindowOldEventListener = document.onmouseup;if(window.popupWindowOldEventListener != null){document.onmouseup = new Function("window.popupWindowOldEventListener();PopupWindow_hidePopupWindows();");}else{document.onmouseup = PopupWindow_hidePopupWindows;}}
43 function PopupWindow(){if(!window.popupWindowIndex){window.popupWindowIndex = 0;}if(!window.popupWindowObjects){window.popupWindowObjects = new Array();}if(!window.listenerAttached){window.listenerAttached = true;PopupWindow_attachListener();}this.index = popupWindowIndex++;popupWindowObjects[this.index] = this;this.divName = null;this.popupWindow = null;this.width=0;this.height=0;this.populated = false;this.visible = false;this.autoHideEnabled = false;this.contents = "";this.url="";this.windowProperties="toolbar=no,location=no,status=no,menubar=no,scrollbars=auto,resizable,alwaysRaised,dependent,titlebar=no";if(arguments.length>0){this.type="DIV";this.divName = arguments[0];}else{this.type="WINDOW";}this.use_gebi = false;this.use_css = false;this.use_layers = false;if(document.getElementById){this.use_gebi = true;}else if(document.all){this.use_css = true;}else if(document.layers){this.use_layers = true;}else{this.type = "WINDOW";}this.offsetX = 0;this.offsetY = 0;this.getXYPosition = PopupWindow_getXYPosition;this.populate = PopupWindow_populate;this.setUrl = PopupWindow_setUrl;this.setWindowProperties = PopupWindow_setWindowProperties;this.refresh = PopupWindow_refresh;this.showPopup = PopupWindow_showPopup;this.hidePopup = PopupWindow_hidePopup;this.setSize = PopupWindow_setSize;this.isClicked = PopupWindow_isClicked;this.autoHide = PopupWindow_autoHide;this.hideIfNotClicked = PopupWindow_hideIfNotClicked;}
44 
45 
46 /* SOURCE FILE: ColorPicker2.js */
47 
48 ColorPicker_targetInput = null;
49 function ColorPicker_writeDiv(){document.writeln("<DIV ID=\"colorPickerDiv\" STYLE=\"position:absolute;visibility:hidden;\"> </DIV>");}
50 function ColorPicker_show(anchorname){this.showPopup(anchorname);}
51 function ColorPicker_pickColor(color,obj){obj.hidePopup();pickColor(color);}
52 function pickColor(color){if(ColorPicker_targetInput==null){alert("Target Input is null, which means you either didn't use the 'select' function or you have no defined your own 'pickColor' function to handle the picked color!");return;}ColorPicker_targetInput.value = color;}
53 function ColorPicker_select(inputobj,linkname){if(inputobj.type!="text" && inputobj.type!="hidden" && inputobj.type!="textarea"){alert("colorpicker.select: Input object passed is not a valid form input object");window.ColorPicker_targetInput=null;return;}window.ColorPicker_targetInput = inputobj;this.show(linkname);}
54 function ColorPicker_highlightColor(c){var thedoc =(arguments.length>1)?arguments[1]:window.document;var d = thedoc.getElementById("colorPickerSelectedColor");d.style.backgroundColor = c;d = thedoc.getElementById("colorPickerSelectedColorValue");d.innerHTML = c;}
55 function ColorPicker(){var windowMode = false;if(arguments.length==0){var divname = "colorPickerDiv";}else if(arguments[0] == "window"){var divname = '';windowMode = true;}else{var divname = arguments[0];}if(divname != ""){var cp = new PopupWindow(divname);}else{var cp = new PopupWindow();cp.setSize(225,250);}cp.currentValue = "#FFFFFF";cp.writeDiv = ColorPicker_writeDiv;cp.highlightColor = ColorPicker_highlightColor;cp.show = ColorPicker_show;cp.select = ColorPicker_select;var colors = new Array("#000000","#000033","#000066","#000099","#0000CC","#0000FF","#330000","#330033","#330066","#330099","#3300CC",
56 "#3300FF","#660000","#660033","#660066","#660099","#6600CC","#6600FF","#990000","#990033","#990066","#990099",
57 "#9900CC","#9900FF","#CC0000","#CC0033","#CC0066","#CC0099","#CC00CC","#CC00FF","#FF0000","#FF0033","#FF0066",
58 "#FF0099","#FF00CC","#FF00FF","#003300","#003333","#003366","#003399","#0033CC","#0033FF","#333300","#333333",
59 "#333366","#333399","#3333CC","#3333FF","#663300","#663333","#663366","#663399","#6633CC","#6633FF","#993300",
60 "#993333","#993366","#993399","#9933CC","#9933FF","#CC3300","#CC3333","#CC3366","#CC3399","#CC33CC","#CC33FF",
61 "#FF3300","#FF3333","#FF3366","#FF3399","#FF33CC","#FF33FF","#006600","#006633","#006666","#006699","#0066CC",
62 "#0066FF","#336600","#336633","#336666","#336699","#3366CC","#3366FF","#666600","#666633","#666666","#666699",
63 "#6666CC","#6666FF","#996600","#996633","#996666","#996699","#9966CC","#9966FF","#CC6600","#CC6633","#CC6666",
64 "#CC6699","#CC66CC","#CC66FF","#FF6600","#FF6633","#FF6666","#FF6699","#FF66CC","#FF66FF","#009900","#009933",
65 "#009966","#009999","#0099CC","#0099FF","#339900","#339933","#339966","#339999","#3399CC","#3399FF","#669900",
66 "#669933","#669966","#669999","#6699CC","#6699FF","#999900","#999933","#999966","#999999","#9999CC","#9999FF",
67 "#CC9900","#CC9933","#CC9966","#CC9999","#CC99CC","#CC99FF","#FF9900","#FF9933","#FF9966","#FF9999","#FF99CC",
68 "#FF99FF","#00CC00","#00CC33","#00CC66","#00CC99","#00CCCC","#00CCFF","#33CC00","#33CC33","#33CC66","#33CC99",
69 "#33CCCC","#33CCFF","#66CC00","#66CC33","#66CC66","#66CC99","#66CCCC","#66CCFF","#99CC00","#99CC33","#99CC66",
70 "#99CC99","#99CCCC","#99CCFF","#CCCC00","#CCCC33","#CCCC66","#CCCC99","#CCCCCC","#CCCCFF","#FFCC00","#FFCC33",
71 "#FFCC66","#FFCC99","#FFCCCC","#FFCCFF","#00FF00","#00FF33","#00FF66","#00FF99","#00FFCC","#00FFFF","#33FF00",
72 "#33FF33","#33FF66","#33FF99","#33FFCC","#33FFFF","#66FF00","#66FF33","#66FF66","#66FF99","#66FFCC","#66FFFF",
73 "#99FF00","#99FF33","#99FF66","#99FF99","#99FFCC","#99FFFF","#CCFF00","#CCFF33","#CCFF66","#CCFF99","#CCFFCC",
74 "#CCFFFF","#FFFF00","#FFFF33","#FFFF66","#FFFF99","#FFFFCC","#FFFFFF");var total = colors.length;var width = 18;var cp_contents = "";var windowRef =(windowMode)?"window.opener.":"";if(windowMode){cp_contents += "<HTML><HEAD><TITLE>Select Color</TITLE></HEAD>";cp_contents += "<BODY MARGINWIDTH=0 MARGINHEIGHT=0 LEFTMARGIN=0 TOPMARGIN=0><CENTER>";}cp_contents += "<TABLE BORDER=1 CELLSPACING=1 CELLPADDING=0>";var use_highlight =(document.getElementById || document.all)?true:false;for(var i=0;i<total;i++){if((i % width) == 0){cp_contents += "<TR>";}if(use_highlight){var mo = 'onMouseOver="'+windowRef+'ColorPicker_highlightColor(\''+colors[i]+'\',window.document)"';}else{mo = "";}cp_contents += '<TD BGCOLOR="'+colors[i]+'"><FONT SIZE="-3"><A HREF="#" onClick="'+windowRef+'ColorPicker_pickColor(\''+colors[i]+'\','+windowRef+'window.popupWindowObjects['+cp.index+']);return false;" '+mo+' STYLE="text-decoration:none;">&nbsp;&nbsp;&nbsp;</A></FONT></TD>';if( ((i+1)>=total) ||(((i+1) % width) == 0)){cp_contents += "</TR>";}}if(document.getElementById){var width1 = Math.floor(width/2);var width2 = width = width1;cp_contents += "<TR><TD COLSPAN='"+width1+"' BGCOLOR='#ffffff' ID='colorPickerSelectedColor'>&nbsp;</TD><TD COLSPAN='"+width2+"' ALIGN='CENTER' ID='colorPickerSelectedColorValue'>#FFFFFF</TD></TR>";}cp_contents += "</TABLE>";if(windowMode){cp_contents += "</CENTER></BODY></HTML>";}cp.populate(cp_contents+"\n");cp.offsetY = 25;cp.autoHide();return cp;}
75 
76 
77 

 

 

代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 
 4 <head>
 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
 6 <title>颜色选择器 Color Picker,Internet Explorer,Firefox,Opera,Safar,Ace Explorer,Avant Browser,Flock,Google Chrome,Konqueror,Netscape,SeaMonkey </title>
 7   <meta name="Author" content="Geovin Du 塗聚文"/>
 8   <meta name="Keywords" content="Geovin Du 塗聚文"/>
 9   <meta name="Description" content="Geovin Du 塗聚文"/>
10 
11 <script type="text/javascript" language="javascript" src="ColorPicker2.js"></script>
12 <script type="text/javascript" language="javascript">
13 var cp = new ColorPicker('window'); // Popup window
14 var cp2 = new ColorPicker(); // DIV style
15 </script>
16 
17 </head>
18 
19 <body>
20 <form>
21 <table border="1">
22 <tr>
23     <td>
24     This popup uses a "window" popup. Use this<br/>
25     For browsers that don't support DHTML.<br/>
26 
27     Color: <input type="text" name="color" size="20" value=""/> <a href="#" onclick="cp.select(document.forms[0].color,'pick');return false;" name="pick" id="pick">Pick</a>
28     </td>
29 </tr>
30 </table>
31 <br/>
32 <table border="1">
33 <tr>
34     <td>
35     This popup uses a DHTML "layer". It looks<br/>
36 
37     nicer, but won't work in older browsers and<br/>
38     The color popup won't display over some form<br/>
39     elements in some browsers!<br/>
40     Color: <input type="text" name="color2" size="20" value=""/> <a href="#" onclick="cp2.select(document.forms[0].color2,'pick2');return false;" name="pick2" id="pick2">Pick</a>
41     </td>
42 </tr>
43 
44 </table>
45 </form>
46 
47 <script type="text/javascript" language="javascript">cp.writeDiv()</script>
48 </body>
49 
50 </html>
51 

 

 

<DOCTYPE html>
<html lang="en">
<title>color</title>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.6/jscolor.min.js">script>
<head>
<body>
<input class="jscolor" value="ab2567">
<script>
// Initialize jscolor
jscolor.installByClassName('jscolor');
script>
body>
html>

　　

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="/css/colorpicker.min.css">
</head>
<body>
  <button id="demoButton"></button>

  <script type="module">
    import ColorPicker from '/js/colorpicker.min.js'
    new ColorPicker('#demoButton')
  </script>
</body>
</html>

　　

Configuration

const picker = new ColorPicker(element, {
  /**
   * How to render the ColorPicker: as an input element or a button?
   * Default: 'button'
   */
  toggleStyle: 'button' | 'input',

  /**
   * When enabled, run the picker in headless mode:
   * - leaves the target element untouched, and does not render a toggle
   * - requires manually calling the prompt() method to show the dialog
   * - still positions the dialog relative to the target element
   * Default: false
   */
  headless: false,

  /**
   * The HTML element the picker dialog will be appended to. When you experience
   * issues focusing the input element in the ColorPicker, changing this will help.
   * Required when using the ColorPicker inside a Bootstrap OffCanvas or Modal.
   * By default, this is the body.
   */
  container: HTMLElement | string | null,

  /**
   * The initial color.
   * When toggleStyle == 'input', the default color will be taken from the input's
   * value (set color to null).
   * You can also set a data-color attribute on the element the ColorPicker is
   * attached to (set color to null).
   * Default: null
   */
  color: string | null,

  /**
   * A list of predefined color swatches available for selection.
   * Pass null, false or an empty array to disable them altogether.
   * Default: null
   */
  swatches: string[] | null | false,

  /**
   * Hide hsv, hue and alpha sliders as well as format selector and input field.
   * Keep swatches only. Picking a color will close the dialog.
   * You must provide an array of swatches as well (duh!)
   * Default: false
   */
  swatchesOnly: boolean,

  /**
   * Whether to enable the alpha (transparency) slider.
   * Default: true
   */
  enableAlpha: boolean,

  /**
   * Whether to enable the built-in eyedropper tool for selecting colors from the screen.
   * As of January 2025, this is only supported on Chromium based browsers: https://caniuse.com/mdn-api_eyedropper
   * Default: true
   */
  enableEyedropper: boolean,

  /**
   * The set of color formats the user can choose from.
   * Pass null or false to disable format selection.
   * Default: ['hex', 'rgb', 'hsv', 'hsl']
   */
  formats: ColorFormat[] | null | false,

  /**
   * The default color format to select when multiple formats are enabled.
	* If there are no formats to choose from (formats: null|false), this set
	s the color format of the color picker's input field.
   * Default: 'hex'
   */
  defaultFormat: 'hex' | 'rgb' | 'hsv' | 'hsl',

  /**
   * Determines how the chosen color is applied:
   * - 'instant': applies immediately as the user picks a color
   * - 'confirm': requires user confirmation (via a submit button)
   * Default: 'confirm'
   */
  submitMode: 'instant' | 'confirm',

  /**
   * Whether to show the clear button for resetting the color.
   * Default: false
   */
  showClearButton: boolean

  /**
   * Whether the color picker should close when clicking outside of it.
   * Default: true
   */
  dismissOnOutsideClick: boolean

  /**
   * Whether the color picker should close when escape is pressed.
   * Default: true
   */
  dismissOnEscape: boolean

  /**
   * How to place the dialog relative to the toggle. This is where the color dialog
   * will be shown, if there is room. If not, the dialog will be shown there where
   * there is room.
   * Default: 'top'
   */
  dialogPlacement: 'top' | 'bottom' | 'left' | 'right'

  /**
   * How big the gap between the toggle and dialog should be, in pixels.
   * Default: 8
   */
  dialogOffset: number

  /**
   * How to place the dialog when no anchor element is defined.
   * Default: 'top'
   */
  staticPlacement: 'top left' | 'top center' | 'top right' |
                   'center left' | 'center center' | 'center right' |
                   'bottom left' | 'bottom center' | 'bottom right'

  /**
   * How big the gap between the dialog and the edge of the page should be, in pixels.
   * Default: 8
   */
  staticOffset: number
})

　　

JS Color Picker Methods

The following methods can be called on a ColorPicker instance:

/**
 * Get selected color
 * @returns {Color}
 */
const color = picker.color
console.log('Picked color', color ? color.string('rgb' /* hex|rgb|hsl|hsv */) : null)

/**
 * Get swatches
 * @returns string[]
 */
console.log(picker.swatches)

/**
 * Get currently selected (not submitted) color
 * useful when submitMode == 'confirm'
 * Returns {Color}
 */
console.log(picker.selectedColor)

/**
 * Set a color
 * @param {Color} color. Can either be
 * - a hex(a) or rgb(a) string:  '#f0f', '#aabbcc99', 'rgb(255,0,0)', 'rgba(0,128,244,.5)'
 * - a named color: 'red', 'black', 'transparent'
 * - an array of numbers, representing H, S, V, A: [.6, .5, 1, .5]
 * - a Color object (see below)
 * @param {bool} emit Whether or not to emit pick event
 */
picker.setColor(color: Color | number[] | string | null, emit = true)

/**
 * Update swatches
 * @param {array} swatches An array of new colors for swatches
 *                Use null/false for no swatches
 */
picker.setSwatches(swatches: string[] | null | false)

/**
 * Set format
 * @param {string} format Either 'rgb', 'hex', 'hsv' or 'hsl'
 * @param {bool} update Whether or not to update/convert the selected color
 */
picker.setFormat(format: ColorFormat, update = true)

/**
 * Clear the color
 * @param {bool} emit Whether or not to emit pick event
 */
picker.clear(emit = true)

/**
 * Open the ColorPicker.
 * @param {bool} emit Whether or not to emit open/opened events
 */
picker.open(emit = true)

/**
 * Close the ColorPicker.
 * @param {bool} emit Whether or not to emit close/closed events
 */
picker.close(emit = true)

/**
 * Toggle the ColorPicker. Open when closed, close when opened
 * @param {bool} value Whether to close or open the ColorPicker
 * @param {bool} emit Whether or not to emit open/opened and close/closed events
 */
picker.toggle(value = !this._open, emit = true)

/**
 * Destroy the picker, restore DOM to what it was before the ColorPicker was attached
 */
picker.destroy()

　　https://www.jscolorpicker.com/

An open source, free (as in beer), versatile, flexible and lightweight Javascript Color Picker Component supporting light and dark skins, swatches, multiple color formats, CSS color parsing, instant and confirm modes and much more.

JS Color Picker Features

  • Open Source
  • Free
  • Zero dependencies
  • Light weight (42kB minified, 14.5kB minified and gzipped)
  • Easy to use and customize
  • Touch friendly
  • Light and dark theme
  • Alpha channel (can be disabled)
  • Color swatches
  • Uses popper.js for positioning
  • Eyedropper on Chrome and Edge
  • Four color formats: Hex, RGB, HSV and HSL (supports named colors too)
  • Keyboard navigation

Download JS Color Picker

Download
Please visit our GitHub repository to download JSColorPicker.

 

一个开源、免费（如啤酒）、多功能、灵活且轻量级的 Javascript 色彩选择组件，支持浅色和深色皮肤、色样、多种色彩格式、CSS 色彩解析、即时和确认模式等多种功能。

JS 色彩选择器功能

  • 开源
  • 免费
  • 零依赖
  • 轻量级（压缩后42kB，压缩后14.5kB）
  • 易于使用和自定义
  • 触摸友好
  • 光明与黑暗主题
  • Alpha通道（可禁用）
  • 色样
  • 使用popper.js进行定位
  • Chrome和Edge上的滴管
  • 四种色彩格式：Hex、RGB、HSV 和 HSL（也支持命名颜色）
  • 键盘导航

下载JS色彩选择器

下载
请访问我们的GitHub仓库下载JSColorPicker。

 

posted @ 2010-11-25 17:53  ®Geovin Du Dream Park™  阅读(493)  评论(0)    收藏  举报