library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-10-05 01:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added new resizable slider example

Browse Source
This commit is contained in:
Todd Parker 2008-12-30 20:40:41 +00:00
parent 56727f40c0
commit 04069424ce
3 changed files with 63 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
demos/progressbar/default.html
View File

@ -17,7 +17,23 @@
</head>
<body>
<div id="progressbar"></div>
<div class="demo">
<div id="progressbar"></div>
</div><!-- End demo -->
<div class="demo-description">
<p>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.</p>
<p>The progressbar plugin accepts a single option of Value which can be updated programmatically to animate the bar.</p>
</div><!-- End demo-description -->
</body>
</html>

1
demos/progressbar/index.html
View File

@ -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>

45
demos/progressbar/resize.html Normal file
View File

@ -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>