aboutsummaryrefslogtreecommitdiffstats
path: root/demos
diff options
context:
space:
mode:
authorFelix Nagel <info@felixnagel.com>2012-12-12 16:44:19 +0100
committerFelix Nagel <info@felixnagel.com>2012-12-12 16:44:19 +0100
commitf6372bd7eac41ae2c022ef510ec414d016e820ed (patch)
treeb764593154e334e03701dbc896dbac0154c5d136 /demos
parentd1350f9f1113ef5590ec010f16da7068646aec01 (diff)
parent747d8534520fc3abad81b3c171fa931149398d99 (diff)
downloadjquery-ui-f6372bd7eac41ae2c022ef510ec414d016e820ed.tar.gz
jquery-ui-f6372bd7eac41ae2c022ef510ec414d016e820ed.zip
Merge branch 'master' into selectmenu
Diffstat (limited to 'demos')
-rw-r--r--demos/button/toolbar.html14
-rw-r--r--demos/datepicker/localization.html6
-rw-r--r--demos/progressbar/animated.html34
-rw-r--r--demos/progressbar/indeterminate.html16
-rw-r--r--demos/progressbar/index.html3
-rw-r--r--demos/progressbar/label.html58
-rw-r--r--demos/progressbar/resize.html33
7 files changed, 80 insertions, 84 deletions
diff --git a/demos/button/toolbar.html b/demos/button/toolbar.html
index 5be3668f6..62c1ca83a 100644
--- a/demos/button/toolbar.html
+++ b/demos/button/toolbar.html
@@ -11,12 +11,12 @@
<link rel="stylesheet" href="../demos.css">
<style>
#toolbar {
- padding: 11px 4px 9px 4px;
+ padding: 4px;
+ display: inline-block;
}
-
/* support: IE7 */
- *:first-child+html #toolbar {
- padding: 4px 0px 4px 5px;
+ *+html #toolbar {
+ display: inline;
}
</style>
<script>
@@ -91,7 +91,7 @@
</head>
<body>
-<span id="toolbar" class="ui-widget-header ui-corner-all">
+<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button>
<button id="rewind">rewind</button>
<button id="play">play</button>
@@ -106,12 +106,12 @@
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
-</span>
+</div>
<div class="demo-description">
<p>
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
- an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
+ an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
</p>
</div>
</body>
diff --git a/demos/datepicker/localization.html b/demos/datepicker/localization.html
index f39677f09..968196295 100644
--- a/demos/datepicker/localization.html
+++ b/demos/datepicker/localization.html
@@ -12,6 +12,7 @@
<script src="../../ui/i18n/jquery.ui.datepicker-ar.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-az.js"></script>
+ <script src="../../ui/i18n/jquery.ui.datepicker-be.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-bg.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-bs.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ca.js"></script>
@@ -53,8 +54,10 @@
<script src="../../ui/i18n/jquery.ui.datepicker-mk.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ml.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-ms.js"></script>
+ <script src="../../ui/i18n/jquery.ui.datepicker-nb.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-nl.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script>
+ <script src="../../ui/i18n/jquery.ui.datepicker-nn.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-no.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-pl.js"></script>
<script src="../../ui/i18n/jquery.ui.datepicker-pt.js"></script>
@@ -100,6 +103,7 @@
<option value="hy">Armenian (&#1344;&#1377;&#1397;&#1381;&#1408;&#1381;&#1398;)</option>
<option value="az">Azerbaijani (Az&#601;rbaycan dili)</option>
<option value="eu">Basque (Euskara)</option>
+ <option value="be">Belarusian</option>
<option value="bs">Bosnian (Bosanski)</option>
<option value="bg">Bulgarian (&#1073;&#1098;&#1083;&#1075;&#1072;&#1088;&#1089;&#1082;&#1080; &#1077;&#1079;&#1080;&#1082;)</option>
<option value="ca">Catalan (Catal&agrave;)</option>
@@ -142,7 +146,9 @@
<option value="mk">Macedonian</option>
<option value="ml">Malayalam</option>
<option value="ms">Malaysian (Bahasa Malaysia)</option>
+ <option value="nb">Norwegian (Bokmål)</option>
<option value="no">Norwegian (Norsk)</option>
+ <option value="nn">Norwegian (Nynorsk)</option>
<option value="pl">Polish (Polski)</option>
<option value="pt">Portuguese (Portugu&ecirc;s)</option>
<option value="pt-BR">Portuguese/Brazilian (Portugu&ecirc;s)</option>
diff --git a/demos/progressbar/animated.html b/demos/progressbar/animated.html
deleted file mode 100644
index 5cb1872ed..000000000
--- a/demos/progressbar/animated.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!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.8.3.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: 59
- }).find( ".ui-progressbar-value div" ).addClass( "ui-progressbar-overlay" );
- });
- </script>
-</head>
-<body>
-
-<div id="progressbar"></div>
-
-<div class="demo-description">
-<p>
-This progressbar has an animated fill by setting the
-<code>ui-progressbar-overlay</code> class
-on the
-<code>.ui-progressbar-value</code>
-element's overlay div.
-</p>
-</div>
-</body>
-</html>
diff --git a/demos/progressbar/indeterminate.html b/demos/progressbar/indeterminate.html
index 34ce6da47..b07211496 100644
--- a/demos/progressbar/indeterminate.html
+++ b/demos/progressbar/indeterminate.html
@@ -16,27 +16,27 @@
});
$( "button" ).on( "click", function( event ) {
var target = $( event.target ),
- pbar = $( "#progressbar" ),
- pbarValue = pbar.find( ".ui-progressbar-value" );
+ progressbar = $( "#progressbar" ),
+ progressbarValue = progressbar.find( ".ui-progressbar-value" );
if ( target.is( "#numButton" ) ) {
- pbar.progressbar( "option", {
+ progressbar.progressbar( "option", {
value: Math.floor( Math.random() * 100 )
});
} else if ( target.is( "#colorButton" ) ) {
- pbarValue.css({
+ progressbarValue.css({
"background": '#' + Math.floor( Math.random() * 16777215 ).toString( 16 )
});
} else if ( target.is( "#falseButton" ) ) {
- pbar.progressbar( "option", "value", false );
+ progressbar.progressbar( "option", "value", false );
}
});
});
</script>
<style>
- #progressbar .ui-progressbar-value {
- background-color: #CCCCCC;
- }
+ #progressbar .ui-progressbar-value {
+ background-color: #ccc;
+ }
</style>
</head>
<body>
diff --git a/demos/progressbar/index.html b/demos/progressbar/index.html
index df3483816..cfc054aea 100644
--- a/demos/progressbar/index.html
+++ b/demos/progressbar/index.html
@@ -8,9 +8,8 @@
<ul>
<li><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>
<li><a href="indeterminate.html">Indeterminate</a></li>
+ <li><a href="label.html">Custom Labels</a></li>
</ul>
</body>
diff --git a/demos/progressbar/label.html b/demos/progressbar/label.html
new file mode 100644
index 000000000..25394b205
--- /dev/null
+++ b/demos/progressbar/label.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Progressbar - Custom Label</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.8.3.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>
+ .progress-label {
+ float: left;
+ margin-left: 50%;
+ margin-top: 5px;
+ font-weight: bold;
+ text-shadow: 1px 1px 0 #fff;
+ }
+ </style>
+ <script>
+ $(function() {
+ var progressbar = $( "#progressbar" ),
+ progressLabel = $( ".progress-label" );
+
+ progressbar.progressbar({
+ value: false,
+ change: function() {
+ progressLabel.text( progressbar.progressbar( "value" ) + "%" );
+ },
+ complete: function() {
+ progressLabel.text( "Complete!" );
+ }
+ });
+
+ function progress() {
+ var val = progressbar.progressbar( "value" ) || 0;
+
+ progressbar.progressbar( "value", val + 1 );
+
+ if ( val < 99 ) {
+ setTimeout( progress, 100 );
+ }
+ }
+
+ setTimeout( progress, 3000 );
+ });
+ </script>
+</head>
+<body>
+
+<div id="progressbar"><div class="progress-label">Loading...</div></div>
+
+<div class="demo-description">
+<p>Custom updated label demo.</p>
+</div>
+</body>
+</html>
diff --git a/demos/progressbar/resize.html b/demos/progressbar/resize.html
deleted file mode 100644
index eac40c0c0..000000000
--- a/demos/progressbar/resize.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<!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.8.3.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 id="progressbarWrapper" style="height:30px; " class="ui-widget-default">
- <div id="progressbar" style="height:100%;"></div>
-</div>
-
-<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>
-</body>
-</html>