library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Progressbar: Add custom label demo.

Browse Source
This commit is contained in:
Kris Borchers 2012-11-29 22:12:30 -06:00
parent f2ee4c51aa
commit 548a6ce7f9
1 changed files with 57 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
demos/progressbar/label.html Normal file
View File

@ -0,0 +1,57 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.8.3.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false,
change: function( event, ui ) {
$( ".progress-label" ).text( $( "#progressbar" ).progressbar( "value" ) + "%" );
}
});
function progress() {
var val = $( "#progressbar" ).progressbar( "value" );
if ( !val ) {
val = 0;
}
if ( val < 100 ) {
$( "#progressbar" ).progressbar( "value", val + 1 );
setTimeout( function() {
progress();
}, 100);
} else {
$( ".progress-label" ).text( "Complete!" );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
<div class="demo-description">
<p>Custom updated label demo.</p>
</div>
</body>
</html>