数控加工中心解锁

数控加工中心解锁Intro.js 由于其用户友好的解决方案而被广泛使用，并拥有1.9万个GitHub star。其最重要的功能是：

无依赖项：不需要任何其他依赖项
体积小，速度快：体积较小，因此引导过程顺畅而直观。JavaScript文件的总大小为10KB, CSS为2.5KB。
用户友好：导航是用户友好的，并提供可根据您的喜好选择的各种主题。
浏览器兼容性：可在所有主要浏览器上使用，例如Google Chrome，Mozilla Firefox，Opera，Safari和Internet Explorer。
文档：文档非常出色，其中包含要介绍的每个元素的示例。

Intro.js地址：Intro.js

如何安装
要使用Intro.js，您需要安装npm和Node.js。或者，您可以从以下位置获取Intro.js：

它的GitHub存储库：使用 git clone github.com/usablica/in…
使用 bower

bower install intro.js - save
复制代码
使用 NPM

npm install intro.js - save
复制代码
CDNs (jsdeliver.com, cdnjs.com)

如何使用
一旦安装了intro.js，只需三个简单的步骤即可将其添加到项目中：

将JS和CSS文件（intro.js和introjs.css）添加到您的项目中。如果需要从右到左的语言支持，还可以添加introjs-rtl.min.css。
将属性data-intro和data-step添加到相关的HTML元素中。这将为特定元素启用intro.js。
调用以下JavaScript函数：

introJs().start();
复制代码使用以下附加参数在特定元素或类上调用Intro.js。
introJs(".introduction-farm").start();
复制代码2.Shepherd

Shepherd有8.1k GitHub星，其网站演示了它的工作原理。其主要功能如下：

可访问性：提供键盘导航支持，符合a11y规范，并且还使用JavaScript启用DOM元素内部的焦点捕获。
高度可定制：允许在不影响性能的情况下更改外观。
可以很容易地嵌入到项目的前端框架中。
文档：文档涵盖了安装和自定义，包括项目的主题和样式。

Shepherd地址：shepherdjs.dev/

如何安装
Shepherd与许多主要的前端框架集成在一起，并提供了以下包装器以方便使用：

Angular：angular-shepherd是一个Angular包装器，与Angular 8+兼容。
Ember：ember-shepherd是一个ember包装器，已通过Ember.js> = v3.8进行了测试，并且与Ember CLI v12.3兼容。
React：react-shepherd是一个React包装器。
Vue：vue-shepherd是Vue包装器。

您可以使用npm或yarn直接安装这些包装器：
npm install shepherd.js -save
yarn add shepherd.js
复制代码也可以通过CDN的JsDeliver直接将其拉出：

复制代码如何使用
一旦安装了Shepherd，就可以引入CSS和JS文件，如下所示：

复制代码下面是一个创建Shepherd之旅并添加带有DOM元素的步骤的示例。 const tour = new Shepherd.Tour({ defaultStepOptions: { cancelIcon: { enabled: true }, classes: 'class-1 class-2', scrollTo: { behavior: 'smooth', block: 'center' } } });

tour.addStep({
title: ‘Creating a Shepherd Tour’,
text: Creating a Shepherd tour is easy. too!\ Just create a \Tour` instance, and add as many steps as you want.`,
attachTo: {
element: ‘.hero-example’,
on: ‘bottom’
},
buttons: [
{
action() {
return this.back();
},
classes: ‘shepherd-button-secondary’,
text: ‘Back’
},
{
action() {
return this.next();
},
text: ‘Next’
}
],
id: ‘creating’
});

tour.start();
复制代码3.Bootstrap Tour

Twitter Bootstrap通过Bootstrap Tour提供了自己的免费导览实现，GitHub上拥有4,315个星。
引导弹出窗口易于构建。这是用于引导程序的基于jQuery的插件，并使用DOM和JavaScript配置的功能来构建导览。就像添加JS和CSS文件一样简单，并提供了详细深入的文档。

Bootstrap Tour地址：bootstraptour.com/

如何安装
您可以简单地使用bootstrap的CSS和JS文件：

... 复制代码如何使用 初始设置后，您可以创建导览的实例，并添加具有元素详细信息的步骤，如下所示： // Instantiate the tour var tour = new Tour({ steps: [ { element: "#my-element", title: "Title of my step", content: "Content of my step" }, { element: "#my-other-element", title: "Title of my step", content: "Content of my step" } ]});

// Initialize the tour
tour.init();

// Start the tour
tour.start();
复制代码4.Chardin.js

它使用JQuery插件显示指令，GitHub页面包含说明和文档，并具有4.9k GitHub star。

Chardin.js地址：heelhook.github.io/chardin.js/

如何安装
您可以 fork GitHub存储库或下载所需的CSS和JS文件 chardinjs.css和 chardinjs.min.js并将它们添加到HTML页面。

复制代码如何使用 设置后，您可以向文档中添加说明，以下是向图像元素添加指令的示例。data-intro设置要显示的文本，数据位置决定文本的位置。 复制代码要以顺序模式运行Chardin，您需要使用不同的指令，例如data-chardin-sequenced =“ true”，data-chardin-auto =“ true”和data-chardin-delay =“ 100”来自动显示指令通过元素的运动。 复制代码一旦这些元素与指令一起准备好了，您就可以通过单击按钮来初始化库，或者让它自动运行，库也可以被限制在一个特定的容器中。 $('body').chardinJs(); $('body').on('click', 'button[data-toggle="chardinjs"]', function (e) { e.preventDefault(); return ($('body').data('chardinJs')).toggle(); });

// Run Explicitly
$(‘body’).chardinJs(‘start’)

// Confine to container
$(’.container’).chardinJs(‘start’)
复制代码Chardin.js 允许您刷新覆盖层，数控加工中心解锁还提供了构造选项来指定包含文本的URL作为JSON对象，可以将其显示为指令。
5.PageGuide

PageGuide是一个基于jQuery和CSS3的交互式、动态和单页应用程序的智能指南。

Pageguide地址：tracelytics.github.io/pageguide/

您可以通过以下四种方式之一安装PageGuide：

从GitHub下载最新版本
克隆仓库：git clone github.com/tracelytics…
用Bower安装

bower install pageguide
复制代码
使用npm安装

npm install pageguide
grunt server
复制代码对于初始设置，请添加pageguide.js和CSS文件，如下所示：