jQuery Colorpicker Spectrum api 中文 文檔 屬性 事件 方法

jQuery Colorpicker Spectrum

---

 

 所需的CSS和JavaScript文件:

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

 

屬性:

// Options
color: false,//初始化顏色
flat: false,//全尺寸, 定位一個inline-block元素
showInput: false,//顯示輸入
allowEmpty: false,//容許爲空,顯示清楚顏色按鈕
showButtons: true,//隱藏選擇取消按鈕
clickoutFiresChange: true,//單擊選擇器外部,若是顏色有改變則應用
showInitial: false,//顯示初始顏色,提供如今選擇的顏色和初始顏色對比
showPalette: false,//顯示選擇器面板
showPaletteOnly: false,//只顯示選擇器面板
hideAfterPaletteSelect: false,//選擇顏色後自動隱藏面板
togglePaletteOnly: false,//切換面板
showSelectionPalette: true,//記住選擇過的顏色
localStorageKey: false,//把選擇過的顏色存在瀏覽器上
appendTo: "body",//選擇選擇器容器是附加到哪一個元素
maxSelectionSize: 7,//記住選擇過的顏色的最大數量
cancelText: "cancel",//取消按鈕,按鈕文字
chooseText: "choose",//選擇按鈕,按鈕文字
togglePaletteMoreText: "more",//展開面板,按鈕文字
togglePaletteLessText: "less",//收縮面板,按鈕文字
clearText: "Clear Color Selection",//清楚,按鈕文字
noColorSelectedText: "No Color Selected",
preferredFormat: false,//輸入框顏色格式,(hex十六進制,hex3十六進制能夠的話只顯示3位,hsl,rgb三原色,name英文名顯示)
className: "", // Deprecated - use containerClassName and replacerClassName instead.
containerClassName: "",//引用類選擇器,能夠改變顏色選擇器面板的樣式
replacerClassName: "",//引用類選擇器,能夠改變顏色選擇器的樣式
showAlpha: false,//顯示透明度選擇
theme: "sp-light",
palette: [["#ffffff", "#000000", "#ff0000", "#ff8000", "#ffff00", "#008000", "#0000ff", "#4b0082", "#9400d3"]],//選擇器面板顏色設置
selectionPalette: [],
disabled: false,//禁用選擇器
offset: null

 

事件:

// Callbacks
beforeShow: noop,//選擇器面板顯示以前觸發,返回false時不顯示
move: noop,//選擇器右邊面板移動時觸發
change: noop,//關閉面板或點擊選擇按鈕,顏色變化時觸發
show: noop,//選擇器面板顯示時觸發
hide: noop,//選擇器面板隱藏時觸發

 

方法:

$("#picker").spectrum("show");//顯示面板
$("#picker").spectrum("hide");//隱藏面板
$("#picker").spectrum("toggle");//切換面板
$("#picker").spectrum("get");//獲得選擇器當前顏色
$("#picker").spectrum("set", colorString);//設置選擇器當前顏色
$("#picker").spectrum("container");//檢索器的容器元素
$("#picker").spectrum("reflow");//重置容器元素的定位
$("#picker").spectrum("destroy");//選擇器初始化
$("#picker").spectrum("enable");//啓用
$("#picker").spectrum("disable");//禁用
$("#picker").spectrum("option", optionName);//獲得屬性值
$("#picker").spectrum("option", optionName, newOptionValue);//設置屬性值

 

實例:

<input id="full" />

$("#full").spectrum({ 　　allowEmpty:true, 　　color: "#ECC", 　　showInput: true, 　　containerClassName: "full-spectrum", 　　showInitial: true, 　　showPalette: true, 　　showSelectionPalette: true, 　　showAlpha: true, 　　maxPaletteSize: 7, 　　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(67, 67, 67)", "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(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", 　　　　"rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 　　　　["rgb(230, 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, 210, 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(180, 167, 214)", "rgb(213, 166, 189)", 　　　　"rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 　　　　"rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", 　　　　"rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", 　　　　"rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", 　　　　/*"rgb(133, 32, 12)", "rgb(153, 0, 0)", "rgb(180, 95, 6)", "rgb(191, 144, 0)", "rgb(56, 118, 29)", 　　　　"rgb(19, 79, 92)", "rgb(17, 85, 204)", "rgb(11, 83, 148)", "rgb(53, 28, 117)", "rgb(116, 27, 71)",*/
　　　　"rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 　　　　"rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] 　　　　] 　　}); 　　function updateBorders(color) { 　　　　var hexColor = "transparent"; 　　　　if(color) { 　　　　　　hexColor = color.toHexString(); 　　　　} 　　　　$("#docs-content").css("border-color", hexColor); 　　}

 

瀏覽器支持:

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

 

官方文檔:http://bgrins.github.io/spectrum/