Skip to content

Commit 97a98af

Browse files
author
maggiewachs
committedJan 17, 2012
initial upload
0 parents  commit 97a98af

9 files changed

+214
-0
lines changed
 

‎css/basic.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* page styles */
2+
body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; }
3+
fieldset { margin-top: 1em; margin-bottom: 1em; border:1px solid #ddd; }
4+
legend { font-weight:bold; }
5+
label { margin-right:1.2em; }

‎css/enhanced.css

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
/* page styles */
2+
body { font-size:62.5%; }
3+
fieldset { padding:1em 15px; }
4+
legend { font-size:1.4em; font-weight:bold; padding:.2em 5px; }
5+
6+
/* Custom checkboxes, radios */
7+
8+
/* wrapper divs */
9+
.custom-checkbox,.custom-radio { position:relative; }
10+
11+
/* input, label positioning */
12+
.custom-checkbox input,.custom-radio input { position:absolute; left:2px; top:2px; margin:0; }
13+
.custom-checkbox label,.custom-radio label { display:block; position:relative; font-size:1.3em; padding-right:1em; line-height:1; padding:.5em 0 .5em 30px; margin:0 0 .3em; cursor:pointer; }
14+
15+
/* states */
16+
.custom-checkbox label { background:url(../images/checkbox.gif) no-repeat; }
17+
.custom-radio label { background:url(../images/radiobutton.gif) no-repeat; }
18+
.custom-checkbox label,.custom-radio label { background-position:-10px -14px; }
19+
.custom-checkbox label.hover,.custom-checkbox label.focus,.custom-radio label.hover,.custom-radio label.focus { background-position:-10px -114px; }
20+
.custom-checkbox label.checked,.custom-radio label.checked { background-position:-10px -214px; }
21+
.custom-checkbox label.checkedHover,.custom-checkbox label.checkedFocus { background-position:-10px -314px; }
22+
.custom-checkbox label.focus,.custom-radio label.focus { outline:1px dotted #ccc; }
23+
24+
/*toggle button examples*/
25+
#view { width:100px; display: block; }
26+
#view .custom-checkbox,#view .custom-radio { width:50%; float:left; }
27+
#show { width:250px; display: block; clear: left; }
28+
#show .custom-checkbox,#show .custom-radio { width:33%; float:left; }
29+
.toggle label { border-collapse:collapse; }
30+
.toggle .custom-checkbox label,.toggle .custom-radio label { padding:.4em 1em; border:1px solid #aaa; background-color:#eee; text-align:center; cursor:pointer; font-size:1.2em; width:auto; overflow:visible; background:#459e00 url(../images/button-green.gif) no-repeat left center; color:#fff; border-color:#2d7406; text-shadow:-1px -1px 0 #37730e; }
31+
.toggle .custom-checkbox label.hover,
32+
.toggle .custom-checkbox label.focus,
33+
.toggle .custom-radio label.hover,
34+
.toggle .custom-radio label.focus { background-position: right center; border-color:#205b00; }
35+
.toggle .custom-checkbox label.checked,
36+
.toggle .custom-radio label.checked,
37+
.toggle .custom-checkbox label.checkedHover,
38+
.toggle .custom-checkbox label.checkedFocus { background:#2d7406; border-color:#2d7406; }
39+
.toggle .first label { -moz-border-radius-bottomleft:7px; -webkit-border-bottom-left-radius:7px; border-bottom-left-radius:7px; -moz-border-radius-topleft:7px; -webkit-border-top-left-radius:7px; border-top-left-radius:7px; }
40+
.toggle .last label { -moz-border-radius-bottomright:7px; -webkit-border-bottom-right-radius:7px; border-bottom-right-radius:7px; -moz-border-radius-topright:7px; -webkit-border-top-right-radius:7px; border-top-right-radius:7px; }

‎images/button-green.gif

2.37 KB
Loading

‎images/checkbox.gif

2.23 KB
Loading

‎images/radiobutton.gif

1.8 KB
Loading

‎index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5+
<title>Custom input</title>
6+
<link href="css/basic.css" type="text/css" rel="stylesheet" />
7+
<script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script>
8+
<script type="text/javascript">
9+
// Run capabilities test
10+
enhance({
11+
loadScripts: [
12+
'../-shared/jquery.min.js',
13+
'js/jQuery.customInput.js',
14+
'js/example.js'
15+
],
16+
loadStyles: ['css/enhanced.css']
17+
});
18+
</script>
19+
</head>
20+
21+
<body>
22+
23+
24+
<form action="#" method="post">
25+
<fieldset>
26+
<legend>Which genres do you like?</legend>
27+
<input type="checkbox" name="genre" id="action" value="action" />
28+
<label for="action">Action / Adventure</label>
29+
30+
<input type="checkbox" name="genre" id="comedy" value="comedy" />
31+
<label for="comedy">Comedy</label>
32+
33+
<input type="checkbox" name="genre" id="check-3" value="epic" />
34+
<label for="check-3">Epic / Historical</label>
35+
36+
<input type="checkbox" name="genre" id="science" value="science" />
37+
<label for="science">Science Fiction</label>
38+
39+
<input type="checkbox" name="genre" id="romance" value="romance" />
40+
<label for="romance">Romance</label>
41+
42+
<input type="checkbox" name="genre" id="western" value="western" />
43+
<label for="western">Western</label>
44+
</fieldset>
45+
46+
<fieldset>
47+
<legend>Caddyshack is the greatest movie of all time, right?</legend>
48+
<input type="radio" name="opinions" id="totally" value="totally" />
49+
<label for="totally">Totally</label>
50+
51+
<input type="radio" name="opinions" id="no-way" value="no-way" />
52+
<label for="no-way">You must be kidding</label>
53+
54+
<input type="radio" name="opinions" id="whats-caddyshack" value="whats-caddyshack" />
55+
<label for="whats-caddyshack">What's Caddyshack?</label>
56+
</fieldset>
57+
<fieldset>
58+
<input type="submit" name="submit" value="submit" />
59+
</fieldset>
60+
</form>
61+
62+
63+
64+
</body>
65+
</html>

‎js/example.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// Run the script on DOM ready:
2+
$(function(){
3+
$('input').customInput();
4+
5+
$('.toggle').each(function(){
6+
$('div:first',this).addClass('first');
7+
$('div:last',this).addClass('last');
8+
});
9+
10+
});

‎js/jQuery.customInput.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
/**
2+
* --------------------------------------------------------------------
3+
* jQuery customInput plugin
4+
* Author: Maggie Costello Wachs maggie@filamentgroup.com, Scott Jehl, scott@filamentgroup.com
5+
* Copyright (c) 2009 Filament Group
6+
* licensed under MIT (filamentgroup.com/examples/mit-license.txt)
7+
* --------------------------------------------------------------------
8+
*/
9+
jQuery.fn.customInput = function(){
10+
return $(this).each(function(){
11+
if($(this).is('[type=checkbox],[type=radio]')){
12+
var input = $(this);
13+
14+
// get the associated label using the input's id
15+
var label = $('label[for='+input.attr('id')+']');
16+
17+
// wrap the input + label in a div
18+
input.add(label).wrapAll('<div class="custom-'+ input.attr('type') +'"></div>');
19+
20+
// necessary for browsers that don't support the :hover pseudo class on labels
21+
label.hover(
22+
function(){ $(this).addClass('hover'); },
23+
function(){ $(this).removeClass('hover'); }
24+
);
25+
26+
//bind custom event, trigger it, bind click,focus,blur events
27+
input.bind('updateState', function(){
28+
input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus');
29+
})
30+
.trigger('updateState')
31+
.click(function(){
32+
$('input[name='+ $(this).attr('name') +']').trigger('updateState');
33+
})
34+
.focus(function(){
35+
label.addClass('focus');
36+
if(input.is(':checked')){ $(this).addClass('checkedFocus'); }
37+
})
38+
.blur(function(){ label.removeClass('focus checkedFocus'); });
39+
}
40+
});
41+
};
42+
43+
44+
45+

‎toggle-buttons.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE HTML>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
5+
<title>Custom input</title>
6+
<link href="css/basic.css" type="text/css" rel="stylesheet" />
7+
<script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script>
8+
<script type="text/javascript">
9+
// Run capabilities test
10+
enhance({
11+
loadScripts: [
12+
'../-shared/jquery.min.js',
13+
'js/jQuery.customInput.js',
14+
'js/example.js'
15+
],
16+
loadStyles: ['css/enhanced.css']
17+
});
18+
</script>
19+
</head>
20+
21+
<body>
22+
23+
24+
<form action="#" method="post">
25+
<fieldset id="view" class="toggle">
26+
<legend>Choose view:</legend>
27+
<input type="radio" name="view" id="view-list" value="list" />
28+
<label for="view-list">List</label>
29+
<input type="radio" name="view" id="view-grid" value="grid" />
30+
<label for="view-grid">Grid</label>
31+
</fieldset>
32+
33+
34+
<fieldset id="show" class="toggle">
35+
<legend>Show:</legend>
36+
<input type="checkbox" name="show" id="show-comments" value="comments" />
37+
<label for="show-comments">Comments</label>
38+
<input type="checkbox" name="show" id="show-formatting" value="formatting" />
39+
<label for="show-formatting">Formatting</label>
40+
<input type="checkbox" name="show" id="show-changes" value="changes" />
41+
<label for="show-changes">Changes</label>
42+
</fieldset>
43+
44+
</form>
45+
46+
47+
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.