最近经常封装js工具,请不要以为我是一名前端工程师,这只是我不得已的副业而已
window.colorPanel || (window.colorPanel = { left: 0, light: 127, isbind: false, mousedown: false, selectRGB: { r: 127, g: 127, b: 127 }, selectColor: '#777777', dfd: null, style: { cp_btn: { border: '#d9d9d9 1px solid', borderRadius: '3px', display: 'inline-block' }, cp_area: { '256px', height: '24px', margin: '0', padding: '0', border: 'none', float: 'left' } }, html: '<div id="cp_board" style="position:absolute;padding:3px;256px;height:auto;border:#d9d9d9 1px solid;borderRadius:3px;background-color:white;">' + ' <div id="cp_view" style="70px;height:24px;background-color: #777;border-radius: 3px;display: inline-block;float:left;"></div>' + ' <input id="cp_light" style="50px;height:20px;padding: 0;margin-left: 10px;float: left;" type="text" value="127" />' + ' <input id="cp_text" style="70px;height:20px;margin-left:10px;padding: 0;float: left;" type="text" value="#777777" />' + ' <span id="cp_close" style="24px;height:22px;line-height: 18px;text-align: center;position: absolute;font-weight:bolder;font-size:28px;color:red;top:3px;right:3px;cursor: pointer;">x</span>' + ' <div id="cp_gray" style="256px;height:20px;margin: 10px 0;float: left; background:linear-gradient(to right,#000 0px, #777 127px, #fff 255px);"></div>' + ' <div id="cp_area_1" style="background:linear-gradient(to right,#f00,#ff0);"></div>' + ' <div id="cp_area_2" style="background:linear-gradient(to right,#0f0,#ff0);"></div>' + ' <div id="cp_area_3" style="background:linear-gradient(to right,#0f0,#0ff);"></div>' + ' <div id="cp_area_4" style="background:linear-gradient(to right,#00f,#0ff);"></div>' + ' <div id="cp_area_5" style="background:linear-gradient(to right,#00f,#f0f);"></div>' + ' <div id="cp_area_6" style="background:linear-gradient(to right,#f00,#f0f);"></div>' + ' <span id="cp_cancel" style=" 60px; height: 22px;line-height: 18px;text-align: center;margin-top: 3px;cursor: pointer;float: left;">Cancel</span>' + ' <span id="cp_choose" style=" 60px;height: 22px;line-height: 18px;text-align: center;margin-top: 3px;float: right;cursor: pointer;">Choose</span>' + '</div>', hToInt: function (c, n) { var s = c.toUpperCase(), i = s == 'A' ? 10 : s == 'B' ? 11 : s == 'C' ? 11 : s == 'D' ? 11 : s == 'E' ? 11 : s == 'F' ? 11 : parseInt(s, 10); return n == 0 ? i : i * 16; }, setRGB: function (c) { colorPanel.selectRGB.r = colorPanel.hToInt(c.substr(1, 1), 1) + colorPanel.hToInt(c.substr(2, 1), 0); colorPanel.selectRGB.g = colorPanel.hToInt(c.substr(3, 1), 1) + colorPanel.hToInt(c.substr(4, 1), 0); colorPanel.selectRGB.b = colorPanel.hToInt(c.substr(5, 1), 1) + colorPanel.hToInt(c.substr(6, 1), 0); }, setColor: function (left) { var r = 0, g = 0, b = 0; var light = left ? left : colorPanel.light; if (light == 255) { r = g = b = "FF"; } else if (light == 0) { r = g = b = "00"; } else if (light > 127) { r = parseInt((255 - colorPanel.selectRGB.r) * (light - 127) / 127 + colorPanel.selectRGB.r).toString(16); g = parseInt((255 - colorPanel.selectRGB.g) * (light - 127) / 127 + colorPanel.selectRGB.g).toString(16); b = parseInt((255 - colorPanel.selectRGB.b) * (light - 127) / 127 + colorPanel.selectRGB.b).toString(16); } else { r = parseInt(colorPanel.selectRGB.r * light / 127).toString(16); g = parseInt(colorPanel.selectRGB.g * light / 127).toString(16); b = parseInt(colorPanel.selectRGB.b * light / 127).toString(16); } var c = '#' + (r.length > 1 ? r : ('0' + r)) + (g.length > 1 ? g : ('0' + g)) + (b.length > 1 ? b : ('0' + b)); $('#cp_view').css('background-color', c); $('#cp_text').val(c.toUpperCase()); }, areaMove: function (left, area) { if (colorPanel.mousedown) { var r = left.toString(16).toUpperCase(), h = r.length > 1 ? r : ('0' + r), c = area == '1' ? 'FF' + h + "00" : area == '2' ? h + "FF00" : area == '3' ? "00FF" + h : area == '4' ? "00" + h + "FF" : area == '5' ? h + "00FF" : area == '6' ? "FF00" + h : "777777"; $('#cp_text').val("#" + c); $('#cp_view').css('background-color', "#" + c); $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, #' + c + ' 127px, #fff 255px)'); colorPanel.selectRGB = area == '1' ? { r: 255, g: left, b: 0 } : area == '2' ? { r: left, g: 255, b: 0 } : area == '3' ? { r: 0, g: 255, b: left } : area == '4' ? { r: 0, g: left, b: 255 } : area == '5' ? { r: left, g: 0, b: 255 } : area == '6' ? { r: 255, g: 0, b: left } : colorPanel.selectRGB; colorPanel.setColor(); } }, show: function (dtd) { colorPanel.dfd = dtd || $.Deferred(); if (!colorPanel.content) { colorPanel.content = $(colorPanel.html).appendTo('body').find('[id^="cp_area_"]').css(colorPanel.style.cp_area); $('#cp_board span').css(colorPanel.style.cp_btn).hover(function () { $(this).css('background-color', '#eeeeee'); }, function () { $(this).css('background-color', '#ffffff'); }); } else { $('#cp_board').show(); } $('#cp_board').css({ left: UEditor.contentMenu.content.css('left'), top: UEditor.contentMenu.content.css('top') }); colorPanel.left = $('#cp_board').offset().left + 4; if (!colorPanel.isbind) { colorPanel.isbind = true; $('#cp_gray').on('mousemove', function (e) { if (colorPanel.mousedown) { var light = e.pageX - colorPanel.left; $('#cp_light').val(light); colorPanel.light = light; colorPanel.setColor(light); } }); $('[id^=cp_area_]').on('mousemove', function (e) { colorPanel.areaMove(e.pageX - colorPanel.left, $(this).attr('id').replace('cp_area_', '')); }); $('#cp_board').on('mousedown', function (e) { colorPanel.mousedown = true; var id = e.originalEvent.srcElement.id; if (id == 'cp_gray') { var light = e.pageX - colorPanel.left; $('#cp_light').val(light); colorPanel.light = light; colorPanel.setColor(light); } else { if (id.indexOf('cp_area_') > -1) { colorPanel.areaMove(e.pageX - colorPanel.left, id.replace('cp_area_', '')); } } }).on('mouseup', function (e) { colorPanel.mousedown = false; }); $('#cp_text').on('keyup', function (e) { var v = $(this).val(); var pattern = /^#[0-9a-fA-F]{6}$/ if (v.length == 7 && v.substr(0, 1) == '#' && v.match(pattern) != null) { $('#cp_view').css('background-color', v); $(this).val(v.toUpperCase()); $('#cp_gray').css('background', 'linear-gradient(to right,#000 0px, ' + v + ' 127px, #fff 255px)'); colorPanel.setRGB(v); } else { $('#cp_view').css('background-color', '#fff'); } }); $('#cp_light').on('keyup', function (e) { colorPanel.setColor($(this).val()); }); $('#cp_close').on('click', function (e) { $('#cp_board').hide(); colorPanel.dfd.reject(); }); $('#cp_cancel').on('click', function (e) { $('#cp_board').hide(); colorPanel.dfd.reject(); }); $('#cp_choose').on('click', function (e) { $('#cp_board').hide(); colorPanel.selectColor = $('#cp_text').val(); colorPanel.dfd.resolve(); }); } } }); /* 调用方法 */ $.Deferred(colorPanel.show).done(function () { alert(colorPanel.selectColor); });