JQuery 플러그인을 사용하여 지시 사항을 표시합니다.
GitHub 페이지에는 지침 및 설명서가 포함되어 있으며 4.9k GitHub 별표가 있습니다.
http://heelhook.github.io/chardin.js/
설치하는 방법
GitHub 저장소를 포크하거나 필요한 CSS 및 JS 파일 chardinjs.css 및 chardinjs.min.js를 다운로드하여 HTML 페이지에 추가 할 수 있습니다.
<link href="chardinjs.css" rel="stylesheet"> <script src="chardinjs.min.js"></script>
사용하는 방법
설정 후 문서에 지침을 추가 할 수 있습니다. 아래는 이미지 요소에 명령어를 추가하는 예입니다. 데이터 소개는 표시 할 텍스트를 설정하고 데이터 위치는 텍스트의 위치를 결정합니다.
<img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right" />
순차 모드에서 Chardin을 실행하려면 data-chardin-sequenced =”true”, data-chardin-auto =”true”및 data-chardin-delay =”100”과 같은 다른 지시 사항을 사용하여 지시 사항을 자동으로 표시해야 합니다. 요소를 통한 운동.
<body data-chardin-sequenced="true" data-chardin-auto="false" data-chardin-delay="800" >
지침에 따라 요소가 준비되면 버튼 클릭을 통해 라이브러리를 초기화하거나 자동으로 실행할 수 있습니다. 라이브러리는 특정 컨테이너로 제한 될 수도 있습니다.
$('body').chardinJs();
$('body').on('click', 'button[data-toggle="chardinjs"]', function (e) {
e.preventDefault();
return ($('body').data('chardinJs')).toggle();
});
// Run Explicitly
$('body').chardinJs('start')
// Confine to container
$('.container').chardinJs('start')Chardin.js를 사용하면 오버레이를 새로 고칠 수 있으며 텍스트를 포함하는 URL을 지침으로 표시 할 수있는 JSON 객체로 지정할 수 있는 구성 옵션도 제공합니다.
등록된 댓글이 없습니다.
