intro.js로 튜토리얼 쉽게 만들기

4691 단어 JavaScript
최근 교과서 기능의 응용 빈도가 증가한 것을 보았다.
그래서 인트로.js로 튜토리얼 기능을 만들기로 했습니다.

견본

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Intro.js Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/intro.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.1.0/introjs.min.css" rel="stylesheet" type="text/css">
</head>
<body style="padding:15px;">
  <h1><i class="fa fa-play-circle" style="font-size:1em;"></i> intro.js Test</h1>
  <form name="users">
    <select name="testSelect" id="hige" data-intro="higeを選択してください" data-step="1">
      <option value="opt1">value1</option>
      <option value="opt2">value2</option>
      <option value="opt3">value3</option>
    </select>
    <input type="text" name="hoge" id="hoge" class="hogeInput" placeholder="hoge"  data-intro="hogeを入力してください" data-step="2" />
    <input type="button" name="hage" id="hage" class="hageInput" placeholder="hage"  data-intro="登録ボタンを押してください" data-step="3" value="登録" />
  </form>
  <script type="text/javascript">
  introJs().start();
  </script>
</body>
</html>

데모



외부 자료


  • intro.js

  • intro.js - GitHub
  • 좋은 웹페이지 즐겨찾기