用牧羊人介绍您的应用程序

钥匙要点

由HubSpot开发的Shepherd是一个简单的JavaScript库，可帮助指导用户通过应用程序巡回赛，从而向用户引入应用程序的过程更有效，更互动。
• 库是开源的，没有任何依赖性，使其成为开发人员的首选选择。它允许创建步骤，每个步骤都有自己的文本，位置和动作，并为自定义提供了广泛的API。 尽管Shepherd具有很有希望的功能，但浏览器支持有限，特别是IE 9。但是，对于开发人员而言，它可能是不打算支持旧浏览器的有价值工具。它还提供了一个简单的API和清晰的文档，使所有技能水平的开发人员都可以使用。

作为Web开发人员，您可能会意识到，创建应用程序通常是简单的部分 - 将其呈现给世界本身就是一项艰巨的任务。有些人更喜欢创建演示文稿，其他一些则制作视频。如果您有一些帮助您浏览用户的应用程序，那会不会很好？ 通过HubSpot输入Shepherd。 Shepherd是一个简单的JavaScript库，可帮助您指导用户访问应用程序。它可以帮助您将用户引导到正确的位置，就像牧羊人照顾他的羊群一样。 为此，还有其他库，但是我更喜欢牧羊人的原因是它没有任何依赖性。它还支持Coffeescript，尽管我们只会在这里探索JavaScript。

入门

牧羊人是开源的，可以在GitHub上找到其代码。 Shepherd的演示也可以在Hubspot上获得。让我们开始。 对于不耐烦的是，这是开始的基本代码。这将创建您的应用程序一步之旅。这将对话框绑定到由选择器#id_selector匹配的元素底部。

<span>var tour = new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});
</span>
tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

打破牧羊人

现在，您已经运行了简单的代码，让我们将步骤分解为我们能理解的部分。

包括

您需要包含单个牧羊人JavaScript文件。 Shepherd还带有CSS文件中包含的默认主题。

<span><span><span><link</span> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script</span> type<span>="text/javascript"</span> src<span>="./shepherd.min.js"</span>></span><span><span></script</span>></span></span>

初始化Shepherd

以下代码示例显示了如何通过JavaScript创建巡回演出。由于您会尽快在旅行中添加步骤，因此初始化中的默认选项将这些选项添加到所有步骤中，除非您覆盖它们：

tour <span>= new Shepherd<span>.Tour</span>({
</span>  <span>defaults: {
</span>    <span>classes: 'shepherd-theme-arrows',
</span>    <span>scrollTo: true
</span>  <span>}
</span><span>});</span>

创建步骤

让我们看看“入门”代码。这是启动巡回演出的一步的代码：

tour<span>.addStep('myStep', {
</span>  <span>title: 'Hi there!',
</span>  <span>text: 'This would help you get started with this application!',
</span>  <span>attachTo: '#id_selector bottom',
</span>  <span>classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>});</span>

如果您打算有多个步骤，则可以附加一个额外的按钮。如果您有两个步骤，则以下是如何使用按钮的示例：

tour<span>.addStep('step1', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>}, {
</span>      <span>text: 'Next',
</span>      <span>action: tour.next,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}
</span>  <span>]
</span><span>});
</span>
tour<span>.addStep('step2', {
</span>  <span>...
</span>  <span>buttons: [
</span>    <span>{
</span>      <span>text: 'Back',
</span>      <span>action: tour.back,
</span>      <span>classes: 'shepherd-button-example-primary'
</span>    <span>}, {
</span>      <span>text: 'Exit',
</span>      <span>classes: 'shepherd-button-secondary',
</span>      <span>action: function() {
</span>        <span>return tour.hide();
</span>      <span>}
</span>    <span>} 
</span>  <span>]
</span><span>});</span>

开始旅行

设置游览后，剩下的就是开始！

tour<span>.start();</span>

api

Shepherd提供了广泛的API以及解释其行为的文档。在这里，我们将接听一些有用的电话。

旅行实例

首先，创建游览如下所示。

myTour <span>= new Shepherd<span>.Tour</span>({ options })</span>

现在，我们将看到如何使用此实例。步骤和默认值是Tour实例的选项。它的方法如下所述。

• > addStep（id，选项） - 如上所述，通过为其分配ID，然后添加诸如文本或按钮之类的选项来创建一个步骤，后来将其描述。
>
• > getById（id） - 此方法用于通过其ID选择任何特定步骤。>
show（id） - 通过ID显示特定步骤。
> ON（活动，处理程序） - 将事件绑定到您的旅行中。这类似于jQuery的bind（）方法。
• >
off（事件，处理程序） - 解开事件。
• >

