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のウィジェットもあります 。