window.addEventListener("load", function () { var pk = new Piklor(".color-picker", [ "#1abc9c" , "#2ecc71" , "#3498db" , "#9b59b6" , "#34495e" , "#16a085" , "#27ae60" , "#2980b9" , "#8e44ad" , "#2c3e50" , "#f1c40f" , "#e67e22" , "#e74c3c" , "#ecf0f1" , "#95a5a6" , "#f39c12" , "#d35400" , "#c0392b" , "#bdc3c7" , "#7f8c8d" ], { open: ".picker-wrapper .btn","autoclose":false }) , wrapperEl = pk.getElm(".picker-wrapper") , header = pk.getElm("header") , footer = pk.getElm("footer") ; pk.colorChosen(function (col) { wrapperEl.style.backgroundColor = col; header.style.backgroundColor = col; footer.style.backgroundColor = col; }); });
(function(root){function Piklor(sel,colors,options){var self=this;options=options||{};options.style=Object(options.style);options.style.display=options.style.display||"block";options.template=options.template||'<div data-col="{color}" style="background-color: {color}"></div>';self.elm=self.getElm(sel);self.cbs=[];self.colors=colors;self.options=options;self.render();self.elm.addEventListener("click",function(ev){var col=ev.target.getAttribute("data-col");if(!col){return} self.set(col)});} Piklor.prototype.getElm=function(el){if(typeof el==="string"){return document.querySelector(el)} return el};Piklor.prototype.render=function(){var self=this,html="";self.colors.forEach(function(c){html+=self.options.template.replace(/\{color\}/g,c)});self.elm.innerHTML=html};Piklor.prototype.colorChosen=function(cb){this.cbs.push(cb)};Piklor.prototype.set=function(c,p){var self=this;self.color=c;if(p===false){return} self.cbs.forEach(function(cb){cb.call(self,c)})};root.Piklor=Piklor})(this);
window.addEventListener("load", function () { var pk = new Piklor(".color-picker", [ "#1abc9c" , "#2ecc71" , "#3498db" , "#9b59b6" , "#34495e" , "#16a085" , "#27ae60" , "#2980b9" , "#8e44ad" , "#2c3e50" , "#f1c40f" , "#e67e22" , "#e74c3c" , "#ecf0f1" , "#95a5a6" , "#f39c12" , "#d35400" , "#c0392b" , "#bdc3c7" , "#7f8c8d" ], {}) , wrapperEl = pk.getElm(".picker-wrapper") , header = pk.getElm("header") , footer = pk.getElm("footer") ; pk.colorChosen(function (col) { wrapperEl.style.backgroundColor = col; header.style.backgroundColor = col; footer.style.backgroundColor = col; }); });
FAQ 2.0 - вопросы и ответы (не флудить!)
90 •