intro.js - 网站引导页插件

一个用于制作网页引导效果的js插件,为您的项目提供分步指南,更好地介绍网站和功能。

intro.js是一个用于制作网页引导效果的js插件,为您的项目提供分步指南,更好地介绍网站和功能。用法也简单。

intro.js - 网站引导页插件

1.在需要的页面添加引用

  • intro.js
  • introjs.css

这两个文件已经足够,但是文件夹themes中是不同的样式,如果需要也可以引入喜欢的样式

文件夹example中是demo,大家也可以照葫芦画瓢

2.参数说明

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'
    };

只需要在需要引导说明的标签上加入如下属性,插件就自动将当前标签区域高亮选中,另外附加说明

<div data-step="1" data-intro="这里是步骤1!"></div>
<div data-step="2" data-intro="这里是步骤2!"></div>
<div data-step="3" data-intro="这里是步骤3!"></div>

另外还有两个比较有用的方法

oncomplete 选中“跳过”按钮回调方法

onexit选中“结束”按钮回调方法

一般在页面加载时调用即可:

//访问引导页
function guide() {
    introJs().setOptions({
        prevLabel: "上一步",
        nextLabel: "下一步",
        skipLabel: "跳过",
        doneLabel: "结束"
    }).oncomplete(function () {
        //点击跳过按钮后执行的事件
    }).onexit(function () {
        //点击结束按钮后, 执行的事件
    }).start();
}

如何使用

Intro.js可以通过三个简单的步骤添加到您的站点中:

1)在页面中添加intro.jsintrojs.css(或用于生产的最小版本)。使用introjs-rtl.min.css的从右到左语言支持。

CDN托管文件位于jsDelivr(单击“显示更多”)和cdnjs处

2)data-intro和添加data-step到您的HTML元素中。要添加提示,您应该使用data-hint属性。

例如:

<a href='http://google.com/' data-intro='Hello step one!'></a>

在这里查看所有属性。

3)调用此JavaScript函数:

introJs().start();

(可选)传递一个参数introJs以限制显示部分。

例如 introJs(".introduction-farm").start();,仅对带有的元素运行介绍class='introduction-farm'

intro.js - 网站引导页插件

用于:

Intro.js具有许多用于不同用途的包装器。请访问文档以获取更多信息。

注意

文件夹example中是demo,大家也可以照葫芦画瓢

商业牌照

如果要将Intro.js用于商业应用程序,主题或插件,则商业许可是适当的许可。使用此选项,您的源代码将保持专有。在introjs.com上购买商业许可证

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

查看演示

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
插件

HotSpot-Ai - 一款基于AI帮助构思和写作的WordPress插件

2023-4-3 20:34:00

软件

我来 - 不仅仅是未来的云端笔记

2021-4-15 20:44:02

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
2 条回复 A文章作者 M管理员
  1. 北陌

    看不懂,不适合小白

    • Muze

      期待我出的教程吧( ̄▽ ̄)"

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索