Skip to content

Commit

Permalink
- Lets you use a navigation bar outside the form.
Browse files Browse the repository at this point in the history
  • Loading branch information
@renyalvarado
renyalvarado committed Apr 21, 2015
1 parent 81e96ee commit d3aa2be
Show file tree
Hide file tree
Showing 2 changed files with 142 additions and 5 deletions.
136 changes: 136 additions & 0 deletions examples/basic-outside-container.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
<!DOCTYPE html>
<html>
<head>
<title>Basic Example with Navbar outside container</title>
<!-- Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../prettify.css" rel="stylesheet">
</head>
<body>
<div class='container'>

<section id="wizard">
<div class="page-header">
<h1>Basic Wizard with Navbar outside container</h1>
</div>
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</nav>

<div id="rootwizard">
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>

<h3>HTML</h3>
<pre class="prettyprint linenums">
&lt;nav class="navbar">
&lt;div class="navbar-inner">
&lt;div class="container">
&lt;ul>
&lt;li>&lt;a href="#tab1" data-toggle="tab">First&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab2" data-toggle="tab">Second&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab3" data-toggle="tab">Third&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab4" data-toggle="tab">Forth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab5" data-toggle="tab">Fifth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab6" data-toggle="tab">Sixth&lt;/a>&lt;/li>
&lt;li>&lt;a href="#tab7" data-toggle="tab">Seventh&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
&lt;/nav>
&lt;div id="rootwizard">
&lt;div class="tab-content">
&lt;div class="tab-pane" id="tab1">
1
&lt;/div>
&lt;div class="tab-pane" id="tab2">
2
&lt;/div>
&lt;div class="tab-pane" id="tab3">
3
&lt;/div>
&lt;div class="tab-pane" id="tab4">
4
&lt;/div>
&lt;div class="tab-pane" id="tab5">
5
&lt;/div>
&lt;div class="tab-pane" id="tab6">
6
&lt;/div>
&lt;div class="tab-pane" id="tab7">
7
&lt;/div>
&lt;ul class="pager wizard">
&lt;li class="previous first" style="display:none;">&lt;a href="#">First&lt;/a>&lt;/li>
&lt;li class="previous">&lt;a href="#">Previous&lt;/a>&lt;/li>
&lt;li class="next last" style="display:none;">&lt;a href="#">Last&lt;/a>&lt;/li>
&lt;li class="next">&lt;a href="#">Next&lt;/a>&lt;/li>
&lt;/ul>
&lt;/div>
&lt;/div>
</pre>

<h3>JS</h3>
<pre class="prettyprint linenums">
$(document).ready(function() {
$('#rootwizard').bootstrapWizard();
});
</pre>

</section>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../jquery.bootstrap.wizard.js"></script>
<script src="../prettify.js"></script>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
navigation: $('nav ul')
});
window.prettyPrint && prettyPrint()
});
</script>
</body>
</html>
11 changes: 6 additions & 5 deletions jquery.bootstrap.wizard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,8 +184,8 @@ var bootstrapWizardCreate = function(element, options) {
};
this.show = function(index) {
var tabToShow = isNaN(index) ?
element.find(baseItemSelector + ' a[href=#' + index + ']') :
element.find(baseItemSelector + ':eq(' + index + ') a');
$navigation.find(baseItemSelector + ' a[href=#' + index + ']') :
$navigation.find(baseItemSelector + ':eq(' + index + ') a');
if (tabToShow.length > 0) {
historyStack.push(obj.currentIndex());
tabToShow.tab('show');
Expand Down Expand Up @@ -252,7 +252,7 @@ var bootstrapWizardCreate = function(element, options) {
$('a[data-toggle="tab"]', $navigation).off('shown shown.bs.tab', innerTabShown);

// reset elements based on current state of the DOM
$navigation = element.find('ul:first', element);
$navigation = $settings.navigation || element.find('ul:first', element);
$activeTab = $navigation.find(baseItemSelector + '.active', element);

// re-add handlers
Expand All @@ -262,7 +262,7 @@ var bootstrapWizardCreate = function(element, options) {
obj.fixNavigationButtons();
};

$navigation = element.find('ul:first', element);
$navigation = $settings.navigation || element.find('ul:first', element);
$activeTab = $navigation.find(baseItemSelector + '.active', element);

if(!$navigation.hasClass($settings.tabClass)) {
Expand Down Expand Up @@ -325,7 +325,8 @@ $.fn.bootstrapWizard.defaults = {
onBack: null,
onTabChange: null,
onTabClick: null,
onTabShow: null
onTabShow: null,
navigation: null
};

})(jQuery);

1 comment on commit d3aa2be

@VinceG
Copy link

@VinceG VinceG commented on d3aa2be Apr 21, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@renyalvarado can you confirm the current examples work?

Please sign in to comment.