Shepherdでアプリケーションを紹介します-jsチュートリアル-php.cn

Introducing Your Application with Shepherd

Shepherdでアプリケーションを紹介します

キーテイクアウト

Shepherdは、アプリケーションツアーを通じてユーザーをガイドし、ユーザーにアプリケーションをより効率的でインタラクティブに導入するプロセスを提供するシンプルなJavaScriptライブラリです。
その有望な機能にもかかわらず、Shepherdはブラウザのサポートが限られています。特にIE 9用です。ただし、古いブラウザーをサポートすることを計画していない開発者にとって貴重なツールになる可能性があります。また、シンプルなAPIと明確なドキュメントを提供し、あらゆるスキルレベルの開発者がアクセスできるようにします。

Web開発者として、あなたはおそらくアプリケーションを作成することは多くの場合簡単な部分であることに気付くでしょう。世界にそれを提示することはそれ自体が困難な仕事です。プレゼンテーションを作成することを好む人もいれば、ビデオを作る人もいます。あなたがあなたのユーザーをアプリを介して歩くのを助ける何かを持っていたらいいのではないでしょうか？ HubspotでShepherdを入力してください。 Shepherdは、アプリケーションのツアーを通じてユーザーをガイドするのに役立つシンプルなJavaScriptライブラリです。羊飼いが彼の羊の群れの世話をするように、ユーザーを適切な場所に向けるのに役立ちます。この目的のために他のライブラリもありますが、私が羊飼いを好む理由は、依存関係がないことです。また、Coffeescriptのサポートもありますが、ここではJavaScriptのみを探索します。

始めましょう

Shepherdはオープンソースであり、そのコードは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>

ログイン後にコピー

複数の手順を立てることを計画している場合は、追加のボタンを添付できます。 2つの手順がある場合は、ボタンの使用方法の例です。

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>

ログイン後にコピー

さて、このインスタンスでどのように協力できるかを確認します。手順とデフォルトは、ツアーインスタンスのオプションです。その方法については、以下に説明します。

AddStep（ID、Options） - 上で見たように、IDを割り当てることによりステップが作成され、テキストやボタンなどのオプションを追加します。
show（id） - 特定のステップを表示します
オフ（イベント、ハンドラー） - イベントを解除します。

ツアーインスタンスには、Start、Complete、Show、Hideなどのイベントもあります。

ステップ

以前に手順を追加しましたが、詳しく見てみましょう。次のリストでは、定義できるオプションについて説明します。

タイトル - タイトルを適用する場合と適用できない場合があります
アタッチト - これには2つの部分があります。ステップを接続する要素のセレクターと、ステップを接続する位置（つまり#ID_SELECTORボトム）。
クラス - ダイアログに追加する追加のクラス。これは、使用しているテーマに依存します
タスクを簡単にするために使用できるさまざまな方法があります。これが便利なもののいくつかです：
show（） - ステップを表示します。

hide（） - ステップを非表示。

cancel（） - ステップを非表示にして、ツアーをキャンセルします
Destroy（） - ステップを破壊します。
on（event、handler） - イベントにバインドします。
on（event、handler） - イベントのバインドを解除します
結論
アプリケーションシェパード

Application Shepherdは、アプリを導くJavaScriptライブラリです。 Shepherd.jsとは異なり、よりユーザーフレンドリーで実装が簡単になるように設計されています。 Shepherd.jsは強力なツールですが、効果的に使用するにはJavaScriptをより深く理解する必要があります。一方、アプリケーションシェパードは、すべてのスキルレベルの開発者が簡単なAPIとクリアドキュメントを使用してアクセスできるように設計されています。簡単です。 Command NPM Install Application-Shepherdを使用して、NPM経由でインストールできます。インストールしたら、「Application-Shepherd」からImport Shepherdを使用してプロジェクトにインポートできます。 Shepherdは、広範なカスタマイズを可能にします。色、サイズ、位置、およびガイド要素の多くを変更できます。これにより、アプリのルックアンドフィールに合ったガイドを作成し、シームレスなユーザーエクスペリエンスを提供できます。

アプリケーションシェパードは、複雑でマルチステップガイドをどのように処理しますか？

アプリケーションシェパードは、複雑なガイドを簡単に処理するように設計されています。一連のタスクをユーザーに導くマルチステップガイドを作成できます。各ステップには、独自のテキスト、位置、およびアクションがあり、詳細でインタラクティブなガイドを作成できます。アプリケーションシェパードは、既存のコードベースと簡単に統合できるように設計されています。スタンドアロンライブラリであるため、使用するために特定のフレームワークやテクノロジーは必要ありません。プロジェクトに単純にインポートしてガイドの作成を開始できます。