8

機能/ガイドツアー機能を実装するためのjavascriptツール(おそらくjqueryプラグイン)を見たことがありますが、残念ながらページをブックマークしていません。

オーバーレイを使用し、おそらくid属性に基づいてドキュメント要素に焦点を合わせました。

ここに画像の説明を入力してください

Joyrideまたは私がグーグルで見つけたものはこれをサポートしていません。

何か気になっていることはありますか?

4

4 に答える 4

5

Sideshowは、Webアプリケーションやサイトのインタラクティブツアーを作成するためのモダンで強力なライブラリです。

Sideshowは、ユーザーをガイドするだけでなく、ユーザーと対話することもできます。

  • 画面の残りの部分をマスクすることにより、各ステップ(フォーム、div、画像、フィールドなど)で話している部分を強調表示します(Sideshowはこれにz-indexアプローチを使用しません、そのマスクは要素の後ろに配置されていませんが、実際には要素を囲んでいます)。
  • ユーザーの行動と画面の状態を監視します。
  • チュートリアルのスマートステップを作成します。これは、いくつかの条件が満たされると自動的に進行します
  • チュートリアル間の関係を作成します。このようにして、ユーザーがチュートリアルを終了すると、関連するツアーのリストが表示されます。
  • ステップの説明をリッチフォーマットするには、Markdownを使用します
  • イベント(例:beforeStep / afterStep、beforeWizardStarts / afterWizardEnds)を使用して、準備などを実行します
  • ユーザーが表示している画面に応じてコンテキストチュートリアルを表示します。各チュートリアルには、その画面に適格かどうかを確認するための独自の条件があります。

そして他の強力な機能!

于 2014-01-23T02:54:29.760 に答える
3

Intro.jsは、プロジェクトのステップバイステップガイドを備えたWebサイトと機能のより良い紹介です。

特徴:

  • キーボード+マウスナビゲーション
  • Fast&Small
  • ブラウザの互換性
  • フリー&オープンソース
于 2014-12-21T12:15:33.333 に答える
0

jquerypowertour.comは、要素などを強調表示できます。使ったことはありませんが、かなりパワフルなようです。

しかし、JoyRideGuiders-JSのようなものは、jQuery蛍光ペンプラグインと組み合わせて実行するように簡単に変更できると思います-デモ

于 2013-01-06T15:59:59.763 に答える
0

この時点で、私はおそらくこの目的のためにシェパードを選ぶでしょう。(ただし、イントロとサイドショーは次点者になります。)

コードはすっきりしていて、置き換えが簡単なデフォルトのスタイルがあり、アクセス可能にしてキーボードをサポートするように注意を払っています。また、いくつかのフレームワークと統合されています。

  • React
  • Angular
  • 残り火
  • Vue
  • レール(アブラハム経由)
  • おそらく私が知らない他の人

もちろん、バニラJSまたはESモジュールでも動作します。

また、jQueryは必要ありません。jQueryを必要とするものはすべて2005年のようです。

于 2021-01-15T01:58:01.450 に答える