Bootstro.jsのサンプル
bootstroクラスを設定した要素を1つずつハイライトしていきます。
サンプル1ボタンをクリックするとチュートリアルが起動します。
サンプル1
ハイライトする要素の順番は自分で決められます。
サンプル2ボタンをクリックするとチュートリアルが起動します。
サンプル2
step1
最初のステップを設定したコンテンツです
step2
2番目のステップを設定したコンテンツです
step3
3番目のステップを設定したコンテンツです
step3
ステップ表示したい要素にbootstroクラスを設定
step1
ステップ表示中に、カーソルキーでも動かせる。
escキーで終了出来る。
step2
オーバーレイの表示位置を変えられる
bootstro.start();を使うことでチュートリアルが起動します。クリックイベントと合わせて使います。
escキー、背景クリックの無効も出来る。bootstro.start('.bootstro', {stopOnBackdropClick : false, stopOnEsc:false});
サンプル3 escキー、背景クリックで終了を無効にするサンプル。「Ok I got it,get back to the site」を押すまで終わらない。
サンプル4「Next」ボタン、「Prev」ボタンを消すサンプル。カーソルキーで移動