intro.js引导插件 - JS实战

intro.js引导插件实战详解

用法

载入资源

载入两个文件,intro.jsintrojs.css

intro.js引导插件 - JS实战-Npcink
intro.js引导插件 - JS实战-Npcink

intro.js - 网站引导页插件

使用

您需要一个开关

<a href="javascript:void(0);" onclick="javascript:introJs().start();">点击查看指引</a>

配置

有两个属性需要配置

  • data-step:显示顺序(纯数字)
  • data-intro:提示文本(HTML)
  <div data-step="1" data-intro="这里是步骤1!">2</div>
  <div data-step="2" data-intro="这里是步骤2!">3</div>

补充

  • data-position:分步引导的内容所在的位置,
  • 如右侧:right 左侧:left 上方:top 下方:bottom

简单的演示

查看演示

添加图片

单纯的文本提示着实单调,加上图片

  <div data-step="1" data-intro="这里是步骤1!<img src=./img/npcink.png>">2</div>

查看演示

如上所示,在data-intro提示文本中,可以使用HTML标签

实战

上面这些都太理想了,在实际运用中,怎么会这么简单,先来看一段经典的HTML代码:

<div class="n-210105-3">
    <div class="n-bg">
      <div class="n-bg-d">
        <div class="n-main">
          <span class="n-ico">
            @@@
            <p>专属内容</p>
          </span>
          <p class="n-meat">您需要入圈之后才能查看帖子内容</p>
          <div class="n-button">现在加入</div>
        </div>
      </div>
    </div>
  </div>

一个问题,怎么给我们需要的标签添加属性呢?

我们可以通过下面这个JS方法来给指定的标签添加属性

document.querySelector(".n-ico p").setAttribute('data-step', "1"); 

实战演示

点击查看指引

专属内容

您需要入圈之后才能查看帖子内容

现在加入

补充

添加其他的引导样式主题

在您文章开头您下载的资源中,有一个名为themes的文件夹,里面的CSS文件就是主题,载入其中不同的CSS文件,即可实现不同的外观。

触发引导的同时触发一个JS函数

<a onclick="n_start();javascript:introJs().start();">使用指南</a>

给指定的class添加样式

document.querySelector(".po-topic-circle").style.display = "";
随记

她哭的那个瞬间 全世界都输了

2019-7-12 21:52:25

投稿

从零开始,开发WORDPRESS插件

2018-7-9 18:48:47

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索