用牧羊人介紹您的應用程序

態

鑰匙要點

由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> type<span>="text/css"</span> rel<span>="stylesheet"</span> href<span>="css/shepherd-theme-arrows.css"</span> /></span>
</span><span><span><span><script> type<span >="text/javascript"</script></span> src<span>="./shepherd.min.js"</span>></span><span><span></span>></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中文網其他相關文章！