분류 javascript

PageGuide - jQuery 및 CSS3를 기반으로 하는 대화형, 동적 및 단일 페이지 앱을 위한 스마트 가이드입니다.

컨텐츠 정보

  • 조회 446 (작성일 )

본문

pageguide.js는 웹 페이지의 요소에 대한 대화식 시각적 가이드입니다. 정적 도움말 메시지 또는 설명 텍스트로 인터페이스를 복잡하게 만드는 대신, 페이지 가이드를 추가하고 사용자가 새로운 기능에 대해 배울 수 있도록 합니다.


http://tracelytics.github.io/pageguide/ 


0*lKoDByewo_SgzpA3.gif 


설치하는 방법 


다음 네 가지 방법 중 하나로 PageGuide를 설치할 수 있습니다.


bower install pageguide 


npm을 사용하여 설치


npm install pageguide
grunt server


설치는 예제와 함께 로드되며 http : // localhost : 3000 / example /에서 Grunt를 사용하여 실행할 수 있습니다.


초기 설정의 경우 다음과 같이 pageguide.js 및 CSS 파일을 추가하십시오.


<script src="{YOUR_PATH}/pageguide.min.js"></sc
<link rel="stylesheet" href="{YOUR_PATH}/pageguide.css">

사용하는 방법 


PageGuide를 초기화하려면 HTML 파일에 다음 코드를 추가하십시오.


$(document).ready(function() {
    tl.pg.init({ /* optional preferences go here */ });
});

<ul>에서 선택기를 지정하면 텍스트를 표시하기 위해 PageGuide와 일치합니다. 아래는 pageguide.js를 페이지 하단에 추가하는 예입니다.


<ul id="tlyPageGuide" data-tourtitle="REPLACE THIS WITH A TITLE">
      <li class="tlypageguide_left" data-tourtarget=".first_element_to_target">
        <div>
          Here is the first item description. The number will appear to the left of the element.
        </div>
      </li>
      <li class="tlypageguide_right" data-tourtarget="#second_element_to_target">
        <div>
          Here is the second item description. The number will appear to the right of the element.
        </div>
      </li>
      <li class="tlypageguide_top" data-tourtarget=".third_element_to_target > div.is_here">
        <div>
          Here is the third item description. The number will appear above the element.
        </div>
      </li>
      <li class="tlypageguide_bottom" data-tourtarget="#fourth_element_to_target">
        <div>
          Here is the fourth item description. The number will appear below the element.
        </div>
      </li>
</ul>


PageGuide는 페이지에 정적 메시지를 표시하는 데 사용되므로 덜 복잡합니다.