iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
3
Modern Web

30天學習30套前端技術(2018年)系列 第 18

[十分鐘學習] Intro.js - 網站導覽

  • 分享至 

  • xImage
  •  

example1

優化網站的導覽功能,提供步驟指南給瀏覽者,強化網站的使用體驗

GitHub Star: 16,000
Javascripting Overall: 90%
瀏覽器: ChromeFirefoxIE9+
RWD: 支援
License: GNU Affero General Public License v3.0


《安裝》

  • CDN

      <!-- Intro.js v2.7.0 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
    
  • npm

      $ npm install intro.js --save
    

《範例》

  • 步驟式導覽

      <div data-intro="【步驟1文字】"></div>
      <div data-intro="【步驟2文字】"></div>
      ...
      <script>
      	introJs().start();
      </script>
    

《延伸》

  1. Intro.js - Step-by-step guide and feature introduction for your website
  2. usablica/intro.js: A better way for new feature introduction and step-by-step users guide for your website and project.

上一篇
[十分鐘學習] reveal.js - 網頁?簡報?網站也可以二刀流
下一篇
[十分鐘學習] Fine Uploader - 拖曳上傳
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言