Skip to content

Commit

Permalink
Checkboxradio: Initial commit of new widget
Browse files Browse the repository at this point in the history
  • Loading branch information
@arschmitz
arschmitz committed Oct 7, 2015
1 parent 0203326 commit 25d0c85
Show file tree
Hide file tree
Showing 29 changed files with 1,741 additions and 3 deletions.
70 changes: 70 additions & 0 deletions demos/checkboxradio/default.html
View file
@@ -0,0 +1,70 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Default functionality</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/checkboxradio.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input" ).checkboxradio({
label: "foo"
});
});
</script>
</head>
<body>
<div class="widget">
<h1>Checkbox and radio button widgets</h1>

<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>

<h2>Checkbox</h2>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>

<h2>Checkbox nested in label</h2>
<fieldset>
<legend>Bed Type: </legend>
<label for="checkbox-nested-1">2 Double
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
</label>
<label for="checkbox-nested-2">2 Queen
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
</label>
<label for="checkbox-nested-3">1 Queen
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
</label>
<label for="checkbox-nested-4">1 King
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
</label>
</fieldset>
</div>

<div class="demo-description">
<p>Examples of the markup that can be used with checkboxes and radio buttons.</p>
</div>
</body>
</html>
Binary file added demos/checkboxradio/images/jquery-mobile.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/checkboxradio/images/jquery-ui.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/checkboxradio/images/jquery.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/checkboxradio/images/qunit.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/checkboxradio/images/sizzle.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18 changes: 18 additions & 0 deletions demos/checkboxradio/index.html
View file
@@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Checkboxradio Demos</title>
</head>
<body>

<ul>
<li><a href="default.html">Default functionality</a></li>
<li><a href="no-icons.html">No icons</a></li>
<li><a href="radiogroup.html">Radiogroup</a></li>
<li><a href="product-selector.html">Product Selector</a></li>
</ul>

</body>
</html>
70 changes: 70 additions & 0 deletions demos/checkboxradio/no-icons.html
View file
@@ -0,0 +1,70 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - No Icons</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/checkboxradio.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input" ).checkboxradio({
icon: false
});
});
</script>
</head>
<body>
<div class="widget">
<h1>Checkbox and radio button widgets</h1>

<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>

<h2>Checkbox</h2>
<fieldset>
<legend>Hotel Ratings: </legend>
<label for="checkbox-1">2 Star</label>
<input type="checkbox" name="checkbox-1" id="checkbox-1">
<label for="checkbox-2">3 Star</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2">
<label for="checkbox-3">4 Star</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3">
<label for="checkbox-4">5 Star</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4">
</fieldset>

<h2>Checkbox nested in label</h2>
<fieldset>
<legend>Bed Type: </legend>
<label for="checkbox-nested-1">2 Double
<input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
</label>
<label for="checkbox-nested-2">2 Queen
<input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
</label>
<label for="checkbox-nested-3">1 Queen
<input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
</label>
<label for="checkbox-nested-4">1 King
<input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
</label>
</fieldset>
</div>

