Skip to content
Permalink
Browse files

Porting old spinner implementation to 1.8, dropping some baggage.

  • Loading branch information...
jzaefferer committed Oct 22, 2010
1 parent 19f9c3a commit f7d8a1ba570fd620d65b377ebe806eac0b578328
@@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#spinner").spinner();
$("#disable").toggle(function() {
$("#spinner").spinner("disable");
}, function() {
$("#spinner").spinner("enable");
});
$("#destroy").toggle(function() {
$("#spinner").spinner("destroy");
}, function() {
$("#spinner").spinner();
});
$("#getvalue").click(function() {
alert($("#spinner").spinner("value"));
});
$("#setvalue").click(function() {
$("#spinner").spinner("value", 5);
});
$("button").button();
});
</script>
</head>
<body>

<div class="demo">

<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><!-- End demo -->

<div class="demo-description">
<p>
Default spinner.
</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
var opts = {
's1': { currency: '$' },
's2': { currency: '' },
's3': { currency: '¥' },
's4': { currency: '$', groupSeparator: ' ', radixPoint: '.' },
's5': { currency: 'Fr ', groupSeparator: "'", radixPoint: '.' },
's6': { currency: 'RUB', groupSeparator: ".", radixPoint: ',' }
};
var currency = $("#currency").change(function() {
var val = $(this).val();
$("#amount")
.spinner("option", "currency", opts[val].currency)
.spinner("option", "groupSeparator", opts[val].groupSeparator ? opts[val].groupSeparator : ',')
.spinner("option", "radixPoint", opts[val].radixPoint ? opts[val].radixPoint : '.')
.blur();
});
$("#amount").spinner({
currency: opts[currency.val()].currency,
min: 5,
max: 2500,
step: 25,
start: 1000,
width: '10em'
});
});
</script>
</head>
<body>

<div class="demo">

<p>
<label for="currency">Currency</label>
<select id="currency" name="currency">
<option value="s1">US $</option>
<option value="s2">EUR €</option>
<option value="s3">YEN ¥</option>
<option value="s4">Australian $</option>
<option value="s5">Swiss Franc Fr</option>
<option value="s6">Russian Ruble RUB</option>
</select>
</p>
<p>
<label for="amount">Select the amount to donate:</label>
<input id="amount" name="amount" value="5" />
</p>
</div><!-- End demo -->

<div class="demo-description">
<p>
Example of a donation form, with currency selection and amout spinner.
</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Hexadecimal</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#hexadecimal").spinner({radix: 16, padLength: 6, precision: 2, step: '0.01'});
});
</script>
</head>
<body>

<div class="demo">

<p>
<label for="hexadecimal">Hexadecimal spinner:</label>
<input id="hexadecimal" name="hexadecimal" value="0" />
</p>
</div><!-- End demo -->

<div class="demo-description">
<p>
Example of a hexadecimal spinner.
</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Spinner Demos</title>
<link type="text/css" href="../demos.css" rel="stylesheet" />
</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="donation.html">Donation</a></li>
<li><a href="hexadecimal.html">Hexadecimal</a></li>
<li><a href="latlong.html">Map</a></li>
<li><a href="mousewheel-disabled.html">Mousewheel Disabled</a></li>
<li><a href="rtl.html">RTL</a></li>
</ul>
</div>
</body>
</html>
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Map</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
function latlong() {
return new google.maps.LatLng($("#lat").val(),$("#lng").val());
}
function position() {
map.setCenter(latlong());
}
$("#lat, #lng").spinner({
precision: 6,
change: 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>

<div class="demo">

<label for="lat">Latitude</label>
<input id="lat" name="lat" value="44.797916" />
<br/>
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="-93.278046" />

<div id="map"></div>

</div><!-- End demo -->

<div class="demo-description">
<p>
Google Maps integration, using spinners to change latidude and longitude.
</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,36 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Spinner - Default functionality</title>
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.4.3.js"></script>
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.2.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
$("#s1").spinner({dir: 'rtl'});
});
</script>
</head>
<body>

<div class="demo">

<p><label for="s1">Select a value:</label>
<input id="s1" name="value" /></p>

</div><!-- End demo -->

<div class="demo-description">
<p>
Default spinner.
</p>
</div><!-- End demo-description -->

</body>
</html>
@@ -0,0 +1,60 @@
/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/

(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener )
for ( var i=types.length; i; )
this.addEventListener( types[--i], handler, false );
else
this.onmousewheel = handler;
},

teardown: function() {
if ( this.removeEventListener )
for ( var i=types.length; i; )
this.removeEventListener( types[--i], handler, false );
else
this.onmousewheel = null;
}
};

$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},

unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});


function handler(event) {
var args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true;

event = $.event.fix(event || window.event);
event.type = "mousewheel";

if ( event.wheelDelta ) delta = event.wheelDelta/120;
if ( event.detail ) delta = -event.detail/3;

// Add events and delta to the front of the arguments
args.unshift(event, delta);

return $.event.handle.apply(this, args);
}

})(jQuery);
@@ -18,4 +18,5 @@
@import url("jquery.ui.resizable.css");
@import url("jquery.ui.selectable.css");
@import url("jquery.ui.slider.css");
@import url("jquery.ui.spinner.css");
@import url("jquery.ui.tabs.css");
@@ -0,0 +1,24 @@
/* Spinner
----------------------------------*/
.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; height: 1.8em; }
.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; }
.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; z-index: 100; text-align: center; vertical-align: middle; position: absolute; cursor: default; display: block; overflow: hidden; }
.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; } /* more specificity required here to overide default borders */
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
.ui-spinner-up { top: 0; }
.ui-spinner-down { bottom: 0; }

/* ltr (default) */
.ui-spinner-ltr { direction: ltr; }
.ui-spinner-ltr .ui-spinner-input { float: left; margin-left: .4em; margin-right: 22px; }
.ui-spinner-ltr .ui-spinner-button { right: 0; }
.ui-spinner-ltr a.ui-spinner-button { border-right: none; }

/* rtl */
.ui-spinner-rtl { direction: rtl; }
.ui-spinner-rtl .ui-spinner-input { float: right; margin-left: 22px; margin-right: .4em; }
.ui-spinner-rtl .ui-spinner-button { left: 0; }
.ui-spinner-rtl a.ui-spinner-button { border-left: none; }

/* TR overrides */
div.ui-spinner { background: none; }

0 comments on commit f7d8a1b

Please sign in to comment.
You can’t perform that action at this time.