<!DOCTYPE html> <html lang="en"> <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"> <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>
效果: javascript