你的位置:首页 > Java教程

[Java教程]Intro.js 网站演示


Intro.js

为您的网站和项目提供一步一步的、更好的介绍

使用简单

引入 js 和 css,然后在代码中加入步骤和介绍。

快速小巧

7 KB 的 JavaScript 和 3 KB CSS,就是全部。

免费开源

免费和开源(包括商业用途),MIT许可证下。


键盘加鼠标导航

鼠标或键盘 ENTER 导航,ESC 键退出。

在线实例

实例演示



参数说明

设置多个格式 json格式:

  1. key:value
复制

可设置参数

  1. nextLabel: "Next →",
  2.             prevLabel: "← Back",
  3.             skipLabel: "Skip",
  4.             doneLabel: "Done",
  5.             tooltipPosition: "bottom",
  6.             tooltipClass: "",
  7.             highlightClass: "",
  8.             exitOnEsc: !0,
  9.             exitOnOverlayClick: !0,
  10.             showStepNumbers: !0,
  11.             keyboardNavigation: !0,
  12.             showButtons: !0,
  13.             showBullets: !0,
  14.             showProgress: !1,
  15.             scrollToElement: !0,
  16.             overlayOpacity: 0.8,
  17.             positionPrecedence: ["bottom", "top", "right", "left"],
  18.             disableInteraction: !1
复制

设置方法(多个参数设置)

关键字:setOptions

  1. introJs().setOptions({'prevLabel':'← 上一步','nextLabel':'下一步 →','skipLabel':'跳过','doneLabel':'完成'}).start();
复制

设置方法(单个参数设置)

关键字:setOption

  1. introJs().setOption("prevLabel","上一步").start();
复制

页面分布引导的元素设置:

  1. <div id="demo" data-step="1" data-intro="这里是分布引导的内容……" data-position="right">
  2.   </div>
复制

说明:    

  1. data-step:第几步
  2. data-intro:分布引导的内容 
  3. data-position:引导内容显示位置,
复制

参数:left,right,top,bottom(不解释)  

 


下载