Skip to content

Instantly share code, notes, and snippets.

@manishval

manishval/gist:6195208

Created August 9, 2013 16:54
Show Gist options
  • Save manishval/6195208 to your computer and use it in GitHub Desktop.
Save manishval/6195208 to your computer and use it in GitHub Desktop.
Download ZIP
Good modal jQuery plugin - TB
Raw
gistfile1.html
<html>
<head>
<link href="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/bootstrap/js/bootstrap.min.js"></script>
<script src="http://vadimg.com/twitter-bootstrap-wizard-example/jquery.bootstrap.wizard.js"></script>
</head>
<body>
<div id="rootwizard">
<div 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>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
<p>
<input type='text' name='name' id='name' placeholder='Enter Your Name'>
</p>
</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>
<li class="finish"><a href="#">Finish</a></li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onNext: function(tab, navigation, index) {
if(index==2) {
// Make sure we entered the name
if(!$('#name').val()) {
alert('You must enter your name');
$('#name').focus();
return false;
}
}
// Set the name for the next tab
$('#tab3').html('Hello, ' + $('#name').val());
}, onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
// If it's the last tab then hide the last button and show the finish instead
if($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment