--- /dev/null
+<!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>
projects / jquery-ui.git / commitdiff