Skip to content

Commit ca2211f

Browse files
scottgonzalezscottgonzalez
committed
Spinner demos: Cleanup.
1 parent 6c84531 commit ca2211f

File tree

7 files changed

+196
-181
lines changed

7 files changed

+196
-181
lines changed

‎demos/spinner/currency.html

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,34 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<title>jQuery UI Spinner - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
8-
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
9-
<script type="text/javascript" src="../../external/jquery.global.js"></script>
10-
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
11-
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
14-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
15-
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
16-
<link type="text/css" href="../demos.css" rel="stylesheet" />
17-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
9+
<script src="../../external/jquery.global.js"></script>
10+
<script src="../../external/jquery.global.de-DE.js"></script>
11+
<script src="../../external/jquery.global.ja-JP.js"></script>
12+
<script src="../../ui/jquery.ui.core.js"></script>
13+
<script src="../../ui/jquery.ui.widget.js"></script>
14+
<script src="../../ui/jquery.ui.button.js"></script>
15+
<script src="../../ui/jquery.ui.spinner.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
1818
$(function() {
19-
$("#currency").change(function() {
20-
var current = $("#spinner").spinner("value");
21-
$.global.preferCulture($(this).val());
22-
$("#spinner").spinner("value", current);
23-
})
24-
25-
$("#spinner").spinner({
19+
$( "#currency" ).change(function() {
20+
var current = $( "#spinner" ).spinner( "value" );
21+
$.global.preferCulture( $(this).val() );
22+
$( "#spinner" ).spinner( "value", current );
23+
});
24+
25+
$( "#spinner" ).spinner({
2626
min: 5,
2727
max: 2500,
2828
step: 25,
2929
start: 1000,
3030
numberFormat: "C"
3131
});
32-
3332
});
3433
</script>
3534
</head>
@@ -47,15 +46,16 @@
4746
</p>
4847
<p>
4948
<label for="spinner">Amount to donate:</label>
50-
<input id="spinner" name="spinner" value="5" />
49+
<input id="spinner" name="spinner" value="5">
5150
</p>
52-
</div>
51+
52+
</div><!-- End demo -->
53+
54+
5355

5456
<div class="demo-description">
55-
<p>
56-
Example of a donation form, with currency selection and amout spinner.
57-
</p>
58-
</div>
57+
<p>Example of a donation form, with currency selection and amout spinner.</p>
58+
</div><!-- End demo-description -->
5959

6060
</body>
6161
</html>

‎demos/spinner/decimal.html

Lines changed: 29 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>jQuery UI Spinner - decimal</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
8-
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
9-
<script type="text/javascript" src="../../external/jquery.global.js"></script>
10-
<script type="text/javascript" src="../../external/jquery.global.de-DE.js"></script>
11-
<script type="text/javascript" src="../../external/jquery.global.ja-JP.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
14-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
15-
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
16-
<link type="text/css" href="../demos.css" rel="stylesheet" />
17-
<script type="text/javascript">
5+
<title>jQuery UI Spinner - Decimal</title>
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
9+
<script src="../../external/jquery.global.js"></script>
10+
<script src="../../external/jquery.global.de-DE.js"></script>
11+
<script src="../../external/jquery.global.ja-JP.js"></script>
12+
<script src="../../ui/jquery.ui.core.js"></script>
13+
<script src="../../ui/jquery.ui.widget.js"></script>
14+
<script src="../../ui/jquery.ui.button.js"></script>
15+
<script src="../../ui/jquery.ui.spinner.js"></script>
16+
<link rel="stylesheet" href="../demos.css">
17+
<script>
1818
$(function() {
19-
$("#spinner").spinner({
19+
$( "#spinner" ).spinner({
2020
step: 0.01,
2121
numberFormat: "n"
2222
});
23-
24-
$("#culture").change(function() {
25-
var current = $("#spinner").spinner("value");
26-
$.global.preferCulture($(this).val());
27-
$("#spinner").spinner("value", current);
28-
})
23+
24+
$( "#culture" ).change(function() {
25+
var current = $( "#spinner" ).spinner( "value" );
26+
$.global.preferCulture( $(this).val() );
27+
$( "#spinner" ).spinner( "value", current );
28+
});
2929
});
3030
</script>
3131
</head>
3232
<body>
3333

3434
<div class="demo">
35+
3536
<p>
3637
<label for="spinner">Decimal spinner:</label>
37-
<input id="spinner" name="spinner" value="5.06" />
38+
<input id="spinner" name="spinner" value="5.06">
3839
</p>
3940
<p>
4041
<label for="culture">Select a culture to use for formatting:</label>
@@ -44,16 +45,19 @@
4445
<option value="ja-JP">Japanese</option>
4546
</select>
4647
</p>
47-
</div>
48+
49+
</div><!-- End demo -->
50+
51+
4852

4953
<div class="demo-description">
5054
<p>
5155
Example of a decimal spinner. Step is set to 0.01.
52-
<br/>The code handling the culture change reads the current spinner value,
56+
<br>The code handling the culture change reads the current spinner value,
5357
then changes the culture, then sets the value again, resulting in an updated
5458
formatting, based on the new culture.
5559
</p>
56-
</div>
60+
</div><!-- End demo-description -->
5761

5862
</body>
5963
</html>

‎demos/spinner/default.html

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,66 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<title>jQuery UI Spinner - Default functionality</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
8-
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
9-
<script type="text/javascript" src="../../external/jquery.global.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
14-
<link type="text/css" href="../demos.css" rel="stylesheet" />
15-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.6.2.js"></script>
8+
<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
9+
<script src="../../ui/jquery.ui.core.js"></script>
10+
<script src="../../ui/jquery.ui.widget.js"></script>
11+
<script src="../../ui/jquery.ui.button.js"></script>
12+
<script src="../../ui/jquery.ui.spinner.js"></script>
13+
<link rel="stylesheet" href="../demos.css">
14+
<script>
1615
$(function() {
17-
$("#spinner").spinner({
18-
change: function() {
19-
console.log( "change" );
20-
}
21-
});
16+
var spinner = $( "#spinner" ).spinner();
2217

23-
$("#disable").toggle(function() {
24-
$("#spinner").spinner("disable");
18+
$( "#disable" ).toggle(function() {
19+
spinner.spinner( "disable" );
2520
}, function() {
26-
$("#spinner").spinner("enable");
21+
spinner.spinner( "enable" );
2722
});
28-
$("#destroy").toggle(function() {
29-
$("#spinner").spinner("destroy");
23+
$( "#destroy" ).toggle(function() {
24+
spinner.spinner( "destroy" );
3025
}, function() {
31-
$("#spinner").spinner();
26+
spinner.spinner();
3227
});
33-
$("#getvalue").click(function() {
34-
alert($("#spinner").spinner("value"));
28+
$( "#getvalue" ).click(function() {
29+
alert( spinner.spinner( "value" ) );
3530
});
36-
$("#setvalue").click(function() {
37-
$("#spinner").spinner("value", 5);
31+
$( "#setvalue" ).click(function() {
32+
spinner.spinner( "value", 5 );
3833
});
39-
40-
$("button").button();
34+
35+
$( "button" ).button();
4136
});
4237
</script>
4338
</head>
4439
<body>
4540

4641
<div class="demo">
4742

48-
<p><label for="spinner">Select a value:</label>
49-
<input id="spinner" name="value" /></p>
43+
<p>
44+
<label for="spinner">Select a value:</label>
45+
<input id="spinner" name="value">
46+
</p>
5047

5148
<p>
52-
<button id="disable">Toggle disable/enable</button>
53-
<button id="destroy">Toggle widget</button>
49+
<button id="disable">Toggle disable/enable</button>
50+
<button id="destroy">Toggle widget</button>
5451
</p>
5552

5653
<p>
57-
<button id="getvalue">Get value</button>
58-
<button id="setvalue">Set value to 5</button>
54+
<button id="getvalue">Get value</button>
55+
<button id="setvalue">Set value to 5</button>
5956
</p>
6057

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

60+
61+
6362
<div class="demo-description">
64-
<p>
65-
Default spinner.
66-
</p>
63+
<p>Default spinner.</p>
6764
</div><!-- End demo-description -->
6865

6966
</body>

‎demos/spinner/index.html

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
4+
<meta charset="utf-8">
45
<title>jQuery UI Spinner Demos</title>
5-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
67
</head>
78
<body>
8-
<div class="demos-nav">
9-
<h4>Examples</h4>
10-
<ul>
11-
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
12-
<li><a href="decimal.html">Decimal</a></li>
13-
<li><a href="currency.html">Currency</a></li>
14-
<li><a href="latlong.html">Map</a></li>
15-
<li><a href="time.html">Time</a></li>
16-
<li><a href="overflow.html">Overflow</a></li>
17-
</ul>
18-
</div>
9+
10+
<div class="demos-nav">
11+
<h4>Examples</h4>
12+
<ul>
13+
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
14+
<li><a href="decimal.html">Decimal</a></li>
15+
<li><a href="currency.html">Currency</a></li>
16+
<li><a href="latlong.html">Map</a></li>
17+
<li><a href="time.html">Time</a></li>
18+
<li><a href="overflow.html">Overflow</a></li>
19+
</ul>
20+
</div>
21+
1922
</body>
2023
</html>

‎demos/spinner/latlong.html

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,62 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
55
<title>jQuery UI Spinner - Map</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
8-
<script type="text/javascript" src="../../jquery-1.6.2.js"></script>
9-
<script type="text/javascript" src="../../external/jquery.mousewheel-3.0.4.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
12-
<script type="text/javascript" src="../../ui/jquery.ui.button.js"></script>
13-
<script type="text/javascript" src="../../ui/jquery.ui.spinner.js"></script>
14-
<link type="text/css" href="../demos.css" rel="stylesheet" />
15-
<script type="text/javascript">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
8+
<script src="../../jquery-1.6.2.js"></script>
9+
<script src="../../external/jquery.mousewheel-3.0.4.js"></script>
10+
<script src="../../ui/jquery.ui.core.js"></script>
11+
<script src="../../ui/jquery.ui.widget.js"></script>
12+
<script src="../../ui/jquery.ui.button.js"></script>
13+
<script src="../../ui/jquery.ui.spinner.js"></script>
14+
<link rel="stylesheet" href="../demos.css">
15+
<script>
1616
$(function() {
1717
function latlong() {
18-
return new google.maps.LatLng($("#lat").val(),$("#lng").val());
18+
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
1919
}
2020
function position() {
21-
map.setCenter(latlong());
21+
map.setCenter( latlong() );
2222
}
23-
$("#lat, #lng").spinner({
23+
$( "#lat, #lng" ).spinner({
2424
precision: 6,
2525
change: position
2626
});
27-
28-
var map = new google.maps.Map($("#map")[0], {
27+
28+
var map = new google.maps.Map( $("#map")[0], {
2929
zoom: 8,
3030
center: latlong(),
3131
mapTypeId: google.maps.MapTypeId.ROADMAP
3232
});
3333
});
3434
</script>
3535
<style>
36-
#map { width:500px; height:500px; }
36+
#map {
37+
width:500px;
38+
height:500px;
39+
}
3740
</style>
3841
</head>
3942
<body>
4043

4144
<div class="demo">
4245

4346
<label for="lat">Latitude</label>
44-
<input id="lat" name="lat" value="44.797916" />
45-
<br/>
47+
<input id="lat" name="lat" value="44.797916">
48+
<br>
4649
<label for="lng">Longitude</label>
47-
<input id="lng" name="lng" value="-93.278046" />
50+
<input id="lng" name="lng" value="-93.278046">
4851

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

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

56+
57+
5358
<div class="demo-description">
54-
<p>
55-
Google Maps integration, using spinners to change latidude and longitude.
56-
</p>
59+
<p>Google Maps integration, using spinners to change latidude and longitude.</p>
5760
</div><!-- End demo-description -->
5861

5962
</body>

0 commit comments

Comments
 (0)