[해피CGI][cgimall] jQuery 를 이용한 타임라인 입니다.

jQuery 를 이용한 타임라인을 생성하는 자료를 소개합니다.

 

 

 

소스코드를 다운로드 하시면 폴더내에 index.html 파일이 있고 바로 실행되는 화면을 볼 수 있습니다.

그래서 간단한 구동방식과 옵션에 대해서 설명을 드립니다.


1.Script, Css 를 호출 하세요. 

 

 

 

2.레이아웃을 담당하는 구조는 변경하시면 안됩니다. 

  기본 구조를 참고하여 timeline__content 파트를 추가하거나 삭제하는 정도의 작업만 하셔야 합니다. 

  (<main 부터 시작해서 </main> 까지는 구조를 유지하시기 바랍니다.)

 

 

 

3.timeline 스크립트를 호출 및 옵션을 설정 하시기 바랍니다. 

 

 

 

  사용할 수 있는 옵션의 종류는 아래와 같습니다. 
 
  1)mode : 'horizontal' 또는 빈값 
     horizontal 로 설정하면 가로형 타임라인 입니다.
     mode 설정값이 없거나 설정하지 않을 경우 세로형 타임라인으로 작동 합니다. 

  2)forceVerticalMode : 300 과 같은 정수값
     자신의 브라우저 해상도 높게 설정하시면 아래의 이미지 처럼 출력 됩니다. 
     해당 옵션은 반드시 세로형일 경우에만 적용 됩니다.

 

 

 

  3)verticalStartPosition : 'left' 또는 'right' 
     left 로 설정하면 첫 레이어가 왼쪽부터 출력되며, right 로 설정하면 첫 레이어가 오른쪽 부터 출력 됩니다. 
     해당 옵션은 반드시 세로형일 경우에만 적용 됩니다.
    
  4)visibleItems : 정수 값
     입력한 값만큼 첫페이지에 보여질 타임라인의 수를 설정 합니다.
     기본값은 4로 되어 있으며 4개일 경우 4개의 타임라인 레이어가 보여집니다.



옵션은 간단하지만 있을건 다 있네요.

회사연혁과 같이 시간의 흐름에 따른 정보를 보여주고 싶을 경우 사용하면 좋을듯 합니다. ^^