<html lang="en">
<head>
<meta charset="utf-8">
- <title>jQuery UI Progressbar - Default functionality</title>
+ <title>jQuery UI Progressbar - Custom Label</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.progressbar.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
- .progress-label {
- float: left;
- margin-left: 50%;
- margin-top: 5px;
- font-weight: bold;
- }
+ .progress-label {
+ float: left;
+ margin-left: 50%;
+ margin-top: 5px;
+ font-weight: bold;
+ text-shadow: 1px 1px 0 #fff;
+ }
</style>
<script>
$(function() {
- $( "#progressbar" ).progressbar({
+ var progressbar = $( "#progressbar" ),
+ progressLabel = $( ".progress-label" );
+
+ progressbar.progressbar({
value: false,
- change: function( event, ui ) {
- $( ".progress-label" ).text( $( "#progressbar" ).progressbar( "value" ) + "%" );
+ change: function() {
+ progressLabel.text( progressbar.progressbar( "value" ) + "%" );
+ },
+ complete: function() {
+ progressLabel.text( "Complete!" );
}
});
function progress() {
- var val = $( "#progressbar" ).progressbar( "value" );
+ var val = progressbar.progressbar( "value" ) || 0;
- if ( !val ) {
- val = 0;
- }
- if ( val < 100 ) {
- $( "#progressbar" ).progressbar( "value", val + 1 );
- setTimeout( function() {
- progress();
- }, 100);
- } else {
- $( ".progress-label" ).text( "Complete!" );
+ progressbar.progressbar( "value", val + 1 );
+
+ if ( val < 99 ) {
+ setTimeout( progress, 100 );
}
}
projects / jquery-ui.git / commitdiff