Tour实例也有诸如开始，完成，展示和隐藏之类的活动。

>步骤

尽管我们以前添加了步骤，但让我们仔细看一下。以下列表描述了您可以定义的选项。

• 标题 - 您可能会或可能不会应用标题。
• >文本 - 要在步骤中显示的文本。>
附件 - 这有两个部分：要连接步骤的元素的选择器，以及将步骤附加到（即#id_selector底部）的位置。> 类 - 额外的类要添加到对话框中。这取决于您正在使用的主题。
>按钮 - 要显示的按钮列表。每个按钮都有一个文本，要添加的其他类，以及单击按钮时要执行的操作。
有多种方法可用于使您的任务更轻松。这是一些有用的：

show（） - 显示一个步骤。
• >
hide（） - 隐藏一个步骤。
• cancel（） - 隐藏步骤并取消游览。
• 完整（） - 隐藏步骤并完成巡回演出。
• destroy（） - 摧毁一个步骤。
• on（事件，处理程序） - 绑定事件。
>
• on（事件，处理程序） - 解开事件。
>
结论

尽管牧羊人看起来很有希望，但我注意到的一个打ic是IE 9的浏览器支持。但是，如果您不打算支持旧浏览器，请尝试一下。 您可以根据本文在GitHub上的代码找到实时演示。可以进一步修改演示。您可以尝试使用绑定事件处理程序，以获取Shepherd导航的箭头键。您也可以进行CSS类，并将它们附加到不同的元素上，以将焦点从一个元素转移到另一个元素。

经常询问有关应用程序的问题（常见问题解答）

什么是应用程序Shepherd，它与Shepherd.js？

>应用程序Shepherd有何不同之处。它与shepherd.js不同，因为它设计为更易于用户友好，更易于实现。虽然Shepherd.js是一种强大的工具，但它需要对JavaScript有有效使用的更深入了解。另一方面，Application Shepherd设计为所有技能级别的开发人员，具有简单的API和清晰的文档。

>

>如何安装应用程序Shepherd？很简单。您可以使用命令npm安装应用程序 - 示威者通过NPM安装它。安装后，您可以使用从“应用程序 - shepherd”中导入shepherd将其导入项目。

>我可以自定义使用应用程序shepherd创建的指南的外观和感觉吗？牧羊人允许广泛的自定义。您可以更改颜色，大小，位置和更多指南元素。这使您可以创建与应用程序外观和感觉相匹配的指南，从而提供无缝的用户体验。

>应用程序如何处理复合物，多步导指南？您可以创建多步指南，以指导用户完成一系列任务。每个步骤都可以具有自己的文本，位置和操作，使您可以创建详细的，交互式指南。

我可以绝对可以将应用程序shepherd与我的现有代码库一起使用？ Application Shepherd旨在易于与现有代码库集成。这是一个独立的库，因此不需要任何特定的框架或技术才能使用。您可以简单地将其导入项目并开始创建指南。

>应用程序Shepherd与其他用户指南库相比如何？

>应用程序Shepherd脱颖而出，因为其易于使用和灵活性。尽管其他图书馆可能需要更多的技术知识才能有效使用，但Application Shepherd设计为所有技能水平的开发人员都可以使用。它还提供了广泛的自定义选项，使您能够创建与应用程序外观和感觉相匹配的指南。

应用程序shepherd移动友好型？

是的，应用程序Shepherd旨在工作良好在台式机和移动设备上。指南会自动调整以适合屏幕尺寸，确保所有设备上都有良好的用户体验。

我可以使用Application Shepherd攻入新用户吗？入职新用户。您可以创建详细的，逐步的指南，使新用户穿过您的应用程序，从而帮助他们了解如何有效地使用它。 🎜>更新或修改指南很容易使用Shepherd。您可以简单地更改代码指南步骤的属性，然后将反映在指南中。这使您可以随着应用程序的发展来保持最新信息。

在没有专用的社区或支持的情况下，是否有社区或支持网络？应用程序网络Shepherd，您可以在一般JavaScript和Web开发论坛和社区上找到帮助和建议。应用程序Shepherd的文档也是学习如何有效使用图书馆的重要资源。

>

以上是用牧羊人介绍您的应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！