效果查看：http:///keleyi/phtml/jqplug/5.htm
HTML文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery進度條-</title>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div>jquery進度條<a href ="http:///a/bjac/ipst73q3.htm" target="_blank">原文</a></div>
<div>
<div id="progress1"></div> <br/><br/>
<div id="progress2"></div> <br/><br/>
<div id="progress3"></div> <br/><br/>
<div id="progress4"></div><br/><br/>
點擊這裡顯示隨機進度 <input type='button' id='changedProgress' value="隨機進度" />
</div>
<script>
$(document).ready(function () {
var bar1 = $("#progress1").progressbar();
bar1.progress(60);
var bar2 = $("#progress2").progressbar({ color: '#145ABA' });
bar2.progress(90);
var bar3 = $("#progress3").progressbar({ width: '400px', color: '#0A8F2B', border: '2px solid #0A8F2B', padding: '3px' });
bar3.progress(80);
var bar4 = $("#progress4").progressbar({ width: '500px', color: '#B3240E', border: '1px solid #000000' });
bar4.progress(50);
$("#changedProgress").click(function () {
x = getRandomArbitary(10, 90);
bar1.progress(x);
x = getRandomArbitary(10, 90);
bar2.progress(x);
x = getRandomArbitary(10, 90);
bar3.progress(x);
x = getRandomArbitary(10, 90);
bar4.progress(x);
});
});
function getRandomArbitary(min, max) {
return parseInt(Math.random() * (max - min) + min);
}
</script>
<script src="http:///keleyi/phtml/jqplug/5/jquery.progressbar.min.js"></script>
</body>
</html>
jquery.progressbar.js下載
/*!
* jQuery Progress Bar
* version: 1.0.0
* @requires jQuery v1.6 or later
* Copyright (c) 2013 Ravishanker Kusuma
* http:///
*/
(function ($) {
$.fn.progressbar = function (options) {
var settings = $.extend({
width: '300px',
height: '25px',
color: '#0ba1b5',
padding: '0px',
border: '1px solid #ddd'
}, options);
//Set css to container
$(this).css({
'width': settings.width,
'border': settings.border,
'border-radius': '5px',
'overflow': 'hidden',
'display': 'inline-block',
'padding': settings.padding,
'margin': '0px 10px 5px 5px'
});
// add progress bar to container
var progressbar = $("<div></div>");
progressbar.css({
'height': settings.height,
'text-align': 'right',
'vertical-align': 'middle',
'color': '#fff',
'width': '0px',
'border-radius': '3px',
'background-color': settings.color
});
$(this).append(progressbar);
this.progress = function (value) {
var width = $(this).width() * value / 100;
progressbar.width(width).html(value + "% ");
}
return this;
};
} (jQuery));
設用說明：
初始化：
<div id="progress"></div>
var bar1 = $("#progress").progressbar();
bar1.progress(60);
例子：
$("#progress").progressbar();
$("#progress").progressbar({color:'#145ABA'});
$("#progress").progressbar({width:'400px',color:'#0A8F2B',border:'2px solid #0A8F2B',padding:'3px'});
$("#progress").progressbar({width:'500px',color:'#B3240E',border:'1px solid #000000'});