[jquery] jQuery Plugin 이용하기 (170403)

 jQuery Plugin 이용하기

• jQuery Plugin 사용 방법

1. 이용할 plugin을 다운받는다.

2. js 폴더에 plugin 파일을 넣는다.

3. html 에 script 로딩을 한다.

4. 이용한다.

• smoothScroll 이용 예 >

1. 다운을 받는다.

2.  js폴더에 다운받은 js파일을 넣는다.

3. 플러그인을 로딩한 후 action을 사용한다.

- 이 때, option 항목을 확인하여 이용할 수 있다!

- 동일한 방법으로 imgLiquid.js, lazyload.js를 이용해본다!

• lazyLoad (스크롤 내릴때 이미지 로딩하기)

• imgLiquid (이미지 비율 맞춰 일정크기로 출력하기)

- 대략 이러한 형태로 이미지의 크기를 조정한다.

- data-num, data-name 등 data-XXX 는 javascript로 작동시키기 위해 입력하는 속성이다.

• 나만의 plugin 만들기

- (function($){    })(jQuery); 를 이용한다.

- $.fn.hello=function(){ };       // hello: 추가되는 함수명

- 이렇게 생성한 hello() action을 사용하면 undefined가 남는다.

=> 따라서 chain형태로 동작 가능하도록 return 해준다.

• cf > navbar관련 QUIZ (offset(), scrollTop() 관련)

ANSWER >

- offset().top 은 선택한 곳부터 선택자까지의 거리를 가져온다.

- scrollTop() 은 document 부터 window시작점까지의 거리를 가져온다.

- 이 두가지를 이용하여 distance를 구하여 사용한다.

-  a href를 읽어올줄 알아야 해결할 수 있다.  ★☆잊지말기

** 출력 결과 **