summaryrefslogtreecommitdiffstats
path: root/apps/it/static/js/ui/demos/spinner
diff options
context:
space:
mode:
authorFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
committerFilipp Lepalaan <f@230.to>2014-02-19 18:02:09 +0200
commit75ad7e4bd7d69243e7e5281c2642f00478fb072d (patch)
treeeaaaf360902d369f42d94778aac8803db7973ce0 /apps/it/static/js/ui/demos/spinner
parentcfc7c3f52544af8a71d3fa3988a06fee200d2c24 (diff)
downloadpudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.gz
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.tar.bz2
pudding-75ad7e4bd7d69243e7e5281c2642f00478fb072d.zip
Added tags, jquery UI
Diffstat (limited to 'apps/it/static/js/ui/demos/spinner')
-rw-r--r--apps/it/static/js/ui/demos/spinner/currency.html52
-rw-r--r--apps/it/static/js/ui/demos/spinner/decimal.html56
-rw-r--r--apps/it/static/js/ui/demos/spinner/default.html64
-rw-r--r--apps/it/static/js/ui/demos/spinner/index.html19
-rw-r--r--apps/it/static/js/ui/demos/spinner/latlong.html57
-rw-r--r--apps/it/static/js/ui/demos/spinner/overflow.html44
-rw-r--r--apps/it/static/js/ui/demos/spinner/time.html74
7 files changed, 366 insertions, 0 deletions
diff --git a/apps/it/static/js/ui/demos/spinner/currency.html b/apps/it/static/js/ui/demos/spinner/currency.html
new file mode 100644
index 0000000..ebe8d66
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/currency.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Currency</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../external/globalize.js"></script>
+ <script src="../../external/globalize.culture.de-DE.js"></script>
+ <script src="../../external/globalize.culture.ja-JP.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#currency" ).change(function() {
+ $( "#spinner" ).spinner( "option", "culture", $( this ).val() );
+ });
+
+ $( "#spinner" ).spinner({
+ min: 5,
+ max: 2500,
+ step: 25,
+ start: 1000,
+ numberFormat: "C"
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>
+ <label for="currency">Currency to donate</label>
+ <select id="currency" name="currency">
+ <option value="en-US">US $</option>
+ <option value="de-DE">EUR €</option>
+ <option value="ja-JP">YEN ¥</option>
+ </select>
+</p>
+<p>
+ <label for="spinner">Amount to donate:</label>
+ <input id="spinner" name="spinner" value="5">
+</p>
+
+<div class="demo-description">
+<p>Example of a donation form, with currency selection and amount spinner.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/decimal.html b/apps/it/static/js/ui/demos/spinner/decimal.html
new file mode 100644
index 0000000..06ef567
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/decimal.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Decimal</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../external/globalize.js"></script>
+ <script src="../../external/globalize.culture.de-DE.js"></script>
+ <script src="../../external/globalize.culture.ja-JP.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#spinner" ).spinner({
+ step: 0.01,
+ numberFormat: "n"
+ });
+
+ $( "#culture" ).change(function() {
+ var current = $( "#spinner" ).spinner( "value" );
+ Globalize.culture( $(this).val() );
+ $( "#spinner" ).spinner( "value", current );
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>
+ <label for="spinner">Decimal spinner:</label>
+ <input id="spinner" name="spinner" value="5.06">
+</p>
+<p>
+ <label for="culture">Select a culture to use for formatting:</label>
+ <select id="culture">
+ <option value="en-EN" selected="selected">English</option>
+ <option value="de-DE">German</option>
+ <option value="ja-JP">Japanese</option>
+ </select>
+</p>
+
+<div class="demo-description">
+<p>
+ Example of a decimal spinner. Step is set to 0.01.
+ <br>The code handling the culture change reads the current spinner value,
+ then changes the culture, then sets the value again, resulting in an updated
+ formatting, based on the new culture.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/default.html b/apps/it/static/js/ui/demos/spinner/default.html
new file mode 100644
index 0000000..ed46f96
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/default.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Default functionality</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ var spinner = $( "#spinner" ).spinner();
+
+ $( "#disable" ).click(function() {
+ if ( spinner.spinner( "option", "disabled" ) ) {
+ spinner.spinner( "enable" );
+ } else {
+ spinner.spinner( "disable" );
+ }
+ });
+ $( "#destroy" ).click(function() {
+ if ( spinner.data( "ui-spinner" ) ) {
+ spinner.spinner( "destroy" );
+ } else {
+ spinner.spinner();
+ }
+ });
+ $( "#getvalue" ).click(function() {
+ alert( spinner.spinner( "value" ) );
+ });
+ $( "#setvalue" ).click(function() {
+ spinner.spinner( "value", 5 );
+ });
+
+ $( "button" ).button();
+ });
+ </script>
+</head>
+<body>
+
+<p>
+ <label for="spinner">Select a value:</label>
+ <input id="spinner" name="value">
+</p>
+
+<p>
+ <button id="disable">Toggle disable/enable</button>
+ <button id="destroy">Toggle widget</button>
+</p>
+
+<p>
+ <button id="getvalue">Get value</button>
+ <button id="setvalue">Set value to 5</button>
+</p>
+
+<div class="demo-description">
+<p>Default spinner.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/index.html b/apps/it/static/js/ui/demos/spinner/index.html
new file mode 100644
index 0000000..f3c74d0
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner Demos</title>
+</head>
+<body>
+
+<ul>
+ <li><a href="default.html">Default functionality</a></li>
+ <li><a href="decimal.html">Decimal</a></li>
+ <li><a href="currency.html">Currency</a></li>
+ <li><a href="latlong.html">Map</a></li>
+ <li><a href="time.html">Time</a></li>
+ <li><a href="overflow.html">Overflow</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/latlong.html b/apps/it/static/js/ui/demos/spinner/latlong.html
new file mode 100644
index 0000000..1c419ad
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/latlong.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Map</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ function latlong() {
+ return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
+ }
+ function position() {
+ map.setCenter( latlong() );
+ }
+ $( "#lat, #lng" ).spinner({
+ step: .001,
+ change: position,
+ stop: position
+ });
+
+ var map = new google.maps.Map( $("#map")[0], {
+ zoom: 8,
+ center: latlong(),
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ });
+ });
+ </script>
+ <style>
+ #map {
+ width:500px;
+ height:500px;
+ }
+ </style>
+</head>
+<body>
+
+<label for="lat">Latitude</label>
+<input id="lat" name="lat" value="44.797">
+<br>
+<label for="lng">Longitude</label>
+<input id="lng" name="lng" value="-93.278">
+
+<div id="map"></div>
+
+<div class="demo-description">
+<p>Google Maps integration, using spinners to change latitude and longitude.</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/overflow.html b/apps/it/static/js/ui/demos/spinner/overflow.html
new file mode 100644
index 0000000..2d5dd16
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/overflow.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Overflow</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "#spinner" ).spinner({
+ spin: function( event, ui ) {
+ if ( ui.value > 10 ) {
+ $( this ).spinner( "value", -10 );
+ return false;
+ } else if ( ui.value < -10 ) {
+ $( this ).spinner( "value", 10 );
+ return false;
+ }
+ }
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>
+ <label for="spinner">Select a value:</label>
+ <input id="spinner" name="value" />
+</p>
+
+<div class="demo-description">
+<p>
+Overflowing spinner restricted to a range of -10 to 10.
+For anything above 10, it'll overflow to -10, and the other way round.
+</p>
+</div>
+</body>
+</html>
diff --git a/apps/it/static/js/ui/demos/spinner/time.html b/apps/it/static/js/ui/demos/spinner/time.html
new file mode 100644
index 0000000..f5dab29
--- /dev/null
+++ b/apps/it/static/js/ui/demos/spinner/time.html
@@ -0,0 +1,74 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Spinner - Time</title>
+ <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
+ <script src="../../jquery-1.10.2.js"></script>
+ <script src="../../external/jquery.mousewheel.js"></script>
+ <script src="../../external/globalize.js"></script>
+ <script src="../../external/globalize.culture.de-DE.js"></script>
+ <script src="../../ui/jquery.ui.core.js"></script>
+ <script src="../../ui/jquery.ui.widget.js"></script>
+ <script src="../../ui/jquery.ui.button.js"></script>
+ <script src="../../ui/jquery.ui.spinner.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $.widget( "ui.timespinner", $.ui.spinner, {
+ options: {
+ // seconds
+ step: 60 * 1000,
+ // hours
+ page: 60
+ },
+
+ _parse: function( value ) {
+ if ( typeof value === "string" ) {
+ // already a timestamp
+ if ( Number( value ) == value ) {
+ return Number( value );
+ }
+ return +Globalize.parseDate( value );
+ }
+ return value;
+ },
+
+ _format: function( value ) {
+ return Globalize.format( new Date(value), "t" );
+ }
+ });
+
+ $(function() {
+ $( "#spinner" ).timespinner();
+
+ $( "#culture" ).change(function() {
+ var current = $( "#spinner" ).timespinner( "value" );
+ Globalize.culture( $(this).val() );
+ $( "#spinner" ).timespinner( "value", current );
+ });
+ });
+ </script>
+</head>
+<body>
+
+<p>
+ <label for="spinner">Time spinner:</label>
+ <input id="spinner" name="spinner" value="08:30 PM">
+</p>
+<p>
+ <label for="culture">Select a culture to use for formatting:</label>
+ <select id="culture">
+ <option value="en-EN" selected="selected">English</option>
+ <option value="de-DE">German</option>
+ </select>
+</p>
+
+<div class="demo-description">
+<p>
+ A custom widget extending spinner. Use the Globalization plugin to parse and output
+ a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
+ spins hours.
+</p>
+</div>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 20:20:39 +0000