精华内容
下载资源
问答
  • 第一步:在页面中引入 intro.js 和 introjs.css 第二步:选择你需要添加指引的区块,对区块添加唯一的id或者样式 第三步:写一个具体的js函数,完成引导功能 代码如下:<html><head>[removed][removed]...
  • 实用jQuery新手指引流程引导插件Intro.Js,不错的JS特效,一般用在新功能上线后,对用户的 操作进行引导,也用在新手帮助方面,此JS插件支持键盘左右键切换引导,支持enter进入下一步 ,支持ESC取消引导,还是很...
  • intro.js酷炫的引导页面插件
  • Intro.js由两个主要文件组成,JavaScript部分和CSS部分很好地呈现了元素。 Intro.js API的简单性将帮助您为产品开发高级入门。 Intro.js很轻巧,只有10kB,没有任何外部依赖! Intro.js提供了多种方法来配置您的...
  • intro.jsReact 围绕小型React包装器。 包装器同时支持步骤和提示。 快速链接 例子 您可以找到一个小示例。 安装 使用Npm进行安装(如果仍然使用npm <5,请不要忘记添加--save选项) : $ npm install intro.js-...
  • Intro.js v3 轻巧,用户友好的入职游览库 去哪儿 您可以从以下位置获取Intro.js的本地副本: 1)这个github存储库,使用git clone https://github.com/usablica/intro.js.git 2)使用bower install intro.js --...
  • 有许多插件可用于创建您自己... 我想将本教程重点放在一个名为Intro.js的开源jQuery插件上。 我真的很喜欢这个选择,因为它具有页面调光功能,还可以轻松自定义CSS来更改工具提示的外观。 依赖关系也很简单,需要jQu...

    有许多插件可用于创建您自己的引导式网站导览。 这种动画页面效果对刚刚了解您网站布局的新访客非常有用。 他们怎么知道所有重要的界面功能和菜单链接? 通过使用导览,很容易向感兴趣的用户解释所有这些功能。

    我想将本教程重点放在名为Intro.js的开源jQuery插件上。 我真的很喜欢这个选择,因为它具有页面调光功能,也很容易自定义CSS来更改工具提示的外观。 依赖关系也很简单,需要jQuery和插件自己的自定义CSS / JS文件。 如果您熟悉jQuery,则可以在30-60分钟的开发时间内使此插件正常工作。

    我的演示页面将以Hongkiat的CSS等高演示为例。 它将指导您完成演示页面界面的所有关键方面。 查看下面的演示链接,以了解我们将要做什么。

    入门

    我不想过多地关注HTML或CSS,因为它们都与您自己的页面有关。 但是,在使用Intro.js(我在本教程中没有做过)时,我想指出一点。 基本上,您有2个不同的选项来设置游览的各个“步骤”。 这些步骤可以像我已经完成的那样被硬编码到JavaScript数组中,或者可以将HTML属性附加到页面中的各个元素上。

    这是主插件演示页面上的示例:

    <h1 data-step="1" data-intro="Hello all! :) This project's called Intro.js.">Intro<span style="font-weight: normal;">.js</span></h1>

    我宁愿将这些内容保留在JS变量中,因为它可以使HTML更加整洁,而且所有重要代码都位于一个文件中,而不是分散在不同的页面元素中。

    但是,如果您只是想测试水域,则可以将这种更简单的技术与HTML5数据属性结合使用。

    <!doctype html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery Live Demo Tour - CSS Equal Height on Hongkiat.com</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/demo-style.css">
    <link rel="stylesheet" type="text/css" href="css/introjs.css">
    <script type="text/javascript" src="js/nav.js"></script>
    <script type="text/javascript" src="js/intro.js"></script>
    </head>

    现在,我的文档头还包含与原始Hongkiat演示页面相关的脚本。 我不需要进一步研究这些样式,因为它们不会以任何方式影响巡回演出。 但重要的是要注意, 我们需要jQuery副本作为依赖项 ,以及introjs.cssintro.js

    所有这些文件都将与Github的插件下载打包在一起。

    微小CSS更新

    最初,introjs.css文件包含许多有用的工具提示效果默认样式。 如果您对页面有独特的外观,则这些样式可能会在您自己的样式表中被覆盖。 我所编辑的只是字体大小,以通过更高的line-height属性使字母变大。

    #tourbtn {
      position: fixed;
      right: 15px;
      bottom: 35px;
    }
    #tourbtn a {
      background: #bac081;
      padding: 8px 15px;
      font-size: 12px;
      line-height: 22px;
      font-weight: bold;
      color: #454a50;
      text-decoration: none;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    #tourbtn a:hover {
      background: #cacf96;
    }

    这些其他替代样式仅对于创建页面右下角的浏览按钮很重要。 在用户最初访问页面并提供简短的浏览 (如果需要)之后,该选项显示一次 。 对于我的演示,引导页面浏览将自动开始,但是某些用户宁愿设置浏览按钮。

    带有Intro.js的jQuery代码

    没有一堆很难理解JavaScript,但是当您不熟悉该语言时,其语法会很严格。 我将其分解为块部分; 这样更容易理解。 请注意,所有这些代码都包含在HTML页面底部

    但是,您可以制作一个单独的JS文件来分隔代码(如果这样更容易)。

    $(function(){
      var introguide = introJs();
      // var startbtn   = $('#startdemotour');
    }

    首先,我们设置一个与游览功能相关的重要变量。 我们创建一个名为introguide的新游览变量,该变量调用主要的introJS插件函数。 startbtn变量可用于在页面中设置相关的游览按钮。 之后,我们需要设置一个大索引,其中包含每个游览的步骤,目标元素和工具提示内容。

    introguide.setOptions({
        steps: [
            {
              element: '.nav-bar',
              intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
              position: 'bottom'
            },
            {
              element: '.nav-logo',
              intro: 'Click this main logo to view a list of all Hongkiat demos.',
              position: 'bottom'
            },
            {
              element: '.nav-title',
              intro: 'Hover over each title to display a longer description.',
              position: 'bottom'
            },
            {
              element: '.readtutorial a',
              intro: 'Click this orange button to view the tutorial article in a new tab.',
              position: 'right'
            },
            {
              element: '.nav-menu',
              intro: "Each demo will link to the previous & next entries.",
              position: 'bottom'
            }
        ]
    });

    请注意,此数据是通过调用introguide.setOptions({})设置的,该插件是插件的内部功能。 我们传递一个数组集,其中包含用于导览的步骤列表。 元素可以是任何典型的jQuery选择器,尽管通常不建议使用类,除非页面上只有1个。

    位置值也可以使用data-position获得,但默认为底部。 我只是为了清楚起见,在每个步骤中都包含此密钥。

    我们唯一需要的代码行是调用introguide.start() 。 这可以保留在事件处理程序中,该事件处理程序仅在用户单击链接或按钮后才触发。 但是,这不是必需的,并且可以在DOM完成加载后立即开始游览。

    introguide.start();
    /**
        startbtn.on('click', function(e){
          e.preventDefault();
          introguide.start();
          $(this).hide();
        });
        
         * oncomplete re-display the button
         * hide by default since we don't need this functionality.
        introguide.oncomplete(function() {
          if(startbtn.css('display') == 'none') {
            startbtn.show();
          }
        });
        introguide.onexit(function() {
          if(startbtn.css('display') == 'none') {
            startbtn.show();
          }
        }); 
    **/

    每当游览结束时,都可以使用回调函数, 如果需要 ,我们可以使用这些回调来重新显示按钮 。 在此演示中,我已经注释了这些代码,但是您应该知道这些回调方法可用于在游览结束后或用户在某个时候退出游览之后运行任何JS代码。

    我非常喜欢Intro.js插件,因为文档简单明了且易于理解。 使用jQuery作为附带库,几乎可以在任何网页上使用它。 我喜欢这个在Hongkiat演示版图上运行的示例,因为它准确显示了典型的网站浏览中可以实现的功能。 我建议对这种技术感兴趣的所有人睁大眼睛!

    许多新的社交网络和初创公司正在使用导览,当您在网上找到这样的示例时,它们在精心设计自己的网站时可能会非常有用。

    演示旅游预览插件重点介绍步骤introjs

    演示旅游预览插件重点介绍步骤introjs

    相关图书馆

    尽管我个人偏爱Intro.js,但我不能说这是绝对最佳的解决方案。 还有很多其他的网站浏览插件 ,在本文中值得一提。 请查看下面的小清单,其中我整理了一些相关的JS Tour插件的综述,这可能对开发人员有用。

    最后的想法

    引导性的网站浏览可以为您的新启动或重新设计的布局提供很多好处。 可用性对于任何网站的成功运行至关重要。 引导式网页浏览是一种使用任何布局来提高舒适度的非凡方法。 我希望本教程可以让您了解Intro.js的奇妙之处,并为您的用户构建有指导的导览。


    翻译自: https://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/

    展开全文
  • angular-intro.js, 用于 intro.js的AngularJS指令 angular-intro.js 一个包装 intro.js 插件功能的angularjs指令。 有关概述,请参见项目页中的 。 Bower你可以通过使用以下命令通过 Bower 安装这里软件包:bower ...
  • Intro.js 一个引导用户的js/css库, 没有任何依赖. 安装 npm install intro.js --save Doc 文档地址: https://introjs.com/docs/ 使用 页面引入 import intro from 'intro.js'; import 'intro.js/minified/introjs...

    前言

    这里只介绍通过JSON配置的introJs用法

    介绍

    Intro.js 一个引导用户的js/css库, 没有任何依赖.

    安装

    npm install intro.js --save
    

    Doc

    文档地址: https://introjs.com/docs/

    使用

    页面引入

      import intro from 'intro.js';
      import 'intro.js/minified/introjs.min.css';
    

    html

    <template>
        <a-button type="primary" @click="handleStart">开始</a-button>
    </template>
    

    js

     function handleStart() {
            intro()
              .setOptions({
                steps: [
                  {
                    title: 'Welcome',
                    intro: 'Hello World! 👋',
                  },
                  {
                    title: 'Collapse Button',
                    element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
                    intro: 'This is the menu collapse button.',
                  },
                  {
                    title: 'User Action',
                    element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
                    intro: 'This is the user function area.',
                  },
                ],
              })
              .start();
          }
    

    效果如下:
    在这里插入图片描述

    setOptions来设置当前实例,核心的部分就是设置steps,这里包含了所有引导的步骤,比较常用的属性如下:

    interface StepsObj {
      // 标题
      title?: string;
      // 简介
      intro?: string;
      // 高亮的DOM元素
      element?: any;
      // 提示框位置
      position?: string;
    }
    

    setOptions除了steps属性外,还有其他属性可以配置提示框,这里提供部分属性以供参考:

     // 禁止元素互动(被引导的元素不能点击)
      disableInteraction: true,
      // 下一步按钮的名称
      nextLabel: '下一个',
      // 上一步按钮的名称
      prevLabel: '返回',
      // 跳过按钮的名称
      skipLabel: '跳过引导',
      // 结束按钮的名称
      doneLabel: '完成',
      // 为 intro 指定类名
      tooltipClass: 'toolTip',
      // 是否允许点击空白处退出
      exitOnOverlayClick: true,
      // 是否显示轮播点
      showBullets: true,
      // 是否使用进度条
      showProgress: true,
      // 显示步数  eg: 1/5
      showStepNumbers: true,
      // 是否允许键盘来操作
      keyboardNavigation: true,
    

    完整属性移步官方文档: https://introjs.com/docs/intro/options

    动态的steps

    实际使用时遇到权限问题,不同用户权限不同,看到的页面也有所不同,从而引导的元素也会有差别,如果写死steps,会导致某些元素找不到而报错,引导也不能进行。一开始想的是根据权限进行判断来动态增减steps,但是权限实在复杂,而我们要做的其实很简单,找不到的元素就不引导!

    配置文件中:

    export function stepsOfProduct() {
      const stepsList = [
        {
          title: '查询',
          element: document.getElementsByClassName('search-box')[0].getElementsByTagName('BUTTON')[0],
          intro: '填写查询条件后,进行查询操作',
        },
        {
          title: '重置',
          element: document.getElementsByClassName('search-box')[0].getElementsByTagName('BUTTON')[1],
          intro: '清空查询条件',
        },
      ];
      // 权限
      // 判断DOM是否存在, ??的意思是不存在时设为'' 不会引起报错
      const addApplyBtnDOM = document.getElementsByClassName('add-apply')[0] ?? '';
      addApplyBtnDOM &&
        stepsList.push({
          title: '添加申请人',
          element: addApplyBtnDOM,
          intro: '新增申请人',
        });
      return stepsList;
    }
    

    前面的配置进行修改:

     function handleStart() {
            intro()
              .setOptions({
                steps: stepsOfProduct(),
              })
              .start();
          }
    

    这样我们可以对页面所有有权限的元素进行动态引导

    提示信息中使用icon

    有时我们可能会需要这样的效果:
    在这里插入图片描述
    事实上,steps数组对象中的intro除了是文本之外,还可以是HTML字符串

      {
        title: 'Farewell!',
        element: document.querySelector('.card__image'),
        intro: '<img src="https://images.unsplash.com/photo-1608096299210-db7e38487075?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" />'
      }]
    

    效果:
    在这里插入图片描述
    对于icon我们可能经常使用的是组件来完成,但是icon组件的本质还是渲染一个SVG,浏览器中通过shift+ ctrl + c点击渲染的图标找到对应的svg复制粘贴即可
    在这里插入图片描述

    {
          title: '填写状态',
          element: fillStatusDOM,
          intro:
            '<div><svg width="1em" height="1em" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path fill="#55d187" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>代表填写完整,<svg width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path fill="#efbd47" d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg>代表存在未填项</div>',
        })
    

    以上!

    展开全文
  • 在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更... Intro.js 是一个轻量级的js库,用于创建一步一步的产品引导,支持使用键盘的前后方向键导航,使用 Enter 和 ...

    在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,那么你知道应该如何才能够实现这种效果吗?小千今天就来给大家介绍一个非常好用的插件来实现这个效果,走过路过千万别错过啦。

          首先先给大家看一下最终的效果

    1

          今天的主角Intro.js

          1、Intro.js的安装

          Intro.js 是一个轻量级的js库,用于创建一步一步的产品引导,支持使用键盘的前后方向键导航,使用 Enter 和 ESC 键推出引导,您可以通过几个简单的步骤安装Intro.js

          首先我们引入下述文件

    2

          2、Intro.js基本使用

          接着在HTML文件中加入基本结构

    3

          data-step 是步骤,data-intro 是对每一步的介绍。

          最后我们加入JS代码就可以通过浏览器运行查看效果啦(* ̄︶ ̄)

    4

    5

          怎么样是不是已经看到效果了,接下来我们只需要美化一下就可以实现文章开头的效果了。最后附上完整版代码。

    6

    想要学习web前端的同学,可以参考千锋成都web前端培训班提供的学习大纲;

    展开全文
  • vue-introjs Vue的intro.js绑定。 安装添加软件包yarn添加vue-introjs#或通过npm:npm i vue-introjs安装插件导入VueIntro和Vue的vue-introjs intro.js绑定。 安装添加软件包yarn添加vue-introjs#或通过npm:npm i...
  • vue-cli 解决 intro.js

    千次阅读 2019-07-03 10:14:25
    vue-cli 如何使用 intro.js 安装:npm install vue-introjs --save ** webpack.dev.conf.js配置 main.js中配置 基本使用方法 introBtn的方法 、 这只是基本用法 具体描述请于...

    **

    vue-cli 如何使用 intro.js

    **
    在这里插入图片描述

    安装:npm install vue-introjs --save

    webpack.dev.conf.js配置
    在这里插入图片描述
    main.js中配置
    在这里插入图片描述
    基本使用方法
    在这里插入图片描述
    introBtn的方法
    在这里插入图片描述
    这只是基本用法 具体描述请于(https://github.com/alex-oleshkevich/vue-introjs)中自行学习

    展开全文
  • intro.min.jsIn a previous article, An Introduction to Product Tours with Intro.js, we discussed the importance of creating product tours and how we can use Intro.js to create awesome product tours....
  • intro.js设置属性

    千次阅读 2019-01-21 11:29:10
    intro1.setOptions({ prevLabel: “上一步”, nextLabel: “下一步”, skipLabel: “跳过”, doneLabel: “结束”, }).oncomplete(function () { //点击跳过按钮后执行的事件 }).onexit(function () { //...
  • 1. 下载包intro.js npm iintro.js -s 2.新建一个intro.js文件配置intro, 代码如下: importintroJsfrom'intro.js' import'intro.js/introjs.css' constintro=introJs() //更多配置参数请到官方文档查看 ...
  • react中使用intro.js

    千次阅读 2019-07-02 18:53:59
    react中使用intro.js 由于一位极品美女的需求,所以我开启的intro的研究,具体操作如下: 项目是react,惊喜的发现intro提供了react的插件,首先install一下 npm install intro.js-react 下载完成后请在node_...
  • Vue使用intro.js新手指引

    万次阅读 2019-06-27 14:54:26
    npm下载:npm install intro.js --save 在main.js中引入: import IntroJs from 'intro.js' import 'intro.js/introjs.css'; Vue.use(IntroJs); 参数详解 页面 在需要引导说明的标签上加入如下属性,插件就自动将...
  • react逐渐热了起来,但是新的东西毕竟前辈的经验少一些,前段时间自己在react中用到intro.js时,得到的资料甚少,摸索后便将一些心得记录下来了~ 1 intro.js的引入,这一点请看上一篇博文关于如何在react中引入文件...
  • intro.js introjs.css ) 下载地址: 链接:https://pan.baidu.com/s/1_80KP2Fb_ri2L-H_UCVgFQ 提取码:buit 2. intro.js 参数说明 this._options = { /* 下一步按钮的显示名称 */ nextLabel: 'Nex...
  • npm install intro.js --save 写在HTML的基本属性 data-intro 步骤的工具提示文本 data-step 可选地定义步骤的数目(优先级) data-tooltipClass:可选地为工具提示定义CSS类 data-highlightClass:可选地将CSS类追加...
  • 使用Intro.js将易于吸收的交互式用户文档添加到您JavaScript应用中。 从一个示例巡回实现中学习如何从应用程序的UI内部以现代方式演示应用程序的功能。 此内容不再被更新或维护。 全文以PDF格式“按原样”提供。 ...
  • git源码:https://github.com/usablica/intro.js 引入插件js、css文件 <link href="../../introjs.css" rel="stylesheet"> <script type="text/javascript"...
  • 新手引导 intro.js

    千次阅读 2019-04-21 17:05:44
    intro.js,很强大,因为我这个新手引导定制的地方比较多,它支持我插入div等标签,修改样式等,还可以根据需要用js插入各种元素和事件,我很满意 有的时候获取元素时候,获取不到,所以需要一个等待元素出现的方法...
  • npm install intro.js intro.js-react 2、引入introjs-react和样式文件 import { useState } from 'react' import { Steps } from 'intro.js-react' import "intro.js/introjs.css"; 3、定义步骤对应的class–描述...
  • 1. 先引入intro.jsjs和css (1)  <script src="${ctx}/resources/intro/intro.js"></script> <link rel="stylesheet" type="text/css" href="${ctx}/resources/intro/introjs.css"> (2...
  • Intro.js中文介绍 Intro.js官网 最近在做angular7的项目,需要做页面引导,搜集了一下资料,应用到项目中还是比较简单,废话不多说直接上代码 1. 安装 intro.js npm install intro.js --save 2. 在公共style...
  • Intro.js Lightweight, user-friendly onboarding tour library Where to get You can obtain your local copy of Intro.js from: 1) This github repository, using git clone ...
  • npm i vue-introjs intro.js --save 在main.js中引入 import VueIntro from 'vue-introjs' Vue.use(VueIntro); import 'intro.js/introjs.css'; 在vue文件中写 <div v-intro="'Edit Project\'s Name Here'...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,400
精华内容 7,360
关键字:

Intro.js