분류 javascript

Tourist.js -여러 페이지 웹 사이트보다 단일 페이지 응용 프로그램에 가장 적합한 간단한 라이브러리

컨텐츠 정보

  • 조회 429 (작성일 )

본문

각 단계에서 인터페이스를 제어 할 수 있습니다. Tourist를 사용하면 창이나 메뉴를 열어야 하는 단계에 대한 안내서를 작성할 수 있습니다. 특정 요소에 대한 지침으로 일련의 단계를 지정할 수 있습니다.


웹 사이트가 없지만 12k 별표가 있는 GitHub 페이지는 광범위한 문서로 구성되어 있습니다.


https://github.com/easelinc/tourist 

http://easelinc.github.io/tourist/


다음 bower 명령을 사용하여 Tourist.js를 설치할 수 있습니다.


bower install tourist 


Tourist에는 jQuery와 Backbone이 필요하며 Bootstrap 3 CSS와 함께 Bootstrap 3 팝 오버 (기본값) 또는 QTip2 팁을 사용할 수 있습니다.


“tourist.js”JavaScript 파일 및 선택적 CSS 파일을 사용하여 스타일을 사용자 정의 할 수 있습니다.


<script src="tourist.js"></script>
<!-- Optional! -->
<link rel="stylesheet" href="tourist.css" type="text/css" media="screen">


사용하는 방법 


초기 설정 후 다음과 같이 단계를 작성하여 둘러보기에 추가 할 수 있습니다.


var steps = [{
  // this is a step object
  content: '<p>Hey user, check this out!</p>',
  highlightTarget: true,
  nextButton: true,
  target: $('#thing1'),
  my: 'bottom center',
  at: 'top center'
}, {
  ...
}, ...]

var tour = new Tourist.Tour({
  steps: steps,
  tipOptions:{ showEffect: 'slidein' }
});
tour.start();


또한 Tourist.tip을 사용하여 팁에 대한 사용자 정의 구현을 가질 수 있습니다.