Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2014, 12:27
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

А просто использовать <input type=color> пробовали? Смысл такой же. Пример есть здесь: http://raya.16mb.com/risovalka/index.php правее надписи «выберите цвет».
Ответить с цитированием
  #3 (permalink)  
Старый 11.01.2014, 21:10
Интересующийся
Отправить личное сообщение для h1rurg911 Посмотреть профиль Найти все сообщения от h1rurg911
 
Регистрация: 09.01.2014
Сообщений: 12

Да, это вполне адекватное решение, а потом по клику добавлять инпуты, но тут дело не в том, мне как бы этот сервис не нужен, это так для себя для практики, я пробую реализовать так: каждая единица градиента (каждый этот кубик где "add") это функция, и при работе этой функции значение колорпикера записываются в массив, а при клике на нужный кубик подставляются ранние записные значение. Я только начал программировать, вообще в потерях)
Ответить с цитированием
  #4 (permalink)  
Старый 11.01.2014, 22:34
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Для получения практики можете проанализировать ещё такой код:
<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>
Ответить с цитированием
  #5 (permalink)  
Старый 11.01.2014, 23:59
Интересующийся
Отправить личное сообщение для h1rurg911 Посмотреть профиль Найти все сообщения от h1rurg911
 
Регистрация: 09.01.2014
Сообщений: 12

Я делаю примерно так как Вы написали, только через 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, 12.01.2014 в 00:01.
Ответить с цитированием
  #6 (permalink)  
Старый 12.01.2014, 00:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

h1rurg911,
алгоритм - есть индекс - клик по маленькому квадратику устанавливает этот индекс - colorpicker пишет только на этот индекс - кнопка add увеличивает общее количество индексов length - так ферштейн?
Ответить с цитированием
  #7 (permalink)  
Старый 12.01.2014, 00:23
Интересующийся
Отправить личное сообщение для h1rurg911 Посмотреть профиль Найти все сообщения от h1rurg911
 
Регистрация: 09.01.2014
Сообщений: 12

А как установить эти индекс, об’ясните плз, или подскажите где почитать
Ответить с цитированием
  #8 (permalink)  
Старый 12.01.2014, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

h1rurg911,
индекс -- это любая переменная хранящая либо ссылку на маленький квадратик либо число по которому можно найти этот квадратик - в самом квадратике навесить клик по которому он запишет свои данные - данные этого квадратика в индекс.
Ответить с цитированием
  #9 (permalink)  
Старый 12.01.2014, 02:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

h1rurg911,
для медитации ... вместо colorpicker ползунок ... кликаем на любой 'квадратик', на ползунок, на кнопку 'add'
<!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>
Ответить с цитированием
  #10 (permalink)  
Старый 12.01.2014, 14:02
Интересующийся
Отправить личное сообщение для h1rurg911 Посмотреть профиль Найти все сообщения от h1rurg911
 
Регистрация: 09.01.2014
Сообщений: 12

Спасибо большое!! еще не понял как все работает, но думаю что пойму)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS генератор на JavaScript _0_ Ваши сайты и скрипты 8 24.03.2018 11:54
градиент <<лесенкой>> ?! Breetonia Firefox/Mozilla 3 26.10.2013 21:18
генератор флеш банера BARABANTEMO Общие вопросы Javascript 5 07.08.2012 23:23
Генератор ключей 9xakep Ваши сайты и скрипты 2 07.01.2012 17:29
Генератор случайных чисел. Помогите написать. Teenager Я не знаю javascript 5 05.01.2011 19:15