javascript - Disablehide "End tour" button in Bootstrap Tour - Stack Overflow

admin管理员组

文章数量:1406177

Using the bootstrap-tour plug-in (/), I want to disable or hide the default 'End Tour' button on each step except for the very last step.

I tried modifying the step template to get rid of End Tour button pletely, but how do I activate it on the very last step?

Using the bootstrap-tour plug-in (http://bootstraptour./), I want to disable or hide the default 'End Tour' button on each step except for the very last step.

I tried modifying the step template to get rid of End Tour button pletely, but how do I activate it on the very last step?

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow asked Sep 12, 2013 at 15:02 MListerMLister 10.4k1818 gold badges6767 silver badges9393 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

1. Add the class .btn-end to your end button using the template parameter:

   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. Set .btn-end to be hidden by default, using CSS: .btn-end { display: none; }

3. Target the last step, using the #step-x ID in CSS. The last step ID will be the number of steps, minus 1 (as the count starts at 0). If you have 5 steps, the Id will be #step-4 (5 - 1 = 4).
   #step-4 .btn-end { display: block; }

See a working example here: http://jsfiddle/Zfu5f/2/

An alternative to Axel's answer would be to use the data part as the CSS selector:

1. Set the End button to be hidden by default: .popover-navigation [data-role="end"] { display: none; }
2. Target the last step using: #step-4 .popover-navigation [data-role="end"] { display: block; }

This shortens the amount of steps and if you have a custom popover defined somewhere else, this prevents you from having to recopy that template.

本文标签： javascriptDisablehide quotEnd tourquot button in Bootstrap TourStack Overflow