corrade-http-templates – Rev 62

Subversion Repositories:
Rev:
<!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 none 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>