Что делать с options
Есть вот такой плагин для выбора цвета:ра цвета:
(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(){
v 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() {
if (i != settings.selectedColorIdx){
$cells.eq(settings.selectedColorIdx).removeClass("selected").removeClass("selected-color-mask-1").removeClass("selected-color-mask-2");
$(this).addClass("selected").addClass(isDark(settings.colors[i]) ? "selected-color-mask-1" : "selected-color-mask-2");
settings.selectedColorIdx = i;
}
settings.click(settings.colors[i]);
});
});
});
},
setColor: function(color) {
if (color[0] != "#")
color = "#" + color;
this.find(".color-picker-tbl td").each(function(i) {
alert($(this).css("background-color"));
if ($(this).css("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;
}
Если settings объявить в самом внешней области, то он становится общим для всех экземпляров, а если объявлять его так, как это написано, то он недоступен в методе setColor. Как сделать так, чтобы settings был свой для каждого экземпляра? |
maxapet,
откуда возникла строка 65 и что за мусор в строке 10? и лучше полный макет. |
Это и есть полный макет. :)
В строке 10, действительно, мусор, mea culpa. В строке 65 - настройка значения по умолчанию. |
Цитата:
Цитата:
|
А как это всё связано с настройками? И что конкретно непонятно?
|
65 строка осталась от версии без методов.
|
Цитата:
|
Цитата:
|
Ну, а в общих словах, можете сказать, как сделать так, чтобы настройки были индивидуальны для каждого экземпляра?
|
maxapet,
они и так должны быть индивидуальными, строка 10 создаёт обьект настроек для каждого элемента индивидуально |
Но settings недоступна в методе setColor. Любое упоминание settings в этом методе приводит к тому, что метод не срабатывает. Почему так?
|
maxapet,
знать бы ещё что плагин делает или вы из плагина творите, где макет, где описание? |
Плагин позволяет выбирать цвет из заданного набора цветов. Внешне он представляет из себя таблицу с разноцветными ячейками, щелчок мышью по которым генерит событие выбора цвета. Так же есть возможность установить выбранный цвет вызвав метод setColor данного плагина.
Вызывается он так: $("#colorPicker").colorPicker({colors: {набор цветов}б click^ function() {/*функция обработки клика по выбранному цвету*/}}); Что Вы подразумеваете под макетом? |
Цитата:
|
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>
|
html - в самом плагине, js которого я привёл, а какое отношение имеет и html и css к видимости переменной - убей, не понимаю.
|
Понял, спасибо. Буду знать.
|
| Часовой пояс GMT +3, время: 15:52. |