<div class="demo-description">
<p>Examples of the markup that can be used with checkboxes and radio buttons, here showing both without icons.</p>
</div>
</body>
</html>
127 changes: 127 additions & 0 deletions demos/checkboxradio/product-selector.html
View file
@@ -0,0 +1,127 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Product Selector</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/checkboxradio.js"></script>
<script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input" ).checkboxradio();
$( "[name='shape']").on( "change", function(){
$( ".shape" ).removeClass( "circle pill square rectangle" )
.addClass( $( this ).val() );
});
$( ".toggle" ).on( "change", function(){
if ( $( this ).is( ".brand-toggle" ) ) {
var checked = $( this ).is( ":checked" ),
value = $( "[name='brand']" ).filter( ":checked" ).attr( "data-" + this.id )
$( ".shape" ).css( this.id, checked ? value : "" );
} else {
$( ".shape" ).toggleClass( this.id, $( this ).is( ":checked") );
}
});
$( "[name='brand']").on( "change", function(){
$( "input" ).filter( ":checked" ).not( this ).trigger( "change" );
});
$( "input" ).filter( ":checked" ).trigger( "change" );
$( ".shape-bar, .brand" ).controlgroup();
$( ".toggles" ).controlgroup({
direction: "vertical"
});
});
</script>
<style>
.shape {
margin-left: 4em;
margin-top: 2.5em;
height: 8em;
width: 8em;
box-shadow: 4px 4px 8px;
color: #ccc;
background-repeat: no-repeat;
background-size: 90%;
background-position: 50%;
}
.circle, .pill {
border-radius: 8em;
}
.pill, .rectangle {
width: 16em;
}
.square, .circle {
margin-left: 9em;
}
.border {
border: 2px solid #333333;
}
.toggles {
width: 200px;
}
.toggle-wrap, .shape {
display: inline-block;
vertical-align: top;
}
.controls {
background: #ccc;
padding: 1em;
display: inline-block;
}
</style>
</head>
<body>
<div class="controls">
<div class="brand-wrap">
<h3>1.) Select a brand</h3>
<div class="brand">
<label for="brand-jquery">jQuery</label>
<input data-background-color="#0769AD" data-color="#7ACEF4" data-background-image="url(images/jquery.png)" type="radio" name="brand" id="brand-jquery">
<label for="brand-jquery-ui">jQuery UI</label>
<input data-background-color="#B24926" data-color="#FAA523" data-background-image="url(images/jquery-ui.png)" type="radio" name="brand" id="brand-jquery-ui" checked>
<label for="brand-jquery-mobile">jQuery Mobile</label>
<input data-background-color="#108040" data-color="#3EB249" data-background-image="url(images/jquery-mobile.png)" type="radio" name="brand" id="brand-jquery-mobile">
<label for="brand-sizzle">Sizzle</label>
<input data-background-color="#9A1B1E" data-color="#FAA523" data-background-image="url(images/sizzle.png)" type="radio" name="brand" id="brand-sizzle">
<label for="brand-qunit">QUnit</label>
<input data-background-color="#390F39" data-color="#9C3493" data-background-image="url(images/qunit.png)" type="radio" name="brand" id="brand-qunit">
</div>
</div>
<div class="shape-wrap">
<h3>2.) Select a shape</h3>
<div class="shape-bar">
<label for="shape-circle">Circle</label>
<input type="radio" name="shape" id="shape-circle" value="circle" checked>
<label for="shape-square">Square</label>
<input type="radio" name="shape" id="shape-square" value="square">
<label for="shape-pill">Pill</label>
<input type="radio" name="shape" id="shape-pill" value="pill">
<label for="shape-rectangle">Rectangle</label>
<input type="radio" name="shape" id="shape-rectangle" value="rectangle">
</div>
</div>
<div class="toggle-wrap">
<h3>3.) Customize</h3>
<div class="toggles">
<label for="color">Shadow</label>
<input class="toggle brand-toggle" type="checkbox" name="color" id="color">
<label for="border">Border</label>
<input class="toggle" type="checkbox" name="border" id="border">
<label for="background-color">Background</label>
<input class="toggle brand-toggle" type="checkbox" name="background-color" id="background-color" checked>
<label for="background-image">Background Image</label>
<input class="toggle brand-toggle" type="checkbox" name="background-image" id="background-image" checked>
</div>
</div>
<div class="shape circle background jquery-ui"></div>
</div>

<div class="demo-description">
<p>Using two sets of radio buttons, as horizontal controlgroups, and one group of checkboxes, as a vertical controlgroup, to implement a product selector.</p>
</div>
</body>
</html>
39 changes: 39 additions & 0 deletions demos/checkboxradio/radiogroup.html
View file
@@ -0,0 +1,39 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Checkboxradio - Radio Group</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/checkboxradio.js"></script>
<script src="../../ui/controlgroup.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "input" ).checkboxradio();
$( "fieldset" ).controlgroup();
});
</script>
</head>
<body>
<div class="widget">

<h2>Radio Group</h2>
<fieldset>
<legend>Select a Location: </legend>
<label for="radio-1">New York</label>
<input type="radio" name="radio-1" id="radio-1">
<label for="radio-2">Paris</label>
<input type="radio" name="radio-1" id="radio-2">
<label for="radio-3">London</label>
<input type="radio" name="radio-1" id="radio-3">
</fieldset>
</div>

<div class="demo-description">
<p>Example markup using the controlgroup widget to create a radio group.</p>
</div>
</body>
</html>

0 comments on commit 25d0c85

Please sign in to comment.