JQuery colorpicker Spectrum API Chinese Document property event method

JQuery ColorPicker Spectrum

Required CSS and JavaScript files:

<script src= ' spectrum.js ' ></script><link rel= ' stylesheet ' href= ' spectrum.css '/>

Properties:

//OptionsColorfalse,//Initialize ColorFlatfalse,//full size, locating a inline-block elementShowinput:false,//Display InputAllowEmpty:false,//allow blank, show clear Color buttonShowbuttons:true,//Hide Select Cancel ButtonClickoutfireschange:true,//Click outside the selector and apply if the color changesShowinitial:false,//Displays the initial color, providing the color and initial color contrast that are now selectedShowpalette:false,//Show Selector PanelShowpaletteonly:false,//Show Selector Panel onlyHideafterpaletteselect:false,//automatically hide panels after selecting colorsTogglepaletteonly:false,//Toggle PanelShowselectionpalette:true,//Remember the colors you've chosenLocalstoragekey:false,//The selected color exists on the browserAppendTo:"Body",//Select which element the selector container is attached toMaxselectionsize:7,//remember the maximum number of colors that have been selectedCanceltext:"Cancel",//Cancel button, button textChoosetext:"Choose",//Select button, button textTogglepalettemoretext:" More",//expand Panel, button textTogglepalettelesstext:" Less",//Shrink Panel, button textCleartext:"Clear Color Selection",//Clear, Button textNocolorselectedtext:"No Color Selected", Preferredformat:false,//input Box color format, (hex 16 binary, hex3 16 binary can only display 3-bit, Hsl,rgb three primary colors, name English name display)ClassName:"",//deprecated-use Containerclassname and replacerclassname instead.Containerclassname:"",//referencing the class selector, you can change the style of the Color picker panelReplacerclassname:"",//Reference class selector, you can change the style of the color pickerShowalpha:false,//Show Transparency SelectionTheme"Sp-light", palette: [["#ffffff","#000000","#ff0000","#ff8000","#ffff00","#008000","#0000ff","#4b0082","#9400d3"]],//selector Panel color settingsSelectionpalette: [],disabled:false,//Disable SelectorsOffsetNULL

Event:

// callbacksBeforeshow:noop,// selector panel is displayed before triggering, return false does not display Move:noop,//  Trigger Change:noop when the right panel of selector is moved,// close Panel or click the Select button, trigger show:noop when color changes,// trigger when selector panel is displayed Hide:noop,// trigger when the selector panel is hidden

Method:

$ ("#picker"). Spectrum ("show");//Display Panel$ ("#picker"). Spectrum ("Hide");//Hide Panel$ ("#picker"). Spectrum ("toggle");//Toggle Panel$ ("#picker"). Spectrum ("get");//get selector Current color$ ("#picker"). Spectrum ("Set", colorstring);//Set selector current color$ ("#picker"). Spectrum ("container");//container elements of the Retriever$ ("#picker"). Spectrum ("reflow");//resetting the positioning of container elements$ ("#picker"). Spectrum ("destroy");//Selector Initialization$ ("#picker"). Spectrum ("Enable");//enabled$ ("#picker"). Spectrum ("Disable");//Disabled$ ("#picker"). Spectrum ("option", optionname);//Get Property value$ ("#picker"). Spectrum ("option", Optionname, Newoptionvalue);//Setting property values

Instance:

<input id= "full"/>

$ ("#full"). Spectrum ({allowempty:true, Color:"#ECC", Showinput:true, Containerclassname:"Full-spectrum", Showinitial:true, Showpalette:true, Showselectionpalette:true, Showalpha:true, Maxpalettesize:10, Preferredformat:"Hex", Localstoragekey:"Spectrum.demo", move:function(color) {updateborders (color);
}, Show:function() {}, Beforeshow:function() {}, Hide:function(color) {updateborders (color); }, palette: [["RGB (0, 0, 0)", "RGB (+/-)", "RGB (102, 102, 102)",/*"RGB (153, 153, 153)", "RGB (183, 183, 183)",*/"RGB (204, 204, 204)", "RGB (217, 217, 217)",/*"RGB (239, 239, 239)", "RGB (243, 243, 243)",*/"RGB (255, 255, 255)"], ["RGB (0, 0)", "RGB (255, 0, 0)", "RGB (255, 153, 0)", "RGB (255, 255, 0)", "RGB (0, 255, 0)","RGB (0, 255, 255)", "RGB (134, 232)", "RGB (0, 0, 255)", "RGB (153, 0, 255)", "RGB (255, 0, 255)"], ["RGB (184, 175)", "RGB (244, 204, 204)", "RGB (252, 229, 205)", "RGB (255, 242, 204)", "RGB (217, 234, 211)","RGB (208, 224, 227)", "RGB (201, 218, 248)", "RGB (207, 226, 243)", "RGB (217,, 233)", "RGB (234, 209, 220)","RGB (221, 126, 107)", "RGB (234, 153, 153)", "RGB (249, 203, 156)", "RGB (255, 229, 153)", "RGB (182, 215, 168)","RGB (162, 196, 201)", "RGB (164, 194, 244)", "RGB (159, 197, 232)", "RGB (, 167, 214)", "RGB (213, 166, 189)","RGB (204, 147, PNS)", "RGB (224, 102, 102)", "RGB (246, 178, 107)", "RGB (255, 217, 102)", "RGB (196, 125)","RGB (118, 165, 175)", "RGB (109, 158, 235)", "RGB (111, 168, up)", "RGB (142, 124, 195)", "RGB (194, 123, 160)","RGB (166, 0)", "RGB (204, 0, 0)", "RGB ($, 145, 168)", "RGB (241, 194,)", "RGB (106, 79,)","RGB (129, 142)", "RGB (77, 216)", "RGB (198, 133, 103)", "RGB (121, 167)", "RGB (166,,)",/*"RGB (133, +)", "RGB (153, 0, 0)", "RGB (, 6)", "RGB (191, 144, 0)", "RGB (, 118, 19)", "RGB (79, 92,)", "RGB (+, 204)", "RGB (one, one, 148)", "RGB (, 117)", "RGB (+/-) ",*/"RGB (102, 0)", "RGB (0, 0)", "RGB (0, 39, 4)", "RGB (127,, 78)", "RGB (),"RGB (7, approx.)", "RGB (+, 135)", "RGB (76, 17, 48)", "RGB (+/--)", [RGB]]]}); functionupdateborders (color) {varHexcolor = "Transparent"; if(color) {Hexcolor=color.tohexstring (); } $ ("#docs-content"). CSS ("Border-color"), Hexcolor); }

Browser support:

• IE6+
• Chrome4+
• Firefox3.6+
• Safari4+
• Opera11.1+
• Ios

Official Document: http://bgrins.github.io/spectrum/

JQuery colorpicker Spectrum API Chinese Document property event method