diff options
| author | Todd Parker <fg.todd@gmail.com> | 2008-12-30 20:40:41 +0000 |
|---|---|---|
| committer | Todd Parker <fg.todd@gmail.com> | 2008-12-30 20:40:41 +0000 |
| commit | 04069424ced0b329d8335afcfba6a93de1181dea (patch) | |
| tree | 906e089a5a024107d851064ae470008fd94303f2 /demos/progressbar/resize.html | |
| parent | 56727f40c010c974645c9d9a79914d1b273bad86 (diff) | |
| download | jquery-ui-04069424ced0b329d8335afcfba6a93de1181dea.tar.gz jquery-ui-04069424ced0b329d8335afcfba6a93de1181dea.zip | |
Added new resizable slider example
Diffstat (limited to 'demos/progressbar/resize.html')
| -rw-r--r-- | demos/progressbar/resize.html | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html new file mode 100644 index 000000000..c50a75bdf --- /dev/null +++ b/demos/progressbar/resize.html @@ -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"> + +<p>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.</p> + +</div><!-- End demo-description --> + + + +</body> +</html> |