intro.min.js_使用Intro.js构建分步指南[教程]

最新推荐文章于 2024-04-17 21:31:09 发布

cune1359

最新推荐文章于 2024-04-17 21:31:09 发布

阅读量879

点赞数

文章标签： python javascript java js css ViewUI

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

我想将本教程重点放在名为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.css和intro.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演示版图上运行的示例，因为它准确显示了典型的网站浏览中可以实现的功能。我建议对这种技术感兴趣的所有人睁大眼睛！

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

最后的想法

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

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

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
intro.min.js_使用Intro.js构建分步指南[教程]

有许多插件可用于创建您自己的引导式网站导览。这种动画页面效果对刚刚了解您网站布局的新访客非常有用。他们怎么知道所有重要的界面功能和菜单链接？通过使用导览，很容易向感兴趣的用户解释所有这些功能。我想将本教程重点放在一个名为Intro.js的开源jQuery插件上。我真的很喜欢这个选择，因为它具有页面调光功能，还可以轻松自定义CSS来更改工具提示的外观。依赖关系也很简单，需要jQu...
复制链接

扫一扫