Einführung Ihrer Bewerbung mit Shepherd

Key Takeaways

• Shepherd, entwickelt von HubSpot, ist eine einfache JavaScript -Bibliothek, die die Benutzer durch eine Anwendungsreise hilft, wodurch Benutzer eine Anwendung effizienter und interaktiver werden.
.
Die Bibliothek ist Open-Source und hat keine Abhängigkeiten, was sie zu einer bevorzugten Wahl für Entwickler macht. Es ermöglicht die Erstellung von Schritten mit jeweils eigenem Text, Position und Aktionen und bietet eine umfangreiche API für die Anpassung.
Trotz seiner vielversprechenden Funktionen hat Shepherd eine begrenzte Browserunterstützung, insbesondere für den IE 9. Es kann jedoch ein wertvolles Instrument für Entwickler sein, die ältere Browser unterstützen. Es bietet auch eine einfache API und eine klare Dokumentation, die es Entwicklern aller Fähigkeiten zugänglich macht.

Als Webentwickler erkennen Sie wahrscheinlich, dass das Erstellen einer Anwendung oft der einfache Teil ist - sie der Welt zu präsentieren, ist eine bergabere Aufgabe für sich. Einige bevorzugen es, Präsentationen zu erstellen, andere machen Videos. Wäre es nicht schön, wenn Sie etwas haben, um Ihre Benutzer durch Ihre App zu führen? Geben Sie Shepherd mit HubSpot ein. Shepherd ist eine einfache JavaScript -Bibliothek, mit der Sie Ihre Benutzer durch eine Tour durch Ihre Anwendung führen können. Es hilft Ihnen, Ihre Benutzer an den richtigen Ort zu lenken, genau wie ein Hirte sich um seine Schafherde kümmert. Zu diesem Zweck gibt es auch andere Bibliotheken, aber der Grund, warum ich Shepherd bevorzuge, ist, dass es keine Abhängigkeiten hat. Es unterstützt auch CoffeeScript, obwohl wir hier nur JavaScript untersuchen werden.

Erste Schritte

Shepherd ist Open Source und sein Code kann auf GitHub gefunden werden. Die Demo von Shepherd ist auch auf Hubspot erhältlich. Lassen Sie uns anfangen. Für den ungeduldigen Code zum Einstieg. Dies schafft eine einstufige Tour durch Ihre Anwendung. Dies bindet den Dialog an die Unterseite des vom Selektors #ID_SELECTER übereinstimmenden Elements.

<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>

Shepherd nach unten brechen

Nachdem Sie den einfachen Code ausgeführt haben, lassen Sie uns die Schritte in Stücke unterteilen, die wir verstehen können.

enthält

Sie müssen die einzelne Shepherd JavaScript -Datei einfügen. Shepherd wird auch mit einem Standardthema geliefert, das in einer CSS -Datei enthalten ist.

<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>

initialisieren Sie Shepherd

Das folgende Code -Beispiel zeigt, wie eine Tour über JavaScript erstellt wird. Da Sie in Kürze Schritte zu Ihrer Tour hinzufügen, fügt die Standardoption in der Initialisierung alle Ihre Schritte hinzu, es sei denn, Sie überschreiben sie:

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>

Schritte erstellen

Schauen wir uns den Code "Erste Schritte" erneut an. Hier ist der Code, der einen einzelnen Schritt der Tour initiiert:

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>

Sie können eine zusätzliche Schaltfläche anhängen, wenn Sie mehrere Schritte haben möchten. Das Folgende ist ein Beispiel dafür, wie Sie Schaltflächen verwenden, wenn Sie zwei Schritte haben:

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>

starten Sie die Tour

Nach dem Aufstellen der Tour ist nur noch übrig geblieben, sie zu beginnen!

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

Die API

Shepherd bietet eine umfangreiche API sowie eine Dokumentation, die ihr Verhalten erklärt. Hier werden wir einige nützliche Anrufe durchlaufen.

Tourinstanzen

Erstellen Sie zunächst die Tour wie unten gezeigt.

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

Jetzt werden wir sehen, wie wir mit dieser Instanz arbeiten können. Schritte und Standardeinstellungen sind die Optionen der Tour -Instanz. Seine Methoden werden nachstehend beschrieben.

• addStep (ID, Optionen) - Wie wir oben gesehen haben, wird ein Schritt erstellt, indem eine ID zugewiesen und dann Optionen wie Text oder Schaltflächen hinzugefügt werden, die später beschrieben werden.
• getbyId (ID) - Diese Methode wird verwendet, um einen bestimmten Schritt nach seiner ID auszuwählen.
• show (id) - Zeigen Sie einen bestimmten Schritt nach ID.
• on (Event, Handler) - Bindet eine Veranstaltung an Ihre Tour. Dies ähnelt der Bind () -Methode von JQuery.
• Aus (Ereignis, Handler) - Enträttet ein Ereignis.

Eine Tour -Instanz hat auch Veranstaltungen wie Start, Complete, Show und Hide.

Schritte

Obwohl wir zuvor Schritte hinzugefügt haben, schauen wir uns genauer an. Die folgende Liste beschreibt die Optionen, die Sie definieren können.

