분류 javascript

Chardin.js - Gmail의 새로운 작composer 투어에서 영감을 얻은 Chardin.js는 기존 요소에 대한 간단…

컨텐츠 정보

  • 조회 447 (작성일 )

본문

JQuery 플러그인을 사용하여 지시 사항을 표시합니다. 

GitHub 페이지에는 지침 및 설명서가 포함되어 있으며 4.9k GitHub 별표가 있습니다.


1*LrzcVkkLPkf3eH4F63h2rg.gif 


http://heelhook.github.io/chardin.js/ 


설치하는 방법 


GitHub 저장소를 포크하거나 필요한 CSS 및 JS 파일 chardinjs.csschardinjs.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 객체로 지정할 수 있는 구성 옵션도 제공합니다.