Процесс создания генератора

Описание   Процесс
 
 

Драг-н-дроп на загрузочных элементах

Довольно весёлая вещь. По крайней мере, мне пришлось тут повозиться.

Во-первых, не все бруазеры поддерживают нативный драг-н-дроп, поэтому нужно сделать проверку:

var input = $('input.file');
input.animate({'opacity':'0'}, 0);
var elem = $('.drag');		

	 if(window.FileReader == null ||
         !('draggable' in document.createElement('span'))) 
         {elem.find('input').animate({'opacity':'1'}, 0);
         input.height(20).width(190).attr('accept', "image/*");elem.find('p').empty();
	 }

Затем проверить названия файлов и расширения:

else {
input.click(function(e){e.preventDefault();});
function miniature(files, el) {
var imageType = /image.*/;
$.each(files, function(i, file) {					
	if ( /[а-я]/i.test(file.name) ) {
		alert('Название файлов должно быть на латиннице');
	}
	else
	{
	if (!file.type.match(imageType)) {
	alert('Загрузить можно только изображения');
	return true;
	}

После — отобразить миниатюру и «удялатор»:

var number = el.substr(el.search(/\d/), 10000);
$('#'+el).append('
X
'); $('#'+el).find('p').empty(); $('').text(file.name).appendTo('#'+el); $('#f'+number).get(0).file = file; var y=0; if ($('#'+el+' img').size() == 0){ var img = $('').appendTo('#'+el); var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.attr('src', e.target.result); var w = aImg.width(), h = aImg.height(), top = '-55px', left = '-65px'; if (w >= h) {aImg.width(130).css('margin-top',top);} else {aImg.height(110).css('margin-top',top);} }; })(img); reader.readAsDataURL(file);

Ну и, разумеется, написать функцию удаления миниатюры (я не буду останавливаться на таких моментах, как проверка занятости окошка или превышение максимально допустимого количества файлов):

$('.delete').click(function(){
var n = parseInt($(this).attr('id').substr($(this).attr('id').search(/\d/), 10000));
$('#d'+n).find('img').detach();
switch(n) {
	case 1: $('#d'+n+' p').text('Перетащите сюда первое изображение');break;
	case 2: $('#d'+n+' p').text('Перетащите сюда второе изображение');break;
	case 3: $('#d'+n+' p').text('Перетащите сюда третье изображение');break;
	}
$('#f'+n).detach();
$('#x'+n).detach();
	});	

Ну и в итоге это будет выглядеть так:

До
before

После
before

 

Масштабирование размеров

Тут всё просто: проверяем введённые значения, если они находятся в допустимых пределах, делим на заранее посчитанную величину и придаём блоку-модели нужные размеры.

Драг-н-дроп на ползунках

Тут я вновь использовал jqueryui. Лишь одно дополнение — чтобы действительно задать эти параметры, нужно было каждому делению придать определённое значение, которое потом будет выслано скрипту-обработчику:

// вешаем на ползунок драггабл
$('.tumbler').draggable({axis: 'x', grid: [27], containment: 'parent'});

// функция, которая вызывается прямо перед отправкой данных на сервер
function option(elem) { 
var numb = parseInt(elem.css('left').toString().replace('px', ''));
switch(numb){
	case 0  : numb = 1;break;
	case 32 : numb = 2;break;
	case 59 : numb = 3;break;
	case 86 : numb = 4;break;
	case 113: numb = 5;break;
	case 140: numb = 6;break;
	case 167: numb = 7;break;
	}return numb;}

// данные, которые будут отправлены
var speed = option($('#speed_span'));
var accel = option($('#accel_span'));
var rell  = option($('#rell_span'));
var wait  = option($('#wait_span'));