Learn jQuery Day 16,17,18


Day16
Day15에서 만든것을 재구성하는 시간 😀

next, prev 로직? 을 설명하느라 꽤 많은 시간을 소비한 느낌은 들지만 썜 말대로 맨날 Person, Car 등의 상속 설명만 듣다 prototype을 통해 Slider를 확장해보니 이것도 this와 더불어 꼭 머리에 새겨둬야겠다.

	var sliderUL = $('div.slider').css('overflow', 'hidden').children('ul'),
		imgs = sliderUL.find('img'),
		imgWidth = 600,//imgs[0].width,
		imgsLen = imgs.length, // 4
		current = 1,
		totalImgsWidth =  imgWidth * imgsLen; //2400

	$('#slider-nav').show().find('button').on('click', function() {
		var direction = $(this).data('dir'),
			loc = imgWidth; // 600

		// update current value
		(direction === 'next') ? ++current : --current;

		// if first image
		if(current === 0) {
			current = imgsLen;
			loc = totalImgsWidth - imgWidth;
			direction = 'next';

		} else if(current - 1 === imgsLen) {
			current = 1;
			loc = 0;
		}

		console.log(current);
		transition(sliderUL, loc, direction);
	});

	function transition (container, loc, direction) {
		console.log(container, loc, direction);

		var unit; // -= +=
		if(direction && loc !== 0) {
			unit = (direction==='next') ? '-=' : '+=';
		}
		console.log(unit);

		container.animate({
			'margin-left' : unit ? (unit + loc) : loc
		});

	}
function Slider(container, nav) {
	this.container = container;
	this.nav = nav.show();

	this.imgs = this.container.find('img');
	this.imgWidth = 600; //this.imgs[0].width;
	this.imgsLen = this.imgs.length;

	this.current = 0;
}

Slider.prototype.transition = function( coords ) {
	this.container.animate({
		'margin-left': coords || -( this.current * this.imgWidth ) // 3 * 600 = 1800
	});
};

Slider.prototype.setCurrent = function (dir) {
	var pos = this.current;

	pos += (dir === 'next') ? 1 : -1;	// 1 or -1
	this.current = ( pos < 0 ) ? this.imgsLen - 1 : pos % this.imgsLen;

	return pos;
};

Day17
사실 지금껏 포럼이 있는줄 몰랐는데… ㅎㅎ
http://tutsplus.com/forums/topic/day-16-your-questions/

Day18

Quiz!! 😈

일단… a class of box를 class가 box인 a 태그로 인지했다. 왜그랬을까…
그리고 step 을 전혀 몰랐다는거 ㅎㅎ

step: A function to be called after each step of the animation.

http://learnjquery.tutsplus.com/
http://msdn.microsoft.com/en-us/scriptjunkie/ff852808
http://tutsplus.com/forums/topic/day-16-your-questions/ 
https://twitter.com/#!/search/%23jQueryQA
http://api.jquery.com/animate/
Chrome Developer Tools: Console

Advertisements
%d bloggers like this: