diff options
| author | Alexander Schmitz <arschmitz@gmail.com> | 2014-08-28 15:16:51 -0400 |
|---|---|---|
| committer | Alexander Schmitz <arschmitz@gmail.com> | 2015-10-07 10:57:59 -0400 |
| commit | 25d0c857188c19347c869f803530289762199f92 (patch) | |
| tree | 768afcbc456f878fb35e96546f468f9ffaa46b80 /tests/visual/checkboxradio | |
| parent | 02033262ee0fb1d9f33c361b3c2ddfa168604854 (diff) | |
| download | jquery-ui-25d0c857188c19347c869f803530289762199f92.tar.gz jquery-ui-25d0c857188c19347c869f803530289762199f92.zip | |
Checkboxradio: Initial commit of new widget
Diffstat (limited to 'tests/visual/checkboxradio')
| -rw-r--r-- | tests/visual/checkboxradio/checkboxradio.html | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/tests/visual/checkboxradio/checkboxradio.html b/tests/visual/checkboxradio/checkboxradio.html new file mode 100644 index 000000000..634e8df81 --- /dev/null +++ b/tests/visual/checkboxradio/checkboxradio.html @@ -0,0 +1,65 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>jQuery UI - Checkboxes</title> + <link rel="stylesheet" href="../../../themes/base/all.css"> + <script src="../../../external/jquery/jquery.js"></script> + <script src="../../../ui/core.js"></script> + <script src="../../../ui/widget.js"></script> + <script src="../../../ui/button.js"></script> + <script src="../../../ui/checkboxradio.js"></script> + <script> + $(function() { + var checkboxes = $( "form input" ).checkboxradio(); + + $( ".controls input, .controls select" ).on( "change keyup", function() { + var option = $( this ).attr( "name" ), + value = $( this ).val(); + + if ( $( this ).is( "[type=checkbox]" ) ) { + value = $( this ).is( ":checked" ); + } + if ( option != "label" || value !== "" ) { + checkboxes.checkboxradio( "option", option, value ); + } + }); + $( ".controls > button" ).click( function() { + if ( this.id !== "create" ) { + checkboxes.checkboxradio( this.id ); + } else { + checkboxes.checkboxradio(); + } + }); + }); + </script> + <style> + #format { margin-top: 2em; } + </style> +</head> +<body> +<h2> + Easy way to toggle through various combinations of options and states to make sure non lead to + a broken appearence. +</h2> +<div class="controls"> + <button id="create">Create</button> + <button id="destroy">Destroy</button> + <button id="enable">Enable</button> + <button id="disable">Disable</button> + <button id="refresh">Refresh</button> + <input type="checkbox" id="icon" name="icon" checked><label for="icon">Icon</label> + <input type="checkbox" id="disabled" name="disabled"><label for="disabled">Disabled</label> + <label for="label">Label<input type="text" id="label" name="label"></label> +</div> +<form> + <input type="checkbox" id="checkbox-1"> + <label for="checkbox-1">Checkbox widget sample</label> + <input type="checkbox" id="checkbox-2"><label for="checkbox-2">Checkbox widget sample</label> + + <label for="radio-1">Radio widget sample <input type="radio" id="radio-1" name="radio" checked></label> + <input type="radio" id="radio-2" name="radio"><label for="radio-2"><span>boom</span>Radio widget sample 2</label> + <button type="reset">Reset</button> +</form> +</body> +</html> |