intro.js-Webページのチュートリアル



この小さなライブラリにより、Webサイトまたはアプリケーションの段階的な紹介を簡単に作成できます。 ページの必要な要素に、それぞれdata-intro属性とdata-step属性を説明とステップ番号とともに追加するだけで十分です。 このように:

 <a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a> 

プレゼンテーションを開始するには、 introJs().start()関数を呼び出す必要があります。 各パートの要素に異なるクラスを割り当て、introJを特定のクラスに制限することにより、イントロダクションをパートに分割できます。 たとえば、プレゼンテーションの最初の部分のすべての要素に.introduction-firstクラスと2番目の.introduction-secondクラスがある場合、最初に最初の部分のみを呼び出し、別の場所で、たとえばユーザーが何らかのアクションを実行した後、2番目を呼び出すことができます:

 introJs(".introduction-first").start(); ... introJs(".introduction-second").start(); 

要素は、 data-intro属性で指定されたコメントで交互に強調表示されます。 キーボードの矢印またはマウスのクリックで、それらの間を移動できます。 プロジェクトのウェブサイトにはライブデモがあります。

このライブラリは、数日前にMITライセンスの下でGithubに公開されました 。 著者は、近い将来、さまざまなブラウザとの互換性を改善し、現在の要素に関するツールチップを配置する機能を追加する予定です。 Ruby on Railsで使用するための対応するgemがすでにあり、Yiiのウィジェットもあります

Source: https://habr.com/ru/post/J173327/


All Articles