This repository has been archived by the owner on Aug 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
maggiewachs
committed
Jan 17, 2012
0 parents
commit 97a98af
Showing
9 changed files
with
214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| /* page styles */ | ||
| body { font-family: "Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif; } | ||
| fieldset { margin-top: 1em; margin-bottom: 1em; border:1px solid #ddd; } | ||
| legend { font-weight:bold; } | ||
| label { margin-right:1.2em; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| /* page styles */ | ||
| body { font-size:62.5%; } | ||
| fieldset { padding:1em 15px; } | ||
| legend { font-size:1.4em; font-weight:bold; padding:.2em 5px; } | ||
|
|
||
| /* Custom checkboxes, radios */ | ||
|
|
||
| /* wrapper divs */ | ||
| .custom-checkbox,.custom-radio { position:relative; } | ||
|
|
||
| /* input, label positioning */ | ||
| .custom-checkbox input,.custom-radio input { position:absolute; left:2px; top:2px; margin:0; } | ||
| .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; } | ||
|
|
||
| /* states */ | ||
| .custom-checkbox label { background:url(../images/checkbox.gif) no-repeat; } | ||
| .custom-radio label { background:url(../images/radiobutton.gif) no-repeat; } | ||
| .custom-checkbox label,.custom-radio label { background-position:-10px -14px; } | ||
| .custom-checkbox label.hover,.custom-checkbox label.focus,.custom-radio label.hover,.custom-radio label.focus { background-position:-10px -114px; } | ||
| .custom-checkbox label.checked,.custom-radio label.checked { background-position:-10px -214px; } | ||
| .custom-checkbox label.checkedHover,.custom-checkbox label.checkedFocus { background-position:-10px -314px; } | ||
| .custom-checkbox label.focus,.custom-radio label.focus { outline:1px dotted #ccc; } | ||
|
|
||
| /*toggle button examples*/ | ||
| #view { width:100px; display: block; } | ||
| #view .custom-checkbox,#view .custom-radio { width:50%; float:left; } | ||
| #show { width:250px; display: block; clear: left; } | ||
| #show .custom-checkbox,#show .custom-radio { width:33%; float:left; } | ||
| .toggle label { border-collapse:collapse; } | ||
| .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; } | ||
| .toggle .custom-checkbox label.hover, | ||
| .toggle .custom-checkbox label.focus, | ||
| .toggle .custom-radio label.hover, | ||
| .toggle .custom-radio label.focus { background-position: right center; border-color:#205b00; } | ||
| .toggle .custom-checkbox label.checked, | ||
| .toggle .custom-radio label.checked, | ||
| .toggle .custom-checkbox label.checkedHover, | ||
| .toggle .custom-checkbox label.checkedFocus { background:#2d7406; border-color:#2d7406; } | ||
| .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; } | ||
| .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; } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | ||
| <title>Custom input</title> | ||
| <link href="css/basic.css" type="text/css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script> | ||
| <script type="text/javascript"> | ||
| // Run capabilities test | ||
| enhance({ | ||
| loadScripts: [ | ||
| '../-shared/jquery.min.js', | ||
| 'js/jQuery.customInput.js', | ||
| 'js/example.js' | ||
| ], | ||
| loadStyles: ['css/enhanced.css'] | ||
| }); | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
|
|
||
| <form action="#" method="post"> | ||
| <fieldset> | ||
| <legend>Which genres do you like?</legend> | ||
| <input type="checkbox" name="genre" id="action" value="action" /> | ||
| <label for="action">Action / Adventure</label> | ||
|
|
||
| <input type="checkbox" name="genre" id="comedy" value="comedy" /> | ||
| <label for="comedy">Comedy</label> | ||
|
|
||
| <input type="checkbox" name="genre" id="check-3" value="epic" /> | ||
| <label for="check-3">Epic / Historical</label> | ||
|
|
||
| <input type="checkbox" name="genre" id="science" value="science" /> | ||
| <label for="science">Science Fiction</label> | ||
|
|
||
| <input type="checkbox" name="genre" id="romance" value="romance" /> | ||
| <label for="romance">Romance</label> | ||
|
|
||
| <input type="checkbox" name="genre" id="western" value="western" /> | ||
| <label for="western">Western</label> | ||
| </fieldset> | ||
|
|
||
| <fieldset> | ||
| <legend>Caddyshack is the greatest movie of all time, right?</legend> | ||
| <input type="radio" name="opinions" id="totally" value="totally" /> | ||
| <label for="totally">Totally</label> | ||
|
|
||
| <input type="radio" name="opinions" id="no-way" value="no-way" /> | ||
| <label for="no-way">You must be kidding</label> | ||
|
|
||
| <input type="radio" name="opinions" id="whats-caddyshack" value="whats-caddyshack" /> | ||
| <label for="whats-caddyshack">What's Caddyshack?</label> | ||
| </fieldset> | ||
| <fieldset> | ||
| <input type="submit" name="submit" value="submit" /> | ||
| </fieldset> | ||
| </form> | ||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| // Run the script on DOM ready: | ||
| $(function(){ | ||
| $('input').customInput(); | ||
|
|
||
| $('.toggle').each(function(){ | ||
| $('div:first',this).addClass('first'); | ||
| $('div:last',this).addClass('last'); | ||
| }); | ||
|
|
||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /** | ||
| * -------------------------------------------------------------------- | ||
| * jQuery customInput plugin | ||
| * Author: Maggie Costello Wachs [email protected], Scott Jehl, [email protected] | ||
| * Copyright (c) 2009 Filament Group | ||
| * licensed under MIT (filamentgroup.com/examples/mit-license.txt) | ||
| * -------------------------------------------------------------------- | ||
| */ | ||
| jQuery.fn.customInput = function(){ | ||
| return $(this).each(function(){ | ||
| if($(this).is('[type=checkbox],[type=radio]')){ | ||
| var input = $(this); | ||
|
|
||
| // get the associated label using the input's id | ||
| var label = $('label[for='+input.attr('id')+']'); | ||
|
|
||
| // wrap the input + label in a div | ||
| input.add(label).wrapAll('<div class="custom-'+ input.attr('type') +'"></div>'); | ||
|
|
||
| // necessary for browsers that don't support the :hover pseudo class on labels | ||
| label.hover( | ||
| function(){ $(this).addClass('hover'); }, | ||
| function(){ $(this).removeClass('hover'); } | ||
| ); | ||
|
|
||
| //bind custom event, trigger it, bind click,focus,blur events | ||
| input.bind('updateState', function(){ | ||
| input.is(':checked') ? label.addClass('checked') : label.removeClass('checked checkedHover checkedFocus'); | ||
| }) | ||
| .trigger('updateState') | ||
| .click(function(){ | ||
| $('input[name='+ $(this).attr('name') +']').trigger('updateState'); | ||
| }) | ||
| .focus(function(){ | ||
| label.addClass('focus'); | ||
| if(input.is(':checked')){ $(this).addClass('checkedFocus'); } | ||
| }) | ||
| .blur(function(){ label.removeClass('focus checkedFocus'); }); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
|
|
||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> | ||
| <title>Custom input</title> | ||
| <link href="css/basic.css" type="text/css" rel="stylesheet" /> | ||
| <script type="text/javascript" src="../-shared/EnhanceJS/enhance.js"></script> | ||
| <script type="text/javascript"> | ||
| // Run capabilities test | ||
| enhance({ | ||
| loadScripts: [ | ||
| '../-shared/jquery.min.js', | ||
| 'js/jQuery.customInput.js', | ||
| 'js/example.js' | ||
| ], | ||
| loadStyles: ['css/enhanced.css'] | ||
| }); | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
|
|
||
| <form action="#" method="post"> | ||
| <fieldset id="view" class="toggle"> | ||
| <legend>Choose view:</legend> | ||
| <input type="radio" name="view" id="view-list" value="list" /> | ||
| <label for="view-list">List</label> | ||
| <input type="radio" name="view" id="view-grid" value="grid" /> | ||
| <label for="view-grid">Grid</label> | ||
| </fieldset> | ||
|
|
||
|
|
||
| <fieldset id="show" class="toggle"> | ||
| <legend>Show:</legend> | ||
| <input type="checkbox" name="show" id="show-comments" value="comments" /> | ||
| <label for="show-comments">Comments</label> | ||
| <input type="checkbox" name="show" id="show-formatting" value="formatting" /> | ||
| <label for="show-formatting">Formatting</label> | ||
| <input type="checkbox" name="show" id="show-changes" value="changes" /> | ||
| <label for="show-changes">Changes</label> | ||
| </fieldset> | ||
|
|
||
| </form> | ||
|
|
||
|
|
||
|
|
||
| </body> | ||
| </html> |