<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-xs-12">
<h3>Nav Tab Top </h3>
<!-- tabs -->
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#about" data-toggle="tab">About</a></li>
<li><a href="#services" data-toggle="tab">Services</a></li>
<li><a href="#contact" data-toggle="tab">Contact</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<div class="jumbotron">
<h1>Home Tab</h1>
<p>These lists are meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p>
</div>
</div>
<div class="tab-pane" id="about">
<div class="jumbotron">
<h1>About Tab</h1>
<p>because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="jumbotron">
<h1>Services Tab</h1>
<p>meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="jumbotron">
<h1>Contact Tab</h1>
<p>deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p>
</div>
</div>
</div>
</div>
<!-- /tabs -->
</div>
</div>
</div>
$.fn.refreshMe = function(opts){
var $this = this,
defaults = {
ms:1500,
parentSelector:'.panel',
started:function(){},
completed:function(){}
},
settings = $.extend(defaults, opts);
var par = this.parents(settings.parentSelector);
var panelToRefresh = par.find('.refresh-container');
var dataToRefresh = par.find('.refresh-data');
var ms = settings.ms;
var started = settings.started; //function before timeout
var completed = settings.completed; //function after timeout
$this.click(function(){
$this.addClass("fa-spin");
panelToRefresh.show();
if (dataToRefresh) {
started(dataToRefresh);
}
setTimeout(function(){
if (dataToRefresh) {
completed(dataToRefresh);
}
panelToRefresh.fadeOut(800);
$this.removeClass("fa-spin");
},ms);
return false;
})//click
}/* end function refreshMe */
$(document).ready(function(){
$('#refresh1').refreshMe({
started:function(ele){ele.html("Getting new data..")},
completed:function(ele){ele.html("This is the new data after refresh..")}
});
});
