2

bootstrap-tourプラグイン ( http://bootstraptour.com/ ) を使用して、最後のステップを除く各ステップのデフォルトの [ツアーの終了] ボタンを無効または非表示にしたいと考えています。

ステップ テンプレートを変更してボタンを完全に削除しようとEnd Tourしましたが、最後のステップで有効にするにはどうすればよいですか?

4

2 に答える 2

3

  1. テンプレート パラメーターを使用して、終了ボタンにクラスを追加し.btn-endます。

    var tour = new Tour({
    template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-default' data-role='prev'>« Prev</button><button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default btn-end' data-role='end'>End tour</button></nav></div>"
});

  2. CSS を使用して、デフォルトで非表示に設定.btn-endします。 .btn-end { display: none; }

  3. #step-xCSS の IDを使用して、最後のステップをターゲットにします。最後のステップ ID は、ステップ数から 1 を引いたものになります (カウントは 0 から始まるため)。5 つのステップがある場合、Id は#step-4 (5 - 1 = 4 ) になります。
    #step-4 .btn-end { display: block; }

ここで実際の例を参照してください: http://jsfiddle.net/Zfu5f/2/

于 2013-09-12T15:30:07.573 に答える
3

アクセルの答えに代わるものは、データ部分を CSS セレクターとして使用することです。

  1. End ボタンをデフォルトで非表示に設定します。.popover-navigation [data-role="end"] { display: none; }
  2. 次を使用して最後のステップをターゲットにします。#step-4 .popover-navigation [data-role="end"] { display: block; }

これにより、手順の量が短縮され、カスタム ポップオーバーが別の場所で定義されている場合、そのテンプレートを再コピーする必要がなくなります。

于 2014-06-13T00:11:09.507 に答える