Skip to content

Commit 8b4d187

Browse files
scottgonzalezscottgonzalez
committed
Button demos: Coding standards.
1 parent eba3067 commit 8b4d187

7 files changed

Lines changed: 150 additions & 186 deletions

File tree

‎demos/button/checkbox.html‎

Lines changed: 19 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,44 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Button - Checkboxes demo</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.button.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Checkboxes</title>
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.button.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
1313
$(function() {
14-
$("#check").button();
15-
$("#format").buttonset();
14+
$( "#check" ).button();
15+
$( "#format" ).buttonset();
1616
});
1717
</script>
1818
<style>
19-
#format { margin-top: 2em; }
19+
#format { margin-top: 2em; }
2020
</style>
2121
</head>
2222
<body>
2323

2424
<div class="demo">
2525

26-
<input type="checkbox" id="check" /><label for="check">Toggle</label>
27-
28-
<div id="format">
29-
<input type="checkbox" id="check1" /><label for="check1">B</label>
30-
<input type="checkbox" id="check2" /><label for="check2">I</label>
31-
<input type="checkbox" id="check3" /><label for="check3">U</label>
32-
</div>
26+
<input type="checkbox" id="check" /><label for="check">Toggle</label>
27+
28+
<div id="format">
29+
<input type="checkbox" id="check1" /><label for="check1">B</label>
30+
<input type="checkbox" id="check2" /><label for="check2">I</label>
31+
<input type="checkbox" id="check3" /><label for="check3">U</label>
32+
</div>
3333

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

3636

3737

3838
<div class="demo-description">
39-
4039
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
41-
4240
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
43-
4441
</div><!-- End demo-description -->
4542

46-
47-
4843
</body>
4944
</html>

‎demos/button/default.html‎

Lines changed: 16 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,38 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Button - Default demo</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.button.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Default functionality</title>
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.button.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
1313
$(function() {
14-
$("button, input:submit, a", ".demo").button();
15-
16-
$("a", ".demo").click(function() { return false; });
14+
$( "button, input:submit, a", ".demo" ).button();
15+
$( "a", ".demo" ).click(function() { return false; });
1716
});
1817
</script>
19-
<style>
20-
21-
</style>
2218
</head>
2319
<body>
2420

2521
<div class="demo">
2622

27-
<button>A button element</button>
28-
29-
<input type="submit" value="A submit button"/>
30-
31-
<a href="#">An anchor</a>
23+
<button>A button element</button>
24+
25+
<input type="submit" value="A submit button"/>
26+
27+
<a href="#">An anchor</a>
3228

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

3531

3632

3733
<div class="demo-description">
38-
3934
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
40-
4135
</div><!-- End demo-description -->
4236

43-
44-
4537
</body>
4638
</html>

‎demos/button/icons.html‎

Lines changed: 20 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,56 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Button - Icons demo</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.button.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Icons</title>
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.button.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
1313
$(function() {
14-
$(".demo button:first").button({
14+
$( ".demo button:first" ).button({
1515
icons: {
16-
primary: 'ui-icon-locked'
16+
primary: "ui-icon-locked"
1717
},
1818
text: false
1919
}).next().button({
2020
icons: {
21-
primary: 'ui-icon-locked'
21+
primary: "ui-icon-locked"
2222
}
2323
}).next().button({
2424
icons: {
25-
primary: 'ui-icon-gear',
26-
secondary: 'ui-icon-triangle-1-s'
25+
primary: "ui-icon-gear",
26+
secondary: "ui-icon-triangle-1-s"
2727
}
2828
}).next().button({
2929
icons: {
30-
primary: 'ui-icon-gear',
31-
secondary: 'ui-icon-triangle-1-s'
30+
primary: "ui-icon-gear",
31+
secondary: "ui-icon-triangle-1-s"
3232
},
3333
text: false
3434
});
3535
});
3636
</script>
37-
<style>
38-
39-
</style>
4037
</head>
4138
<body>
4239

4340
<div class="demo">
4441

45-
<button>Button with icon only</button>
46-
<button>Button with icon on the left</button>
47-
<button>Button with two icons</button>
48-
<button>Button with two icons and no text</button>
42+
<button>Button with icon only</button>
43+
<button>Button with icon on the left</button>
44+
<button>Button with two icons</button>
45+
<button>Button with two icons and no text</button>
4946

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

5249

5350

5451
<div class="demo-description">
55-
5652
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
57-
5853
</div><!-- End demo-description -->
5954

60-
61-
6255
</body>
6356
</html>

‎demos/button/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 Button 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/button/radio.html‎

Lines changed: 17 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,39 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Button - Radio Buttons demo</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.button.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Radios</title>
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.button.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
1313
$(function() {
14-
$("#radio").buttonset();
14+
$( "#radio" ).buttonset();
1515
});
1616
</script>
17-
<style>
18-
19-
</style>
2017
</head>
2118
<body>
2219

2320
<div class="demo">
2421

25-
<form>
26-
<div id="radio">
27-
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
28-
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
29-
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
30-
</div>
31-
</form>
22+
<form>
23+
<div id="radio">
24+
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
25+
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
26+
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
27+
</div>
28+
</form>
3229

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

3532

3633

3734
<div class="demo-description">
38-
3935
<p>A set of three radio buttons transformed into a button set.</p>
40-
4136
</div><!-- End demo-description -->
4237

43-
44-
4538
</body>
4639
</html>

‎demos/button/splitbutton.html‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<title>jQuery UI Button - Default demo</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.button.js"></script>
11-
<link type="text/css" href="../demos.css" rel="stylesheet" />
12-
<script type="text/javascript">
4+
<meta charset="utf-8">
5+
<title>jQuery UI Button - Split button</title>
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.button.js"></script>
11+
<link rel="stylesheet" href="../demos.css">
12+
<script>
1313
$(function() {
14-
$("#rerun")
14+
$( "#rerun" )
1515
.button()
16-
.click( function() {
16+
.click(function() {
1717
alert( "Running the last action" );
1818
})
19-
.next()
20-
.button( {
21-
text: false,
22-
icons: {
23-
primary: "ui-icon-triangle-1-s"
24-
}
25-
})
26-
.click( function() {
27-
alert( "Could display a menu to select an action" );
28-
})
29-
.parent()
30-
.buttonset();
19+
.next()
20+
.button( {
21+
text: false,
22+
icons: {
23+
primary: "ui-icon-triangle-1-s"
24+
}
25+
})
26+
.click(function() {
27+
alert( "Could display a menu to select an action" );
28+
})
29+
.parent()
30+
.buttonset();
3131
});
3232
</script>
3333
<style>
@@ -38,23 +38,18 @@
3838

3939
<div class="demo">
4040

41-
<div>
42-
<button id="rerun">Run last action</button>
43-
<button id="select">Select an action</button>
44-
</div>
41+
<div>
42+
<button id="rerun">Run last action</button>
43+
<button id="select">Select an action</button>
44+
</div>
4545

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

4848

4949

5050
<div class="demo-description">
51-
52-
<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon
53-
and no text. Both are grouped together in a set.</p>
54-
51+
<p>An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.</p>
5552
</div><!-- End demo-description -->
5653

57-
58-
5954
</body>
6055
</html>

0 commit comments

Comments
 (0)