Skip to content

Commit 060af83

Browse files
scottgonzalezscottgonzalez
committed
Slider demos: Coding standards.
1 parent 3e225de commit 060af83

13 files changed

Lines changed: 289 additions & 285 deletions

‎demos/slider/colorpicker.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Slider - Colorpicker</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.slider.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
1414
#red, #green, #blue {
1515
float: left;
1616
clear: left;
@@ -32,39 +32,39 @@
3232
#blue .ui-slider-handle { border-color: #729fcf; }
3333
#demo-frame > div.demo { padding: 10px !important; };
3434
</style>
35-
<script type="text/javascript">
36-
function hexFromRGB (r, g, b) {
35+
<script>
36+
function hexFromRGB(r, g, b) {
3737
var hex = [
38-
r.toString(16),
39-
g.toString(16),
40-
b.toString(16)
38+
r.toString( 16 ),
39+
g.toString( 16 ),
40+
b.toString( 16 )
4141
];
42-
$.each(hex, function (nr, val) {
43-
if (val.length == 1) {
44-
hex[nr] = '0' + val;
42+
$.each( hex, function( nr, val ) {
43+
if ( val.length === 1 ) {
44+
hex[ nr ] = "0" + val;
4545
}
4646
});
47-
return hex.join('').toUpperCase();
47+
return hex.join( "" ).toUpperCase();
4848
}
4949
function refreshSwatch() {
50-
var red = $("#red").slider("value")
51-
,green = $("#green").slider("value")
52-
,blue = $("#blue").slider("value")
53-
,hex = hexFromRGB(red, green, blue);
54-
$("#swatch").css("background-color", "#" + hex);
50+
var red = $( "#red" ).slider( "value" ),
51+
green = $( "#green" ).slider( "value" ),
52+
blue = $( "#blue" ).slider( "value" ),
53+
hex = hexFromRGB( red, green, blue );
54+
$( "#swatch" ).css( "background-color", "#" + hex );
5555
}
5656
$(function() {
57-
$("#red, #green, #blue").slider({
58-
orientation: 'horizontal',
57+
$( "#red, #green, #blue" ).slider({
58+
orientation: "horizontal",
5959
range: "min",
6060
max: 255,
6161
value: 127,
6262
slide: refreshSwatch,
6363
change: refreshSwatch
6464
});
65-
$("#red").slider("value", 255);
66-
$("#green").slider("value", 140);
67-
$("#blue").slider("value", 60);
65+
$( "#red" ).slider( "value", 255 );
66+
$( "#green" ).slider( "value", 140 );
67+
$( "#blue" ).slider( "value", 60 );
6868
});
6969
</script>
7070
</head>
@@ -73,8 +73,8 @@
7373
<div class="demo">
7474

7575
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
76-
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
77-
Simple Colorpicker
76+
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
77+
Simple Colorpicker
7878
</p>
7979

8080
<div id="red"></div>
@@ -85,10 +85,10 @@
8585

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

88-
<div class="demo-description" style="clear:left;">
8988

90-
<p>Combine three sliders to create a simple RGB colorpicker.</p>
9189

90+
<div class="demo-description" style="clear:left;">
91+
<p>Combine three sliders to create a simple RGB colorpicker.</p>
9292
</div><!-- End demo-description -->
9393

9494
</body>

‎demos/slider/default.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8" >
55
<title>jQuery UI Slider - 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.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
14-
#demo-frame > div.demo { padding: 10px !important; }
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.slider.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
#demo-frame > div.demo { padding: 10px !important; }
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
$("#slider").slider();
18+
$( "#slider" ).slider();
1919
});
2020
</script>
2121
</head>
@@ -27,10 +27,10 @@
2727

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

30-
<div class="demo-description">
3130

32-
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
3331

32+
<div class="demo-description">
33+
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
3434
</div><!-- End demo-description -->
3535

3636
</body>

‎demos/slider/hotelrooms.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Slider - Range with fixed minimum</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
14-
#demo-frame > div.demo { padding: 10px !important; };
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.slider.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
#demo-frame > div.demo { padding: 10px !important; };
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
var select = $("#minbeds");
19-
var slider = $('<div id="slider"></div>').insertAfter(select).slider({
18+
var select = $( "#minbeds" );
19+
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
2020
min: 1,
2121
max: 6,
2222
range: "min",
23-
value: select[0].selectedIndex + 1,
24-
slide: function(event, ui) {
25-
select[0].selectedIndex = ui.value - 1;
23+
value: select[ 0 ].selectedIndex + 1,
24+
slide: function( event, ui ) {
25+
select[ 0 ].selectedIndex = ui.value - 1;
2626
}
2727
});
28-
$("#minbeds").click(function() {
29-
slider.slider("value", this.selectedIndex + 1);
28+
$( "#minbeds" ).change(function() {
29+
slider.slider( "value", this.selectedIndex + 1 );
3030
});
3131
});
3232
</script>
@@ -49,10 +49,10 @@
4949

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

52-
<div class="demo-description">
5352

54-
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
5553

54+
<div class="demo-description">
55+
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
5656
</div><!-- End demo-description -->
5757

5858
</body>

‎demos/slider/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Slider Demos</title>
6-
<link type="text/css" href="../demos.css" rel="stylesheet" />
6+
<link rel="stylesheet" href="../demos.css">
77
</head>
88
<body>
99

‎demos/slider/multiple-vertical.html‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,35 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Slider - Multiple sliders</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
14-
#demo-frame > div.demo { padding: 10px !important; }
15-
#eq span {
16-
height:120px; float:left; margin:15px
17-
}
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.slider.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
#demo-frame > div.demo { padding: 10px !important; }
15+
#eq span {
16+
height:120px; float:left; margin:15px
17+
}
1818
</style>
19-
<script type="text/javascript">
19+
<script>
2020
$(function() {
2121
// setup master volume
22-
$("#master").slider({
22+
$( "#master" ).slider({
2323
value: 60,
2424
orientation: "horizontal",
2525
range: "min",
2626
animate: true
2727
});
2828
// setup graphic EQ
29-
$("#eq > span").each(function() {
29+
$( "#eq > span" ).each(function() {
3030
// read initial values from markup and remove that
31-
var value = parseInt($(this).text());
32-
$(this).empty().slider({
31+
var value = parseInt( $( this ).text(), 10 );
32+
$( this ).empty().slider({
3333
value: value,
3434
range: "min",
3535
animate: true,
@@ -44,15 +44,15 @@
4444
<div class="demo">
4545

4646
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
47-
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
48-
Master volume
47+
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
48+
Master volume
4949
</p>
5050

5151
<div id="master" style="width:260px; margin:15px;"></div>
5252

5353
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
54-
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
55-
Graphic EQ
54+
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
55+
Graphic EQ
5656
</p>
5757

5858
<div id="eq">
@@ -67,10 +67,10 @@
6767

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

70-
<div class="demo-description" style="clear:left;">
7170

72-
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
7371

72+
<div class="demo-description" style="clear:left;">
73+
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
7474
</div><!-- End demo-description -->
7575

7676
</body>

‎demos/slider/range-vertical.html‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
4+
<meta charset="utf-8">
55
<title>jQuery UI Slider - Vertical range slider</title>
6-
<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
7-
<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
8-
<script type="text/javascript" src="../../ui/jquery.ui.core.js"></script>
9-
<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
10-
<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
11-
<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
12-
<link type="text/css" href="../demos.css" rel="stylesheet" />
13-
<style type="text/css">
14-
#demo-frame > div.demo { padding: 10px !important; };
6+
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
7+
<script src="../../jquery-1.4.2.js"></script>
8+
<script src="../../ui/jquery.ui.core.js"></script>
9+
<script src="../../ui/jquery.ui.widget.js"></script>
10+
<script src="../../ui/jquery.ui.mouse.js"></script>
11+
<script src="../../ui/jquery.ui.slider.js"></script>
12+
<link rel="stylesheet" href="../demos.css">
13+
<style>
14+
#demo-frame > div.demo { padding: 10px !important; };
1515
</style>
16-
<script type="text/javascript">
16+
<script>
1717
$(function() {
18-
$("#slider-range").slider({
18+
$( "#slider-range" ).slider({
1919
orientation: "vertical",
2020
range: true,
21-
values: [17, 67],
22-
slide: function(event, ui) {
23-
$("#amount").val('$' + ui.values[0] + ' - $' + ui.values[1]);
21+
values: [ 17, 67 ],
22+
slide: function( event, ui ) {
23+
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
2424
}
2525
});
26-
$("#amount").val('$' + $("#slider-range").slider("values", 0) + ' - $' + $("#slider-range").slider("values", 1));
26+
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
27+
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
2728
});
2829
</script>
2930
</head>
@@ -32,18 +33,18 @@
3233
<div class="demo">
3334

3435
<p>
35-
<label for="amount">Target sales goal (Millions):</label>
36-
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
36+
<label for="amount">Target sales goal (Millions):</label>
37+
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
3738
</p>
3839

3940
<div id="slider-range" style="height:250px;"></div>
4041

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

43-
<div class="demo-description">
4444

45-
<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
4645

46+
<div class="demo-description">
47+
<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
4748
</div><!-- End demo-description -->
4849

4950
</body>

0 commit comments

Comments
 (0)