aboutsummaryrefslogtreecommitdiffstats
path: root/include/jquery_ui/development-bundle/demos/progressbar
diff options
context:
space:
mode:
authorfriendica <info@friendica.com>2012-07-09 23:23:20 -0700
committerfriendica <info@friendica.com>2012-07-09 23:23:20 -0700
commit1215de575d9cda66b434f21dafdf44f986638b71 (patch)
tree6bc706e2b5575c537ba41c1c511c5ac21c169d70 /include/jquery_ui/development-bundle/demos/progressbar
parent5355193b6342910ec69ec172846027ac9353d2b3 (diff)
downloadvolse-hubzilla-1215de575d9cda66b434f21dafdf44f986638b71.tar.gz
volse-hubzilla-1215de575d9cda66b434f21dafdf44f986638b71.tar.bz2
volse-hubzilla-1215de575d9cda66b434f21dafdf44f986638b71.zip
slider
Diffstat (limited to 'include/jquery_ui/development-bundle/demos/progressbar')
-rw-r--r--include/jquery_ui/development-bundle/demos/progressbar/animated.html44
-rw-r--r--include/jquery_ui/development-bundle/demos/progressbar/default.html35
-rw-r--r--include/jquery_ui/development-bundle/demos/progressbar/images/pbar-ani.gifbin0 -> 7970 bytes
-rw-r--r--include/jquery_ui/development-bundle/demos/progressbar/index.html20
-rw-r--r--include/jquery_ui/development-bundle/demos/progressbar/resize.html40
5 files changed, 139 insertions, 0 deletions
diff --git a/include/jquery_ui/development-bundle/demos/progressbar/animated.html b/include/jquery_ui/development-bundle/demos/progressbar/animated.html
new file mode 100644
index 000000000..6134a8ca7
--- /dev/null
+++ b/include/jquery_ui/development-bundle/demos/progressbar/animated.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Animated</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.7.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <style>
+ .ui-progressbar .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
+ </style>
+ <script>
+ $(function() {
+ $( "#progressbar" ).progressbar({
+ value: 59
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="progressbar"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>
+This progressbar has an animated fill by setting the
+<code>background-image</code>
+on the
+<code>.ui-progressbar-value</code>
+element, using css.
+</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/include/jquery_ui/development-bundle/demos/progressbar/default.html b/include/jquery_ui/development-bundle/demos/progressbar/default.html
new file mode 100644
index 000000000..0f0d692cd
--- /dev/null
+++ b/include/jquery_ui/development-bundle/demos/progressbar/default.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.7.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#progressbar" ).progressbar({
+ value: 37
+ });
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="progressbar"></div>
+
+</div><!-- End demo -->
+
+
+
+<div class="demo-description">
+<p>Default determinate progress bar.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/include/jquery_ui/development-bundle/demos/progressbar/images/pbar-ani.gif b/include/jquery_ui/development-bundle/demos/progressbar/images/pbar-ani.gif
new file mode 100644
index 000000000..cb59a04f9
--- /dev/null
+++ b/include/jquery_ui/development-bundle/demos/progressbar/images/pbar-ani.gif
Binary files differ
diff --git a/include/jquery_ui/development-bundle/demos/progressbar/index.html b/include/jquery_ui/development-bundle/demos/progressbar/index.html
new file mode 100644
index 000000000..9836f59aa
--- /dev/null
+++ b/include/jquery_ui/development-bundle/demos/progressbar/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar Demos</title>
+ <link rel="stylesheet" href="../demos.css">
+</head>
+<body>
+
+<div class="demos-nav">
+ <h4>Examples</h4>
+ <ul>
+ <li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+ <li><a href="animated.html">Animated</a></li>
+ <li><a href="resize.html">Resizable progressbar</a></li>
+ </ul>
+</div>
+
+</body>
+</html>
diff --git a/include/jquery_ui/development-bundle/demos/progressbar/resize.html b/include/jquery_ui/development-bundle/demos/progressbar/resize.html
new file mode 100644
index 000000000..7452075f5
--- /dev/null
+++ b/include/jquery_ui/development-bundle/demos/progressbar/resize.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Resizable</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.7.2.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.mouse.js"></script>
+ <script src="../../ui/jquery.ui.progressbar.js"></script>
+ <script src="../../ui/jquery.ui.resizable.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#progressbar" ).progressbar({
+ value: 37
+ });
+ $( "#progressbarWrapper" ).resizable();
+ });
+ </script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
+ <div id="progressbar" style="height:100%;"></div>
+</div>
+
+</div><!-- End demo -->
+
+
+
+<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>
+</div><!-- End demo-description -->
+
+</body>
+</html>