Градиент генератор
Здравствуйте, прошел курс по JS и JQuery решил попрактиковаться и создать копию этого сервиса http://www.css3factory.com/linear-gradients/
помогите плз разобраться как работает кнопка "Add", я не понимаю как этот переключатель сохраняет значение полей "colorpicker" при этом создав новый градиент его значения обнуляются. Что прописать в гугле что бы почитать понятия не имею. Вот что имею на данный момент. <!DOCTYPE html> <html> <head> <title>ColorService</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="css/colpick.css" media="all"> <link type="text/css" rel="stylesheet" href="css/bootstrap.css" media="all"> <link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.css" media="all"> <link type="text/css" rel="stylesheet" href="css/style.css" media="all"> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/colpick.js"></script> <script src="js/color.js"></script> </head> <body> <div class="container" id="main"> <div class="row"> <div class="span8" id="picker"></div> <div class="span4" id="grad"></div> </div> <div class="row"> <div class="span12" id="csscode"></div> </div> </div> </body> </html> $(document).ready(function(){
$('#picker').colpick({
flat:true
});
var grad = $('#grad'),
mycol = $('.mycol'),
move = $(".colpick_selector_inner, .colpick_hue_arrs"),
csscode = $("#csscode"),
myhex;
csscode.html("background-image: -webkit-gradient(</br><p>linear,</br>left top,</br>left bottom,</br>color-stop(0, #3289c7),</br>color-stop(1, #76FF85)</p>);</br>background-image: -o-linear-gradient(bottom, #3289c7 0%, #76FF85 100%);</br>background-image: -moz-linear-gradient(bottom, #3289c7 0%, #76FF85 100%);</br>background-image: -webkit-linear-gradient(bottom, #3289c7 0%, #76FF85 100%);</br> background-image: -ms-linear-gradient(bottom, #3289c7 0%, #76FF85 100%);</br>background-image: linear-gradient(to bottom, #3289c7 0%, #76FF85 100%);");
move.mousemove(function(){
myhex = mycol.val();
grad.css({
'background-image' : '-webkit-gradient(linear,left top,left bottom,color-stop(0, #'+ myhex +'),color-stop(1, #FFDA2E))',
'background-image' : '-o-linear-gradient(bottom, #'+ myhex +' 0%, #FFDA2E 100%)',
'background-image' : '-moz-linear-gradient(bottom, #'+ myhex +' 0%, #FFDA2E 100%)',
'background-image' : '-webkit-linear-gradient(bottom, #'+ myhex +' 0%, #FFDA2E 100%)',
'background-image' : '-ms-linear-gradient(bottom, #'+ myhex +' 0%, #FFDA2E 100%)',
'background-image' : 'linear-gradient(to bottom, #'+ myhex +' 0%, #FFDA2E 100%)',
});
csscode.html("background-image: -webkit-gradient(</br><p>linear,</br>left top,</br>left bottom,</br>color-stop(0, #"+ myhex +"),</br>color-stop(1, #76FF85)</p>);</br>background-image: -o-linear-gradient(bottom, #"+ myhex +" 0%, #76FF85 100%);</br>background-image: -moz-linear-gradient(bottom, #"+ myhex +" 0%, #76FF85 100%);</br>background-image: -webkit-linear-gradient(bottom, #"+ myhex +" 0%, #76FF85 100%);</br> background-image: -ms-linear-gradient(bottom, #"+ myhex +" 0%, #76FF85 100%);</br>background-image: linear-gradient(to bottom, #"+ myhex +" 0%, #76FF85 100%);");
});
});
|
А просто использовать <input type=color> пробовали? Смысл такой же. Пример есть здесь: http://raya.16mb.com/risovalka/index.php правее надписи «выберите цвет».
|
Да, это вполне адекватное решение, а потом по клику добавлять инпуты, но тут дело не в том, мне как бы этот сервис не нужен, это так для себя для практики, я пробую реализовать так: каждая единица градиента (каждый этот кубик где "add") это функция, и при работе этой функции значение колорпикера записываются в массив, а при клике на нужный кубик подставляются ранние записные значение. Я только начал программировать, вообще в потерях)
|
Для получения практики можете проанализировать ещё такой код:
<input type=color onchange="mas.push(this.value);showmas()"> <script>
mas=[];
function showmas(){
alert("В массиве сейчас "+mas.length+" ячеек, содержащих уникальный цвет");
for(i=0;i<mas.length;i++){
alert("Цвет № "+(i+1)+" = "+mas[i]);
}
}
</script>
|
Я делаю примерно так как Вы написали, только через jQuery
записываю в массив (записываю по событию mousemove, потому что, на события change инпуты этого плагина почему то не реагируют) : move.mousemove(function (){
colpickInput.each(function(){
value = $(this).val()
swarr = new Array()
swarr.push(value2)
});
а вот так, подставляю значение с массива: colpickInput.each(function(index){
$(this).val(swarr[index])
})
Но у меня проблема в другом, например выбрал я первый цвет, поводил мышкой, значения записались в массив arr1, нажал на второй цвет - вызвалась функция которая начала запись в массив arr2, но толку, ведь первая функция продолжает свою роботу, и также пишет все значение инпутов, там пофигу что я уже кликнул на 2 цвет. Вот и задача, как сделать такую переключалку, что бы я кликнул на 2 цвет, запись в первый массив остановилась, а началась во второй, ну и наоборот. Кароч я уже себе сломал голову, на грани уже) |
h1rurg911,
алгоритм - есть индекс - клик по маленькому квадратику устанавливает этот индекс - colorpicker пишет только на этот индекс - кнопка add увеличивает общее количество индексов length - так ферштейн? |
А как установить эти индекс, об’ясните плз, или подскажите где почитать
|
h1rurg911,
индекс -- это любая переменная хранящая либо ссылку на маленький квадратик либо число по которому можно найти этот квадратик - в самом квадратике навесить клик по которому он запишет свои данные - данные этого квадратика в индекс. |
h1rurg911,
для медитации ... вместо colorpicker ползунок ... кликаем на любой 'квадратик', на ползунок, на кнопку 'add' :write: <!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#plus {
color: #000080;
background: #E9985D;
border-radius: 8px;
display: inline-block;
margin: 5px;}
#mas div {
text-align: center;
width: 24px;
cursor: default;
border-radius: 4px;
display: inline-block;
margin: 8px;
padding: 4px;
color:#FFFF00;
background: #FFA500;
opacity: 0;
-moz-transition: all 1.5s;
-o-transition: all 1.5s;
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
body{
background: #7B68EE;
font-size: 24px;
}
</style>
</head>
<body>
<div id="mas"></div>
<input type="button" id = 'plus' value="add" />
<input type='range' id = 'rang' value = 70 />
<script>
var index;
var rng = document.querySelector('#rang');
var mas = document.querySelector('#mas');
var pls = document.querySelector('#plus');
rng.onchange = color;
pls.onclick = add;
function color() {
index && (index.innerHTML = this.value)
}
function init() {
index && (index.style.backgroundColor = '');
this.style.backgroundColor = '#0000CD';
rng.value = this.innerHTML;
index = this
}
function add() {
var d = document.createElement("div");
d.onclick = init;
var a = Math.floor(Math.random() * 100);
d.innerHTML = a;
mas.appendChild(d);
d.onclick();
d.clientWidth;
d.style.opacity = 1;
};
add();
add();
</script>
</body>
</html>
|
Спасибо большое!! еще не понял как все работает, но думаю что пойму)
|
| Часовой пояс GMT +3, время: 01:38. |