source: main/trunk/greenstone3/web/interfaces/oran/js/jquery-ui-1.8rc1/demos/progressbar/resize.html@ 24245

Last change on this file since 24245 was 24245, checked in by sjb48, 13 years ago

Oran code for supporting format changes to document.

  • Property svn:executable set to *
File size: 1.4 KB
Line 
1<!doctype html>
2<html lang="en">
3<head>
4 <title>jQuery UI Progressbar - Resizable</title>
5 <link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
6 <script type="text/javascript" src="../../jquery-1.4.1.js"></script>
7 <script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
8 <script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
9 <script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script>
10 <script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script>
11 <link type="text/css" href="../demos.css" rel="stylesheet" />
12 <script type="text/javascript">
13 $(function() {
14 $("#progressbar").progressbar({
15 value: 37
16 });
17 $("#progressbarWrapper").resizable();
18 });
19 </script>
20</head>
21<body>
22
23<div class="demo">
24
25 <div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
26 <div id="progressbar" style="height:100%;"></div>
27 </div>
28
29</div><!-- End demo -->
30
31<div class="demo-description">
32
33<p>The progress bar's widths are specified in percentages for flexible sizing so it will resize to fit its container. Try resizing the height and width of this bar to see how it maintains the correct proportions. (This is not necessarily a real-world example, but it's a good illustration of how flexibly all the plugins are coded.)</p>
34
35</div><!-- End demo-description -->
36
37</body>
38</html>
Note: See TracBrowser for help on using the repository browser.