maxapet,
ниже это макет ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
td{
height: 50px;
width: 50px;
}
.selected {
border: #0000FF 5px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body> <div class="colorPicker"></div> <div class="colorPicker"></div>
<script>
(function ($){
var defaults = {colors: new Array ("#000000", "#808080", "#8B0000", "#FF0000", "#FFA500", "#FFFF00", "#008000", "#87CEEB", "#0000FF", "#FF00FF",
"#FFFFFF", "#C0C0C0", "#A52A2A", "#FFC0CB", "#FFD700", "#EEE8AA", "#00FF00", "#ADD8E6", "#000080", "#DDA0DD"),
selectedColorIdx: 0,
click: function (color) {}
};
var methods = {
init: function(options) {
return this.each(function(){
var settings = $.extend({}, defaults, options);
var lineCnt = 2;
var cellsInLine = settings.colors.length / lineCnt;
var tbl = $("<table class='color-picker-tbl'/>");
for(l=0; l < lineCnt; l++){
var tr = $("<tr />");
tr.appendTo(tbl);
for(c=0; c < cellsInLine; c++){
var td = $("<td style='background-color: " + settings.colors[l * cellsInLine + c] + ";' class='color-picker-mask'></td>").appendTo(tr);
}
}
$(this).append(tbl);
var $cells = $(this).find(".color-picker-tbl td");
$cells.each(function(i) {
$(this).click(function() {
$cells.removeClass("selected");
$(this).addClass("selected");
settings.selectedColorIdx = i;
settings.click(settings.colors[i]);
});
}).eq(settings.selectedColorIdx).trigger("click");;
});
},
setColor: function(color) {
if (color[0] != "#")
color = "#" + color;
color = $("<td>",{css : {"background-color": color}}).css("background-color");
this.find(".color-picker-tbl td").each(function(i) {
//alert($(this).css("background-color"));
if ($(this).css("background-color") == color) {
$(this).trigger("click");
}
});
}
}
$.fn.colorPicker = function(method){
var settings;
// немного магии
if ( methods[method] ) {
// если запрашиваемый метод существует, мы его вызываем
// все параметры, кроме имени метода прийдут в метод
// this так же перекочует в метод
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
// если первым параметром идет объект, либо совсем пусто
// выполняем метод init
return methods.init.apply( this, arguments );
} else {
// если ничего не получилось
$.error( 'Метод "' + method + '" не найден в плагине jQuery.mySimplePlugin' );
}
}
//$cells.eq(settings.selectedColorIdx).trigger("click");
//return this.each(colorPicker);
})(jQuery);
/**
* Return true if color is dark, false otherwise.
* (C) 2008 Syronex / J.M. Rosengard
**/
function isDark(color){
var colr = parseInt(color.substr(1), 16);
return (colr >>> 16) // R
+ ((colr >>> 8) & 0x00ff) // G
+ (colr & 0x0000ff) // B
< 500;
}
$(".colorPicker").colorPicker({click: function (color) {alert(color)}});
$(".colorPicker").eq(1).colorPicker("setColor","#8B0000")
</script>
</body>
</html>
