概述
在頁面開發時，有時我們需要在頁面中添加一個調色板，方便用戶自己喜歡的顏色。這時，我們需要在頁面中添加一個調色板。在input[type='color']中，可以直接調出調色板，而且界面也比較漂亮，但是我們很難控制它的樣式，最致命的是他的兼容性非常差，在ie10中無法進行顯示，因此選用Spectrum 繪製調色板。最終的展示效果爲：
操作目標
在頁面中，我們需要將調色板的色值顯示，同時在調色板和顯示的值之間添加一個“自定義色值”的說明。我們可以通過輸入自定義色值的內容，設置調色板的顏色，也可以通過調色板選中自己喜歡的顏色，並將色值顯示在右邊的方框中。
實現步驟
1、簡單實現調色板
在jsp頁面中，我們需要一個input框：
<input id="color-input-diy" name="color-input-diy">
在js中，將當前input設置spectrum屬性和方法：
$("#color-input-diy").spectrum({ color: "red",//初始化顏色 showInput: true,//顯示輸入 // allowEmpty:true,//允許爲空,顯示清楚顏色按鈕 clickoutFiresChange: false,//單擊選擇器外部,如果顏色有改變則應用 containerClassName: "full-spectrum", showInitial: true,//顯示初始顏色,提供現在選擇的顏色和初始顏色對比 showPalette: true,//顯示選擇器面板，即左側有按鈕的面板 showSelectionPalette: true,//記住選擇過的顏色 showAlpha: true,//顯示透明度選擇 maxPaletteSize: 7,//記住選擇過的顏色的最大數量 cancelText: "取消",//取消按鈕,按鈕文字 chooseText: "確定",//選擇按鈕,按鈕文字 noColorSelectedText: "無顏色選擇",//清除,按鈕文字 preferredFormat: "hex",//輸入框顏色格式,(hex十六進制,hex3十六進制可以的話只顯示3位,hsl,rgb三原色,name英文名顯示) localStorageKey: "spectrum.demo",//把選擇過的顏色存在瀏覽器上 //選擇器右邊面板移動時觸發 move: function (color) { updateBorders(color); }, //選擇器面板顯示時觸發 show: function () { }, //選擇器面板顯示之前觸發,返回false時不顯示 beforeShow: function () { }, //關閉面板或點擊選擇按鈕,顏色變化時觸發 change: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) { //hexColor表示上次調色板顯示的顏色 var hexColor = "transparent"; //如果當前設置顏色，則將顏色設置爲當前顏色，否則，如果沒有點擊確定，則將顏色恢復爲上次選擇的顏色 if(color) { hexColor = color.toHexString(); } //如果沒有下面這行代碼，點擊選擇器面板時，即使不點擊保存，也會造成input框中的值改變 $("#docs-content").css("border-color", hexColor); }
至此，對於各參數，代碼中已添加了詳細的註釋，更多的屬性和方法請參照參考文檔中的官網說明。現在顯示的效果爲
2、實現目標要求
在jsp中我們添加其他元素，展示的顏色值、介紹文字。爲了控制佈局，使用div進行控制，jsp代碼如下所示
<!-- 調色板--> <div class="chat-windows-color-diy-div row"> <div class="col-xs-5 col-sm-5 col-md-5"> <div class="col-xs-2 col-sm-2 col-md-2 diy-color-choose"> <input id="color-input-diy" name="color-input-diy"> <!-- <label for="color-input-diy"></label> --> </div> <div class="col-xs-4 col-sm-4 col-md-4 diy-color-value-div"> <span class="diy-color-value-span"> 自定義色值：</span> </div> <div class="col-xs-5 col-sm-5 col-md-5 diy-color-style"> <input id="color-input-diy-value" class="diy-color-style-input" onblur="setPalette()" type="text" name="color"> </div> </div> </div>
其中，利用onblur屬性綁定到setPalette()函數上，當input輸入框輸入內容時，將會觸發js中的setpalette()方法，顯示的樣式爲：
在js代碼中，我們增加兩部分，一個是將調色板的顏色值顯示到id="color-input-diy-value"中的input框中，另一個設置input框中輸入值時，賦值給調色板。
$("#color-input-diy").spectrum({ color: "red",//初始化顏色 showInput: true,//顯示輸入 // allowEmpty:true,//允許爲空,顯示清楚顏色按鈕 clickoutFiresChange: false,//單擊選擇器外部,如果顏色有改變則應用 containerClassName: "full-spectrum", showInitial: true,//顯示初始顏色,提供現在選擇的顏色和初始顏色對比 showPalette: true,//顯示選擇器面板 showSelectionPalette: true,//記住選擇過的顏色 showAlpha: true,//顯示透明度選擇 maxPaletteSize: 7,//記住選擇過的顏色的最大數量 cancelText: "取消",//取消按鈕,按鈕文字 chooseText: "確定",//選擇按鈕,按鈕文字 noColorSelectedText: "無顏色選擇",//清除,按鈕文字 preferredFormat: "hex",//輸入框顏色格式,(hex十六進制,hex3十六進制可以的話只顯示3位,hsl,rgb三原色,name英文名顯示) localStorageKey: "spectrum.demo",//把選擇過的顏色存在瀏覽器上 //選擇器右邊面板移動時觸發 move: function (color) { updateBorders(color); }, //選擇器面板顯示時觸發 show: function () { }, //選擇器面板顯示之前觸發,返回false時不顯示 beforeShow: function () { }, //關閉面板或點擊選擇按鈕,顏色變化時觸發 change: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); //將調色版的顏色放置到input框中 $('#color-input-diy-value').val(hexColor); } } //設置調色板的顏色值 function setPalette(){ var colorValue=$("#color-input-diy-value").val(); //對input框輸入的顏色值進行簡單的校驗 if(colorValue.indexOf('#')==0&&colorValue.length==7){ $("#color-input-diy").spectrum("set", $("#color-input-diy-value").val()); }else if(colorValue==null||colorValue.length==0){ return; }else{ alert("請輸入正確的色值"); } }
至此，我們完成了目標所示的功能，新添加的代碼已經用不同的顏色進行標註。最終的效果圖爲
注意事項：
1、原Spectrum調色板中，點擊選擇面板時，即時沒有確認，也會導致input框的值發生改變，因此，需在js頁面中的updateBorders(color) 方法中添加 $("#docs-content").css("border-color", hexColor); 。
2、使用 $("#color-input-diy").spectrum("set", $("#color-input-diy-value").val()); 方法對調色板進行賦值。
參考文檔