Delay tab loading
Description
The following code shows how to delay tab loading.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet"
href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery.min.js"></script>
<script
src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ <!-- w w w . ja v a2 s . c om-->
$(".nav-tabs a").click(function(){
$(this).button('loading').delay(500).queue(function(){
$(this).button('reset');
$(this).dequeue();
});
});
});
</script>
<style type="text/css">
.nav a {
outline: none;
}
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1"
data-loading-text="Loading...">Section 1</a></li>
<li><a data-toggle="tab" href="#tab2"
data-loading-text="Loading...">Section 2</a></li>
<li><a data-toggle="tab" href="#tab3"
data-loading-text="Loading...">Section 3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active fade in">
<p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis
cardigan american apparel, butcher voluptate nisi qui. Raw denim
you probably haven't heard of them jean shorts Austin. Nesciunt
tofu stumptown aliqua, retro synth master cleanse. Mustache cliche
tempor, williamsburg carles vegan helvetica. Reprehenderit butcher
retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi.</p>
</div>
<div id="tab2" class="tab-pane fade">
<p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque.
Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam
porttitor condimentum nisi, eu viverra ipsum porta ut. Nam
hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean
volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc
facilisis leo at faucibus adipiscing. Duis auctor dictum erat
hendrerit dapibus.</p>
</div>
<div id="tab3" class="tab-pane fade">
<p>WInteger convallis, nulla in</p>
</div>
</div>
</div>
</div>
</body>
</html>