次に何をするかを教えられるチュートリアルをjQueryで作る方法


20101228-01

サイト内で次にどのボタンを押したら良いか、どう行動したら良いかをチュートリアル形式で表示できるjQueryの作り方を紹介している「Website Tour with jQuery」が便利そうだったのでご紹介。

IT/WEB業界への転職なら求人サイトGreen

ソーシャルアプリなどではゲームを始める前にチュートリアルを表示する事が多いのですが、それをjQueryでやってしまおうというDEMOになります。

デモ

htmlでのコンテンツの方が更新作業が楽で良いですよね。

設定方法ですが、強調表示させる要素にクラス属性を追加して行く事で表示を制御しているようです。

スクリプトが実行されると、「次へ」「前へ」のリンクが表示されるようになり、ユーザーは自分で理解しながら進む事ができます。

説明文を表示するツールチップは色、位置、表示している時間をオプションでカスタマイズ可能になっています。

アプリやサイトを立ち上げた際にチュートリアルが必要な場合の参考にしてみてください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly