r1365 - trunk/demos/progressbar
Author: fg.todd
Date: Tue Dec 30 12:40:41 2008
New Revision: 1365
Added:
trunk/demos/progressbar/resize.html
Modified:
trunk/demos/progressbar/default.html
trunk/demos/progressbar/index.html
Log:
Added new resizable slider example
Modified: trunk/demos/progressbar/default.html
==============================================================================
--- trunk/demos/progressbar/default.html (original)
+++ trunk/demos/progressbar/default.html Tue Dec 30 12:40:41 2008
@@ -17,7 +17,23 @@
</head>
<body>
-<div id="progressbar"></div>
+<div class="demo">
+
+ <div id="progressbar"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+This is the default determinate progress bar that is used to provide
the current % complete status of a process. If the actual percent complete
status cannot be calculated, an indeterminate progress bar (coming soon) or
spinner animation is a better way to provide user feedback.
+
+The progressbar plugin accepts a single option of Value which can be
updated programmatically to animate the bar.
+
+</div><!-- End demo-description -->
+
+
</body>
</html>
Modified: trunk/demos/progressbar/index.html
==============================================================================
--- trunk/demos/progressbar/index.html (original)
+++ trunk/demos/progressbar/index.html Tue Dec 30 12:40:41 2008
@@ -10,6 +10,7 @@
<h4>Progressbar</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default</a></li>
+ <li class="demo-config-on"><a href="resize.html">Resizable</a></li>
</ul>
</div>
Added: trunk/demos/progressbar/resize.html
==============================================================================
--- (empty file)
+++ trunk/demos/progressbar/resize.html Tue Dec 30 12:40:41 2008
@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Progressbar - Resize Demo</title>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <link type="text/css" href="../../themes/default/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
+ <script type="text/javascript" src="../../ui/ui.resizable.js"></script>
+
+ <script type="text/javascript">
+ $(function() {
+ $("#progressbar").progressbar({
+ value: 37
+ });
+ });
+ $(function() {
+ $("#progressbarWrapper").resizable({
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+ <div id="progressbarWrapper" style="height:10px; padding:2px;"
class="ui-widget-default">
+ <div id="progressbar" style="height:100%;"></div>
+ </div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+
+Since the progress bar is coded in percentages for flexible sizing, it
will resize to fit whatever block it's placed inside. Try resizing the
height and width of this bar to see how it maintains the correct
proportions.
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>