使用EnjoyHint提示创作

最新推荐文章于 2024-04-12 09:43:38 发布

dingshi7798

最新推荐文章于 2024-04-12 09:43:38 发布

阅读量302

点赞数

文章标签： javascript 移动开发 ViewUI

本文的目的是介绍为网站创建提示的过程。首先，我们将研究如何为适当的网站元素创建单个提示。然后，我们将创建一系列提示，以指导您浏览网站。要创建提示，我将使用EnjoyHint 。作为示例，我使用Bootstrap框架进行了简单演示。

EnjoyHint依赖于jQuery ，它要求该库的版本大于或等于1.7版。另一个依赖项是KineticJS v5.1.0 ，它已经包含在EnjoyHint中，因此无需担心。

如果您想查看该演示的源代码，可以访问此GitHub存储库。

为什么要使用EnjoyHint？

EnjoyHint的主要目标是为您提供机会，帮助用户通过您的网页功能找到自己的方式。对于具有大量元素的大型Web应用程序，这可能非常有用。

您可以突出显示单个元素并为其添加说明，或者用手抓住用户向其展示所有可用功能。使用此库，还可以更改突出显示区域的形状或对提示文本使用自己的样式。以下是其主要功能列表：

免费使用
自动聚焦和突出显示与提示相关的区域
高亮区域的不同形状
提示延迟属性
恢复中断的提示序列的可能性
跨浏览器支持
支持Android，iOS和Windows触摸屏

考虑到这一点，现在是时候编写一些代码来查看该库的运行了。

创建提示

我已经创建了一个很小的搜索引擎模型作为示例：

涡轮搜索

它包含标题，搜索字段和“选项”按钮，该按钮有助于在不同类型的搜索结果之间切换。网站的开发非常简单，它也不在本教程的讨论范围之内，因此我将不对其进行详细描述。但是，您可以根据需要检查源代码。

有了基本网页后，就可以开始使用EnjoyHint。要执行的第一步是使用Bower安装它：

bower install enjoyhint

或者，您可以从其GitHub存储库下载它。

下载并解压缩该程序包后，可以将其包含到HTML文件中。如前所述，该库依赖于jQuery，因此您必须在EnjoyHint之前包括后者。如果您不想在本地托管jQuery，则可以使用jQuery CDN ，如下所示：

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="enjoyhint/enjoyhint.min.js"></script>
<link href="enjoyhint/enjoyhint.css" rel="stylesheet"/>

EnjoyHint初始化

要初始化一个新的EnjoyHint实例，您可以编写：

var enjoyhint_instance = new EnjoyHint({});

现在，您可以描述您的第一个提示：

var enjoyhint_script_steps = [{
    /*hint code goes here*/
}];

或者，如果您想创建一系列提示：

var enjoyhint_script_steps = [{
    /*first hint code*/
}, {
    /*second hint code*/
}];

下一步是将提示的描述设置为实例配置：

enjoyhint_instance.set(enjoyhint_script_steps);

一切准备就绪，我们现在可以运行脚本：

enjoyhint_instance.run();

提示定义

作为我们的第一个示例，让我们添加一个新提示来描述“选项”按钮的用途：

'click .btn' : 'This button allows you to switch between the search results'

结果如下所示：

第一提示

click是将运行下一个提示的事件。在我们的案例中，事件是单击按钮。 .btn是我们要突出显示的元素的选择器（在我们的示例中是btn类的“选项”按钮）。然后，在冒号之后，我们应该定义提示的文本。

由于脚本中只有一个提示，因此当我们单击“选项”按钮或“跳过”按钮时，该提示将消失。默认情况下会显示“跳过”按钮。 EnjoyHint允许您为其内置元素应用自己的CSS类和名称，如果您要描述页面的单个元素，这可能会很有帮助。

您可以使用skipButton属性更改按钮的标签：

'click .btn' : /*hint text*/,
'skipButton' : {className: "mySkip", text: "Got It!"}

此代码还向其中添加了mySkip CSS类。例如，使用以下CSS代码：

.mySkip {
    color: white;
    border-color: white;
}

您可以得到以下结果：

得到它了

您甚至可以通过指定showSkip: false来删除“跳过”按钮。

现在您知道了如何创建单个提示，是时候创建几个提示了。他们将一个接一个地创建指南。

提示序列

为了开始创建提示序列，我们应该从头开始重写所有提示定义代码。

提示一个。 “下一个”事件

第一个提示将指定如下：

'next .navbar-brand' : /*hint text*/

这次，我使用了next事件，结果如下：

指导第一步

如您所见，我们的网站标题现已突出显示。现在，我们有两个按钮。下一步按钮将运行下一个提示，而跳过一个将中止脚本。您可以像在上一个示例中使用“跳过”按钮一样来更改“下一步”按钮：

'nextButton' : {className: "myNext", text: "Sure"},
'skipButton' : {className: "mySkip", text: "Nope!"}

这些按钮现在看起来像这样：

重新定义下一个按钮

提示二。 “关键”事件

下一个提示将告诉用户如何使用搜索字段。为此，我们将使用key事件。在按下某个键后，它将运行下一个提示：

'key #mySearch' : /*hint text*/,
'keyCode' : 13

请注意，这次我们使用ID作为选择器。 keyCode属性定义触发下一个提示的按钮的代码。在这种情况下，它等于Enter按钮。

让我们检查一下它的外观：

关键属性

单击“输入”按钮后，将调用下一个提示。

提示三和四。改变形状

在第三步中，我们将为选项按钮使用先前定义的提示（有关详细信息，请参见“提示定义”部分）：

'click .btn' : /*hint definition*/

当您单击此按钮时，第四个提示将运行。现在，我们将使用shape属性更改默认的突出显示形状：

'next .about' : /*hint definition*/,
'shape': 'circle'

此代码将突出显示“关于”部分，如下所示：

圆圈高光

最后一步

如果默认圆的大小不足以容纳您，则可以使用radius属性更改其大小。现在，我们将使用此功能创建最后的提示。由于这是指南的最后一步，因此我们不再需要“跳过”按钮，可以使用showSkip属性将其禁用。

因此，这是我的最终提示代码：

'next .contact' : 'Your feedback will be appreciated',
'shape': 'circle',
'radius': 70,
'showSkip' : false,
'nextButton' : {className: "myNext", text: "Got it!"}

结果：

最后提示

如您所见，这次突出显示区域的半径更大。

回呼

我要讨论的最后一个功能是执行回调函数的可能性。 EnjoyHint为您提供onStart和onEnd属性以运行回调。第一个在第一个提示开始之前执行，第二个在最后一个提示完成之后执行。以下是使用示例：

var enjoyhint_instance = new EnjoyHint({
    onStart: function () {
        // runs before the first hint
    },
    onEnd: function () {
        // runs after the last hint
    }
});

还有另一个属性可以运行称为onBeforeStart的回调。在确定提示开始之前触发此事件：

var enjoyhint_script_steps = [{
    /* hint description */
    onBeforeStart: function () {
        // runs before the hint
    }
}];

结论

EnjoyHint允许您通过向您的网站逐步添加提示来创建逐步指南。该工具为您提供了其他有用的功能，例如自定义事件的创建。您可以在提示的描述中使用HTML，这使您可以根据需要更改其外观。

如果您想查看源代码，可以访问GitHub页面。这是演示页面。

From: https://www.sitepoint.com/hints-creation-with-enjoyhint/