讓 intro.js 幫你簡單做網站功能導覽

網址

2022-08-04 15:34:15

有些時候在一些新功能或服務推出時，可能會擔心使用者不知道該怎麼用，會需要一步一步在頁面帶領使用者說明功能，這時候就可以使用這隻 intro.js 來簡單完成這個需求。

使用方法只要讀入該 js 和 css 後，參考官方的 js 範例，指定每個步驟要介紹哪個區塊，intro.js 就可以幫你把功能給做好了。

introJs().setOptions({
  steps: [{
    intro: "Hello world!"
  }, {
    element: document.querySelector('#login'),
    intro: "Click here to login!"
  }]
}).start();

不過這隻服務是可能需要收費的，如果是要用在商業用途，記得要跟他們買授權喔，而如果沒有要應用在商業上，就可以免費使用。

[Mac App] CopyClip- 幫你儲存你的複製紀錄，方便重複使用 Awesome Cheatsheets- 好用的熱門程式語言與框架語法整理網站

你可能也會喜歡的

Shared workers- 跨越不同 window、iframe 或 worker處理 script

[Alpine.js] 指示詞 (Directive)應用之一

[jQuery] instastory.js- 方便好用的抓取 instagram hash tag 的 plugin

OpenLayers- 開源的 WebGIS 服務

Vide- 簡單好用的 jQuery 影片背景播放套件

Vue.js 與 axios 的應用說明，包含 Options API 與 Composition API 的寫法

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。