사용법 도움말이나 가이드 만들때 유용한 라이브러리

사용법이나 도움말에 사용하기 좋은 jquery-page-tour.js 입니다.

사용자가있는 페이지에 대한 정보를 표시하는 JQuery 기반 페이지 투어 라이브러리입니다.

웹이나 앱에 도움말 화면에 유용하며,

라이브러리를 사용하면 DOM객체를 강조 표시하고, 

사용자정의에 따라 무엇인지 설명할수 있습니다.

다운로드

https://github.com/crash83k/jquery-page-tour

 

주요기능

1. DOM 객체의 제목과 설명을 표시합니다.

2. 애니메이션 객체를 DOM 객체 주위에 배치하여 볼 위치를 강조합니다.

3. 프로그래밍 방식으로 둘러보기에서 다음 / 이전 항목으로 이동할 수 있습니다.

4. 리사이징이 되더라도 크기를 조정 한 후 위치를 다시 계산합니다. 

 

사용법

js 코드

var PageTour = $.fn.PageTour();

메소드 목록

PageTour.open(); //페이지 투어를 시작합니다.

PageTour.next();  //다음투어로 이동합니다.

PageTour.prev();  //이전투어로 이동합니다.

PageTour.exit();   //페이지 투어를 종료합니다.

 

html 코드

예시 ) <div data-tour-index="1"  data-tour-title="지드래곤"  data-tour-description="랩잘하는 가수입니다."><img src="지드래곤사진.jpg" /></div>

data-tour-index="노출순서"    // ex ) 1

data-tour-title="제목" 

data-tour-description="설명"

설명하고 싶은 DOM객체에 위에 속성을 넣어서 

알맞는 제목과 알맞는 설명을 넣고 노출될 순위를 정해서 작성해주시면 됩니다.

샘플예제

JQUERY-PAGE-TOUR 실행하기