• Titel - Sie können einen Titel anwenden oder nicht.
• text - Der Text, der im Schritt angezeigt wird.
• Attachto - Dies enthält zwei Teile: den Selektor des Elements, in dem der Schritt angehängt werden soll, und die Position, um den Schritt an zu anhängen (d. H. #id_selector unten).
• Klassen - zusätzliche Klassen, die Sie Ihrem Dialogfeld hinzufügen können. Dies hängt von dem Thema ab, das Sie verwenden.
• Schaltflächen - Die Liste der zu angezeigten Schaltflächen. Jede Schaltfläche enthält einen Text, zusätzliche Klassen, die hinzugefügt werden müssen, und eine Aktion, die beim Klicken auf die Schaltfläche durchgeführt wird.

Es gibt verschiedene Methoden, mit denen Sie Ihre Aufgabe erleichtern können. Hier sind einige der nützlichen:

• show () - einen Schritt zeigen.
• hide () - einen Schritt ausblenden.
• Cancel () - Schritt ausblenden und die Tour abbrechen.
• complete () - Schritt ausblenden und die Tour abschließen.
• zerstören () - zerstört einen Schritt.
• on (Ereignis, Handler) - bindet ein Ereignis.
• on (Ereignis, Handler) - Enträttet ein Ereignis.

Schlussfolgerung

Obwohl Shepherd ziemlich vielversprechend aussieht, ist ein Schluckauf, den ich bemerkt habe, die Browserunterstützung von IE 9. Wenn Sie jedoch nicht vorhaben, alte Browser zu unterstützen, probieren Sie es aus. Sie finden eine Live -Demo, die auf dem Code dieses Artikels auf GitHub basiert. Die Demo kann weiter geändert werden. Sie können versuchen, Ereignishandler für die Pfeiltasten an die Shepherd -Navigation zu verbinden. Sie können auch CSS -Klassen vornehmen und an verschiedenen Elementen anhängen, um den Fokus von einem Element auf ein anderes zu verlagern.

häufig gestellte Fragen (FAQs) zur Anwendung Shepherd

Was ist Anwendung Shepherd und wie unterscheidet es sich von Shepherd.js? Es unterscheidet sich von Shepherd.js darin, dass es benutzerfreundlicher und einfacher zu implementieren ist. Während Shepherd.js ein leistungsstarkes Werkzeug ist, erfordert es ein tieferes Verständnis von JavaScript, um effektiv zu verwenden. Anwendung Shepherd hingegen ist so konzipiert, dass sie Entwicklern aller Fähigkeiten mit einfacher API und klarer Dokumentation zugänglich sind. ist einfach. Sie können es über NPM über den Befehl npm installieren, der Anwendungsummeter installieren. Nach der Installation können Sie es in Ihr Projekt über importieren, indem Sie Shepherd von 'Application-Shepherd' importieren. Shepherd ermöglicht eine umfassende Anpassung. Sie können die Farbe, Größe, Position und mehr der Führungselemente ändern. Auf diese Weise können Sie Leitfäden erstellen, die dem Erscheinungsbild Ihrer App entsprechen und ein nahtloses Benutzererlebnis bieten.

Wie handelt es sich bei der Anwendung Shepherd mit komplexen, mehrstufigen Guides? Sie können mehrstufige Guides erstellen, die Benutzer durch eine Reihe von Aufgaben führen. Jeder Schritt kann seinen eigenen Text, seine eigene Position und Aktionen haben, sodass Sie detaillierte, interaktive Anleitungen erstellen können. Application Shepherd ist so konzipiert, dass sie sich einfach in vorhandene Codebasen integrieren kann. Es handelt sich um eine eigenständige Bibliothek, sodass kein spezifischer Rahmen oder Technologie verwendet werden muss. Sie können es einfach in Ihr Projekt importieren und Leitfäden erstellen. Während andere Bibliotheken möglicherweise mehr technisches Wissen erfordern, um effektiv zu nutzen, ist Application Shepherd so konzipiert, dass es Entwicklern aller Fähigkeiten zugänglich ist. Es bietet auch umfangreiche Anpassungsoptionen, mit der Sie Anleitungen erstellen können, die das Erscheinungsbild Ihrer App entsprechen. Sowohl auf Desktop- als auch auf mobilen Geräten. Die Anleitungen passen automatisch an die Bildschirmgröße an und sorgen für eine großartige Benutzererfahrung auf allen Geräten. Neue Benutzer auf Bord. Sie können detaillierte, Schritt-für-Schritt-Anleitungen erstellen, die neue Benutzer durch Ihre App führen und ihnen helfen, zu verstehen, wie sie sie effektiv verwenden können. 🎜> Die Aktualisierung oder Änderung von Leitfäden ist mit dem Anwendungs ​​-Shepherd einfach. Sie können einfach die Eigenschaften der Leitfadenschritte in Ihrem Code ändern, und die Änderungen werden in der Anleitung angezeigt. Auf diese Weise können Sie Ihre Anleitungen auf dem neuesten Stand halten, während sich Ihre App weiterentwickelt. Netzwerk für Anwendung Shepherd finden Sie Hilfe und Ratschläge zu allgemeinen JavaScript- und Webentwicklungsforen und -gemeinschaften. Die Dokumentation für die Anwendung Shepherd ist auch eine großartige Ressource, um zu lernen, wie die Bibliothek effektiv verwendet wird.

Das obige ist der detaillierte Inhalt vonEinführung Ihrer Bewerbung mit Shepherd. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!