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

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

Сортировка строк таблицы в зависимости от цены — вот, что было самым трудным в этом проекте.

В чём заключалось ограничение? Цены заранее неизвестны, изначально загружаются старые цены, которые могли быть уже неактуальными — новые цены загружаются уже после загрузки страницы, поэтому нужно было написать скрипт, который бы сравнивал цены в уже отрендеренной странице.

Как вы можете видеть, я создал цикл, который проходится по каждой строке таблицы, выискавая ячейку с ценами. Записав значение цены в этой строке, он начинает сравнивать её с последующими строками: если значение больше, чем в следующей строке — он ставит её после, если нет, сравнивает с послеследующей и так далее.

После первоначальной сортировки скрипт раздаёт правильные id каждой строке (по пордяку, от 1 до 4), и самую низкую цену отмечает особым жёлтым блоком.

function startSort() { // начальная сортировка
	for(var kl = 1; kl <= kcount; kl++) {
	var tempprice = parseInt($('#maintable tr#tr'+kl+' .pricer').html()); // записываем цену текущей строки
	
	for (var jl = 1; jl <= kcount; jl++){ // проходим по строкам со сравнением
	if (tempprice > parseInt($('#maintable tr:eq('+jl+') .pricer').html()) & parseInt($('#maintable tr:eq('+jl+') .pricer').html()) !== NaN) {
		$('#maintable tr#tr'+kl).insertAfter($('#maintable tr:eq('+jl+')'));
	}  // если значение больше
	}  // ставим после
	}
	
	var element = '...'; // шаблон лучшей цены
	$('#maintable tr:eq(1) .td2').html('').html(element).parent().attr('id','tr'+1);
	for (var yl = 2; yl <= kcount; yl++) {
	var insidevalue = $('#maintable tr:eq('+yl+') .td2 .common_pr').html().toString();
	var insidecode = '...'+insidevalue+'...'; // оборачиваем значение в html-шаблон
	$('#maintable tr:eq('+yl+') .td2').html('').html(insidecode).parent().attr('id','tr'+yl);
	} // рассовываем цены по нужным строкам, именуем их.
};

После нажатия на «Показать ещё цены» операция повторяется, но уже с большим количеством строк.

При нажатии на «Раскрыть» появляется информация о книге ниже, там идёт похожий процесс, но только при первом раскрытии, в дальнейшем этот блок просто открывается, не обновляя цены.

Слайдер работает не так, как обычно (по стандарту у меня в шаблоне скрипта идёт смещение полосы на один пункт), а чуть иначе: при клике на управлятор, смещение полосы происходит не на один пункт, а на 4 пункта (столько их видно), если же за краем остаётся меньшее количество (1, 2, 3), то и смещение происходит на 1, 2 или 3 пункта до конца, затем управлятор затемняется, давая понять пользователю, что полоса закончилась.

var i = 1;
var max = $('#outer ul li').size(); // максимальное количество пунктов
var min = 4;                        // минимальное количество пунктов
function sliderRightButton() {      // что происходит по нажатию на правую кнопку
	 var cur = parseInt($('.cur').attr('id').substr($('.cur').attr('id').search(/\d/), 10));
	 if (max - cur > 3) {       // как раз эта часть и ответственна
	 	 var t = cur + 4;   // за «нестандартность слайдера»
		 $('#leftslider').removeClass('not');
		 $('#outer ul').animate({'margin-left':'-=820px'}, 400);
		 $('.cur').removeClass('cur');
		 $('#slider_li'+t).addClass('cur');
	 }
	 else if (max - cur > 2){   // она проверяет количество оставшихся
	 	 var t = cur +3;    // пунктов за гграницей видимости
		 $('#leftslider').removeClass('not');
		 $('#outer ul').animate({'margin-left':'-=615px'}, 400);
		 $('.cur').removeClass('cur');
		 $('#slider_li'+t).addClass('cur');
	 }
	 else if (max - cur > 1){   // и выбирает, на сколько двигать
	 	 var t = cur +2;    // ленту с пунктами
		 $('#leftslider').removeClass('not');
		 $('#outer ul').animate({'margin-left':'-=410px'}, 400);
		 $('.cur').removeClass('cur');
		 $('#slider_li'+t).addClass('cur');
	 }
	 else if (max - cur == 1){
		 var t = cur +1;
		 $('#leftslider').removeClass('not');
		 $('#outer ul').animate({'margin-left':'-=205px'}, 400);
		 $('.cur').removeClass('cur');
		 $('#slider_li'+t).addClass('cur');
	 }
	 if (cur > max - 5) {$('#rightslider').addClass('not')}
   };