Здравствуйте, прошел курс по 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%);");
});
});