분류 javascript

Hopscotch - 링크드 인큐베이터 프로그램 중에 Gordon Koo와 Hans van de Bruggen이 오픈 소스 도…

컨텐츠 정보

  • 조회 428 (작성일 )

본문

Hopscotch는 링크드 인큐베이터 프로그램 중에 Gordon Koo와 Hans van de Bruggen이 오픈 소스 도구로 구축했습니다. 주요 목적은 사용성, 직관적 성 및 성능 문제를 해결하는 것이었습니다.


https://github.com/LinkedInAttic/hopscotch 


4.3k GitHub 스타를 사용하면 축소 및 gzipped 상태에서 8KB에 불과합니다. 의존성이 필요하지는 않지만 페이지에서 사용 가능한 경우 jQuery를 사용할 수 있습니다. Hopscotch는 다음을 제공합니다.


  • 이벤트 콜백 : onStart, onNext 및 onClose 이벤트에 대한 콜백을 지원합니다.
  • 다중 페이지 저항 : HTML5 세션 저장소를 사용하여 전체 페이지의 둘러보기 상태를 유지합니다.
  • i18n : 국제화를 지원합니다.
  • 간단한 설명 선 : 편리한 설명 선을 사용하여 설명 선을 관리합니다.
  • 브라우저 호환성 : 모든 브라우저와 호환됩니다.
  • 사용자 정의 가능 : CSS 조정, 버블 마크 업 및 페이지 상호 작용을 허용합니다.

Example Hopscotch tour 


설치하는 방법 


Grunt.js를 사용하여 Hopscotch를 빌드하십시오. 새로운 아티팩트로 테스트 스위트가 실행됩니다. 그런 다음 hopscotch.js 및 hopscotch.css라는 두 파일을 HTML 페이지에 포함하십시오.


사용하는 방법 


초기 설정이 완료되면 JSON을 사용하여 둘러보기를 초기화 할 수 있습니다.


// First define your tour.
var tour = {
  "id": "hello-hopscotch",
  "steps": [
    {
      "target": "profile-picture",
      "placement": "right",
      "title": "Profile Picture",
      "content": "This is your profile picture. Looking good!"
    },
    {
      "target": "find-conn",
      "placement": "bottom",
      "title": "Find Connections",
      "content": "The internet is always more fun when you connect with others. Find some connections by clicking here."
    }
  ]
};

// Then start the tour.
hopscotch.startTour(tour);

Hosscotch는 Jasmine 테스트 프레임 워크를 사용하여 테스트 할 수 있으며 Travis CI와 지속적으로 통합 할 수 있습니다.