El código HTML que contendrá nuestra página será el siguiente:
<html>
<head>
<title>Bootstrap Progress Bar</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Bootstrap Progress Bar</h1>
<p>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="reset" data-level="info" class="btn btn-default">Reset</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="0" class="btn btn-default">0%</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="10" class="btn btn-default">10%</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="30" class="btn btn-default">30%</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="75" class="btn btn-default">75%</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="100" class="btn btn-default">100%</button>
<button data-toggle="progressbar" data-target="#myProgressbar" data-value="finish" data-level="success" class="btn btn-default">Finish</button>
</p>
<div id="myProgressbar" class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
<span class="sr-only">0% Complete</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/progressbar.js"></script>
</body>
</html>
La mágia de que la barra se vaya cargando a través de los botones está en el fichero progressbar.js.
!function ($) {
"use strict";
// PROGRESSBAR CLASS DEFINITION
// ============================
var Progressbar = function (element) {
this.$element = $(element);
}
Progressbar.prototype.update = function (value) {
var $div = this.$element.find('div');
var $span = $div.find('span');
$div.attr('aria-valuenow', value);
$div.css('width', value + '%');
$span.text(value + '% Complete');
}
Progressbar.prototype.finish = function () {
this.update(100);
}
Progressbar.prototype.reset = function () {
this.update(0);
}
// PROGRESSBAR PLUGIN DEFINITION
// =============================
$.fn.progressbar = function (option) {
return this.each(function () {
var $this = $(this),
var data = $this.data('jbl.progressbar');
if (!data) $this.data('jbl.progressbar', (data = new Progressbar(this)));
if (typeof option == 'string') data[option]();
if (typeof option == 'number') data.update(option);
})
};
// PROGRESSBAR DATA-API
// ====================
$(document).on('click', '[data-toggle="progressbar"]', function (e) {
var $this = $(this);
var $target = $($this.data('target'));
var value = $this.data('value');
e.preventDefault();
$target.progressbar(value);
});
}(window.jQuery);
Y el resultado de este script es el siguiente:
No hay comentarios:
Publicar un comentario