使用 intro.js 使項目介紹更加完美


1. 引入js 和css

intro.js

introjs.css

下載地址:

鏈接:https://pan.baidu.com/s/1_80KP2Fb_ri2L-H_UCVgFQ
提取碼:buit

2. intro.js  參數說明

this._options = {
      /* 下一步按鈕的顯示名稱 */
      nextLabel: 'Next →',
      /* 上一步按鈕的顯示名稱 */
      prevLabel: '← Back',
      /* 跳過按鈕的顯示名稱 */
      skipLabel: 'Skip',
      /* 結束按鈕的顯示名稱 */
      doneLabel: 'Done',
      /* 引導說明框相對高亮說明區域的位置 */
      tooltipPosition: 'bottom',
      /* 引導說明文本框的樣式 */
      tooltipClass: '',
      /* 說明高亮區域的樣式 */
      highlightClass: '',
      /* 是否使用鍵盤Esc退出 */
      exitOnEsc: true,
      /* 是否允許點擊空白處退出 */
      exitOnOverlayClick: true,
      /* 是否顯示說明的數據步驟*/
      showStepNumbers: true,
      /* 是否允許鍵盤來操作 */
      keyboardNavigation: true,
      /* 是否按鍵來操作 */
      showButtons: true,
      /* 是否使用點點點顯示進度 */
      showBullets: true,
      /* 是否顯示進度條 */
      showProgress: false,
      /* 是否滑動到高亮的區域 */
      scrollToElement: true,
      /* 遮罩層的透明度 */
      overlayOpacity: 0.8,
      /* 當位置選擇自動的時候,位置排列的優先級 */
      positionPrecedence: ["bottom", "top", "right", "left"],
      /* 是否禁止與元素的相互關聯 */
      disableInteraction: false,
      /* 默認提示位置 */
      hintPosition: 'top-middle',
      /* 默認提示內容 */
      hintButtonLabel: 'Got it'
    };

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM