Показать сообщение отдельно
  #1 (permalink)  
Старый 09.01.2014, 20:58
Интересующийся
Отправить личное сообщение для h1rurg911 Посмотреть профиль Найти все сообщения от h1rurg911
 
Регистрация: 09.01.2014
Сообщений: 12

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

});

Последний раз редактировалось h1rurg911, 09.01.2014 в 21:12.
Ответить с цитированием