Skip to content

Commit 1f0710d

Browse files
rdworthrdworth
committed
Minimal implementation and scaffolding for the checkbox widget. Markup and CSS based on Filament Group's awesome book 'Designing with Progressive Enhancement' Ch. 15
1 parent cad3fd7 commit 1f0710d

File tree

5 files changed

+140
-0
lines changed

5 files changed

+140
-0
lines changed

‎tests/static/checkbox/default.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Checkbox Static Test : Default</title>
6+
<link rel="stylesheet" href="../static.css" type="text/css" />
7+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.base.css" type="text/css" />
8+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.theme.css" type="text/css" title="ui-theme" />
9+
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
10+
<script type="text/javascript" src="../static.js"></script>
11+
</head>
12+
<body>
13+
14+
<div class="ui-checkbox">
15+
<input type="checkbox" id="check1">
16+
<label for="check1">Unchecked</label>
17+
</div>
18+
19+
<div class="ui-checkbox">
20+
<input type="checkbox" id="check2" checked="checked">
21+
<label for="check2">Checked</label>
22+
</div>
23+
24+
<div class="ui-checkbox">
25+
<input type="checkbox" id="check3" disabled="disabled">
26+
<label for="check3">Disabled</label>
27+
</div>
28+
29+
<div class="ui-checkbox">
30+
<input type="checkbox" id="check4" checked="checked" disabled="disabled">
31+
<label for="check4">Checked and disabled</label>
32+
</div>
33+
34+
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
35+
<script>
36+
$('<div/>').css({
37+
position: "absolute",
38+
right: 10,
39+
top: 10
40+
}).appendTo(document.body).themeswitcher();
41+
</script>
42+
</body>
43+
</html>

‎tests/visual/checkbox/default.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Checkbox Visual Test : Default</title>
6+
<link rel="stylesheet" href="../visual.css" type="text/css" />
7+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" />
8+
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
9+
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
10+
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
11+
<script type="text/javascript" src="../../../ui/jquery.ui.checkbox.js"></script>
12+
<script type="text/javascript">
13+
$(function() {
14+
$("#check1, #check2, #check3").checkbox();
15+
16+
});
17+
</script>
18+
</head>
19+
<body>
20+
21+
<form>
22+
23+
<input type="checkbox" id="check1" /><label for="check1">Check 1</label>
24+
25+
<input type="checkbox" id="check2" /><label for="check2">Check 2</label>
26+
27+
<input type="checkbox" id="check3" /><label for="check3">Check 3</label>
28+
29+
</form>
30+
31+
</body>
32+
</html>

‎themes/base/jquery.ui.base.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import url("jquery.ui.accordion.css");
44
@import url("jquery.ui.autocomplete.css");
55
@import url("jquery.ui.button.css");
6+
@import url("jquery.ui.checkbox.css");
67
@import url("jquery.ui.datepicker.css");
78
@import url("jquery.ui.dialog.css");
89
@import url("jquery.ui.progressbar.css");

‎themes/base/jquery.ui.checkbox.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* Checkbox
2+
----------------------------------*/
3+
.ui-checkbox { position: relative; }
4+
.ui-checkbox input { position: absolute; left: 2px; top: 2px; margin: 0; }
5+
.ui-checkbox label { display: block; position: relative; padding-right: 1em; line-height: 1; padding: .5em 0 .5em 30px; margin: 0 0 .3em; cursor: pointer; z-index: 1; }

‎ui/jquery.ui.checkbox.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* jQuery UI Checkbox @VERSION
3+
*
4+
* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
5+
* Dual licensed under the MIT (MIT-LICENSE.txt)
6+
* and GPL (GPL-LICENSE.txt) licenses.
7+
*
8+
* {{TODO replace with docs link once plugin is released}}
9+
* http://wiki.jqueryui.com/Checkbox
10+
* {{/TODO}}
11+
*
12+
* Depends:
13+
* jquery.ui.core.js
14+
* jquery.ui.widget.js
15+
*/
16+
(function( $ ) {
17+
18+
$.widget( "ui.checkbox", {
19+
20+
_create: function() {
21+
22+
this.labelElement = $( this.element[0].ownerDocument ).find( "label[for=" + this.element.attr("id") + "]" );
23+
24+
this.checkboxElement = this.element.wrap( "<div></div>" ).parent()
25+
.addClass("ui-checkbox")
26+
.append(this.labelElement);
27+
28+
},
29+
30+
widget: function() {
31+
return this.checkboxElement;
32+
},
33+
34+
destroy: function() {
35+
this.checkboxElement
36+
.after( this.labelElement ).end()
37+
.unwrap( "<div></div>" );
38+
39+
$.Widget.prototype.destroy.apply( this, arguments );
40+
},
41+
42+
_setOption: function( key, value ) {
43+
if ( key === "disabled" ) {
44+
this.element
45+
.attr( "disabled", value );
46+
this.checkboxElement
47+
[ value ? "addClass" : "removeClass" ]( "ui-checkbox-disabled" );
48+
}
49+
50+
$.Widget.prototype._setOption.apply( this, arguments );
51+
},
52+
53+
});
54+
55+
$.extend( $.ui.checkbox, {
56+
version: "@VERSION"
57+
});
58+
59+
}( jQuery ));

0 commit comments

Comments
 (0)