<!DOCTYPE html>
<html >
<head>
<script type="text/javascript" src="http://dev.defeng.anzhi.com/js/commons/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://dev.defeng.anzhi.com/css/spectrum.css" target="_blank" rel="external nofollow" >
<script charset="utf-8" src="http://dev.defeng.anzhi.com/js/commons/spectrum.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="switch-form" name="switch-form" method="post" action="http://localhost/numCheck/setSwitch.do">
<textarea id="promptWrit" name="promptWrit"></textarea>
<div class="form_list" id="writColor_id">
<label>頁面提示顔色:</label>
<input id="clickColor" name="writColor" type="text" class="input_text " style="display: none;">
</div>
<button type="button" onclick='doSubmitForm()'>送出</button>
<input type="submit" value="送出1">
</form>
<script type="text/javascript">
$("#clickColor").val("#ea0707");//送出action值!!! 初始值!!!
$(function() {
$("#clickColor").spectrum({
color: "#ea0707",//初始化顔色
allowEmpty:false,//是否顯示清除顔色按鈕,允許顔色為空
showInput: true,//面闆有輸入框顯示顔色值
clearText: "選擇無顔色",//清除顔色按鈕文字'
showButtons: true,//隐藏選擇和取消按鈕
cancelText: "取消",//取消按鈕,按鈕文字
chooseText: "确定",//選擇按鈕,按鈕文字
preferredFormat: "hex",//輸入框顔色格式,(hex十六進制,hex3十六進制可以的話隻顯示3位,hsl,rgb三原色,name英文名顯示 hsl-->hsv(0, 0%, 0%) hex-->#000000 rgb-->rgb(0, 0, 0) )
clickoutFiresChange: true,//單擊選擇器外部,如果顔色有改變則應用
//containerClassName: "full-spectrum",
showInitial: false,//顯示初始顔色,提供現在選擇的顔色和初始顔色對比(有一個對比框)
showPalette: true,//顯示選擇器面闆,即左側有按鈕的面闆
//showSelectionPalette: true,//記住選擇過的顔色
//maxPaletteSize: 7,//記住選擇過的顔色的最大數量
//showAlpha: true,//顯示透明度選擇欄
//noColorSelectedText: "無顔色選擇",//清除,按鈕文字
//localStorageKey: "spectrum.demo",//把選擇過的顔色存在浏覽器上
//選擇器右邊面闆移動時觸發
move: function (color) {
},
//關閉面闆或點選選擇按鈕,顔色變化時觸發
change:function(color){
//hexColor 表示上次調色闆顯示的顔色
var hexColor = "transparent";
//如果目前設定顔色,則将顔色設定為目前顔色,否則,如果沒有點選确定,則将顔色恢複為上次選擇的顔色
if(color) {
hexColor = color.toHexString();
$("#promptWrit").css("color", hexColor);
}
},
//調色選擇器面闆顯示的顔色
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 doSubmitForm(){
console.log($("#switch-form").serialize());
<!-- promptWrit=&writColor=%23ea0707 -->
<!-- promptWrit: -->
<!-- writColor: %ea0707 -->
<!-- $("#clickColor").spectrum("show");//顯示面闆 -->
<!-- $("#clickColor").spectrum("hide");//隐藏面闆 -->
<!-- $("#clickColor").spectrum("toggle");//切換面闆 -->
<!-- $("#clickColor").spectrum("get");//得到選擇器目前顔色 -->
<!-- $("#clickColor").spectrum("set", colorString);//設定選擇器目前顔色 -->
<!-- $("#clickColor").spectrum("container");//檢索器的容器元素 -->
<!-- $("#clickColor").spectrum("reflow");//重置容器元素的定位 -->
<!-- $("#clickColor").spectrum("destroy");//選擇器初始化 -->
<!-- $("#clickColor").spectrum("enable");//啟用 -->
<!-- $("#clickColor").spectrum("disable");//禁用 -->
<!-- $("#clickColor").spectrum("option", optionName);//得到屬性值 -->
<!-- $("#clickColor").spectrum("option", optionName, newOptionValue);//設定屬性值 -->
}
</script>
</body>
</html>
效果: