library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Progressbar demos: Coding standards.

Browse Source
This commit is contained in:
Scott González 2010-09-10 10:27:32 -04:00
parent 4a4fab829f
commit 9958d2968f
4 changed files with 42 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
demos/progressbar/animated.html
View File

@ -1,18 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Progressbar - Animated</title> <title>jQuery UI Progressbar - Animated</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<style type="text/css"> <style>
.ui-progressbar-value { background-image: url(images/pbar-ani.gif); } .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
</style> </style>
<script type="text/javascript"> <script>
$(function() { $(function() {
$( "#progressbar" ).progressbar({ $( "#progressbar" ).progressbar({
value: 59 value: 59
@ -28,8 +28,9 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description">
<div class="demo-description">
<p> <p>
This progressbar has an animated fill by setting the This progressbar has an animated fill by setting the
<code>background-image</code> <code>background-image</code>
@ -37,7 +38,6 @@ on the
<code>.ui-progressbar-value</code> <code>.ui-progressbar-value</code>
element, using css. element, using css.
</p> </p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>

20
demos/progressbar/default.html
View File

@ -1,15 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title> <title>jQuery UI Progressbar - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
$( "#progressbar" ).progressbar({ $( "#progressbar" ).progressbar({
value: 37 value: 37
@ -28,12 +28,8 @@
<div class="demo-description"> <div class="demo-description">
<p>Default determinate progress bar.</p> <p>Default determinate progress bar.</p>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>
</html> </html>

4
demos/progressbar/index.html
View File

@ -1,9 +1,9 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Progressbar Demos</title> <title>jQuery UI Progressbar Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
</head> </head>
<body> <body>

24
demos/progressbar/resize.html
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<title>jQuery UI Progressbar - Resizable</title> <title>jQuery UI Progressbar - Resizable</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" /> <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script type="text/javascript" src="../../jquery-1.4.2.js"></script> <script src="../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script> <script src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script> <script src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script> <script src="../../ui/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.progressbar.js"></script> <script src="../../ui/jquery.ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.resizable.js"></script> <script src="../../ui/jquery.ui.resizable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" /> <link rel="stylesheet" href="../demos.css">
<script type="text/javascript"> <script>
$(function() { $(function() {
$( "#progressbar" ).progressbar({ $( "#progressbar" ).progressbar({
value: 37 value: 37
@ -30,10 +30,10 @@
</div><!-- End demo --> </div><!-- End demo -->
<div class="demo-description"> <div class="demo-description">
<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> <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>
</div><!-- End demo-description --> </div><!-- End demo-description -->
</body> </body>