aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorAlexander Schmitz <arschmitz@gmail.com>2014-08-28 15:16:51 -0400
committerAlexander Schmitz <arschmitz@gmail.com>2015-10-07 10:57:59 -0400
commit25d0c857188c19347c869f803530289762199f92 (patch)
tree768afcbc456f878fb35e96546f468f9ffaa46b80
parent02033262ee0fb1d9f33c361b3c2ddfa168604854 (diff)
downloadjquery-ui-25d0c857188c19347c869f803530289762199f92.tar.gz
jquery-ui-25d0c857188c19347c869f803530289762199f92.zip
Checkboxradio: Initial commit of new widget
Diffstat
-rw-r--r--demos/checkboxradio/default.html70
-rw-r--r--demos/checkboxradio/images/jquery-mobile.pngbin0 -> 6296 bytes
-rw-r--r--demos/checkboxradio/images/jquery-ui.pngbin0 -> 7044 bytes
-rw-r--r--demos/checkboxradio/images/jquery.pngbin0 -> 7206 bytes
-rw-r--r--demos/checkboxradio/images/qunit.pngbin0 -> 6740 bytes
-rw-r--r--demos/checkboxradio/images/sizzle.pngbin0 -> 8875 bytes
-rw-r--r--demos/checkboxradio/index.html18
-rw-r--r--demos/checkboxradio/no-icons.html70
-rw-r--r--demos/checkboxradio/product-selector.html127
-rw-r--r--demos/checkboxradio/radiogroup.html39
-rw-r--r--demos/controlgroup/default.html90
-rw-r--r--demos/controlgroup/index.html17
-rw-r--r--demos/controlgroup/splitbutton.html58
-rw-r--r--demos/controlgroup/toolbar.html256
-rw-r--r--demos/index.html1
-rw-r--r--tests/unit/checkboxradio/checkboxradio.html69
-rw-r--r--tests/unit/checkboxradio/common.js22
-rw-r--r--tests/unit/checkboxradio/core.js102
-rw-r--r--tests/unit/checkboxradio/events.js113
-rw-r--r--tests/unit/checkboxradio/methods.js97
-rw-r--r--tests/unit/checkboxradio/options.js189
-rw-r--r--tests/unit/controlgroup/controlgroup_core.js0
-rw-r--r--tests/unit/index.html1
-rw-r--r--tests/visual/checkboxradio/checkboxradio.html65
-rw-r--r--tests/visual/index.html5
-rw-r--r--themes/base/base.css1
-rw-r--r--themes/base/checkboxradio.css33
-rw-r--r--themes/base/theme.css12
-rw-r--r--ui/checkboxradio.js289
29 files changed, 1741 insertions, 3 deletions
diff --git a/demos/checkboxradio/default.html b/demos/checkboxradio/default.html
new file mode 100644
index 000000000..c8f4c5566
--- /dev/null
+++ b/demos/checkboxradio/default.html
@@ -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>
diff --git a/demos/checkboxradio/images/jquery-mobile.png b/demos/checkboxradio/images/jquery-mobile.png
new file mode 100644
index 000000000..fe2c36376
--- /dev/null
+++ b/demos/checkboxradio/images/jquery-mobile.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery-ui.png b/demos/checkboxradio/images/jquery-ui.png
new file mode 100644
index 000000000..651e2e115
--- /dev/null
+++ b/demos/checkboxradio/images/jquery-ui.png
Binary files differ
diff --git a/demos/checkboxradio/images/jquery.png b/demos/checkboxradio/images/jquery.png
new file mode 100644
index 000000000..ff3fdc21d
--- /dev/null
+++ b/demos/checkboxradio/images/jquery.png
Binary files differ
diff --git a/demos/checkboxradio/images/qunit.png b/demos/checkboxradio/images/qunit.png
new file mode 100644
index 000000000..048bcfddb
--- /dev/null
+++ b/demos/checkboxradio/images/qunit.png
Binary files differ
diff --git a/demos/checkboxradio/images/sizzle.png b/demos/checkboxradio/images/sizzle.png
new file mode 100644
index 000000000..6145cd8ec
--- /dev/null
+++ b/demos/checkboxradio/images/sizzle.png
Binary files differ
diff --git a/demos/checkboxradio/index.html b/demos/checkboxradio/index.html
new file mode 100644
index 000000000..08e598dbc
--- /dev/null
+++ b/demos/checkboxradio/index.html
@@ -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>
diff --git a/demos/checkboxradio/no-icons.html b/demos/checkboxradio/no-icons.html
new file mode 100644
index 000000000..64b511246
--- /dev/null
+++ b/demos/checkboxradio/no-icons.html
@@ -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> \ No newline at end of file
diff --git a/demos/checkboxradio/product-selector.html b/demos/checkboxradio/product-selector.html
new file mode 100644
index 000000000..f8da07118
--- /dev/null
+++ b/demos/checkboxradio/product-selector.html
@@ -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>
diff --git a/demos/checkboxradio/radiogroup.html b/demos/checkboxradio/radiogroup.html
new file mode 100644
index 000000000..b307db82d
--- /dev/null
+++ b/demos/checkboxradio/radiogroup.html
@@ -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>
diff --git a/demos/controlgroup/default.html b/demos/controlgroup/default.html
new file mode 100644
index 000000000..9e4bcdd80
--- /dev/null
+++ b/demos/controlgroup/default.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup - 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/button.js"></script>
+ <script src="../../ui/checkboxradio.js"></script>
+ <script src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( ".controlgroup" ).eq( 0 ).controlgroup()
+ .end().eq( 1 ).controlgroup({
+ "direction": "vertical"
+ });
+ });
+ </script>
+ <style>
+ .ui-controlgroup-vertical {
+ width: 300px;
+ }
+ .ui-controlgroup-vertical select {
+ width: 100%;
+ }
+ .ui-controlgroup.ui-controlgroup-vertical > button.ui-button {
+ text-align: center;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A Controlgroup featuring various form controls</p>
+</div>
+<div class="widget">
+ <h1>Controlgroup</h1>
+ <fieldset>
+ <legend>Rental Car</legend>
+ <div class="controlgroup">
+ <select>
+ <option>Compact car</option>
+ <option>Midsize car</option>
+ <option>Full size car</option>
+ <option>SUV</option>
+ <option>Luxury</option>
+ <option>Truck</option>
+ <option>Van</option>
+ </select>
+ <label for="transmission-standard">Standard</label>
+ <input type="radio" name="transmission" id="transmission-standard">
+ <label for="transmission-automatic">Automatic</label>
+ <input type="radio" name="transmission" id="transmission-automatic">
+ <label for="insurance">Insurance</label>
+ <input type="checkbox" name="insurance" id="insurance">
+ <button>Book Now!</button>
+ </div>
+ </fieldset>
+ <br/>
+ <fieldset>
+ <legend>Rental Car</legend>
+ <div class="controlgroup-horizontal">
+ <select>
+ <option>Compact car</option>
+ <option>Midsize car</option>
+ <option>Full size car</option>
+ <option>SUV</option>
+ <option>Luxury</option>
+ <option>Truck</option>
+ <option>Van</option>
+ </select>
+ <label for="transmission-standard-v">Standard</label>
+ <input type="radio" name="transmission-v" id="transmission-standard-v">
+ <label for="transmission-automatic-v">Automatic</label>
+ <input type="radio" name="transmission-v" id="transmission-automatic-v">
+ <label for="insurance-v">Insurance</label>
+ <input type="checkbox" name="insurance" id="insurance-v">
+ <button>Book Now!</button>
+ </div>
+ </fieldset>
+>>>>>>> 423b976... Checkboxradio: Fixed demos and tests
+</div>
+
+</body>
+</html>
diff --git a/demos/controlgroup/index.html b/demos/controlgroup/index.html
new file mode 100644
index 000000000..58e2f7eda
--- /dev/null
+++ b/demos/controlgroup/index.html
@@ -0,0 +1,17 @@
+<!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="splitbutton.html">Split Button</a></li>
+ <li><a href="toolbar.html">Toolbar</a></li>
+</ul>
+
+</body>
+</html>
diff --git a/demos/controlgroup/splitbutton.html b/demos/controlgroup/splitbutton.html
new file mode 100644
index 000000000..5d4c7b3ce
--- /dev/null
+++ b/demos/controlgroup/splitbutton.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup - Split Button</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 src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ $( "select" ).selectmenu({
+ classes: {
+ "ui-selectmenu-button": "ui-button-icon-only"
+ }
+ }).selectmenu( "widget" ).removeClass( "ui-icon-end" );
+ $( ".controlgroup" ).controlgroup();
+ $( "select" ).on( "selectmenuchange", function(){
+ alert( this.value );
+ });
+ $( "button" ).click(function() {
+ alert( "Running the last action" );
+ });
+ });
+ </script>
+ <style>
+ select {
+ width: 2em;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A Controlgroup creating a split button</p>
+</div>
+<div class="widget">
+ <h1>Split button</h1>
+ <div class="controlgroup">
+ <button>Run last option</button>
+ <select>
+ <option>Open...</option>
+ <option>Save</option>
+ <option>Delete</option>
+ </select>
+ </div>
+</div>
+<div class="demo-description">
+ <p>A Controlgroup creating a split button</p>
+</div>
+</body>
+</html>
diff --git a/demos/controlgroup/toolbar.html b/demos/controlgroup/toolbar.html
new file mode 100644
index 000000000..f90fb3040
--- /dev/null
+++ b/demos/controlgroup/toolbar.html
@@ -0,0 +1,256 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Controlgroup - Toolbar</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 src="../../ui/menu.js"></script>
+ <script src="../../ui/position.js"></script>
+ <script src="../../ui/selectmenu.js"></script>
+ <script src="../../ui/controlgroup.js"></script>
+ <link rel="stylesheet" href="../demos.css">
+ <script>
+ $(function() {
+ var iframe = $( "<iframe id='display' contenteditable='true'>" ),
+ contents = iframe.appendTo( "body" );
+
+ // Firefox and IE require us to wait for next tick before interacting with the iframe
+ setTimeout(function(){
+
+ contents = contents.contents()
+ contents[ 0 ].designMode = "On";
+ contents[ 0 ].contenteditable = true;
+ contents.find( "body" ).append( $( "#input" ).clone().attr( "id", "output" ) );
+
+ $( "#print" ).button({
+ "icon": "ui-icon-print",
+ "showLabel": false
+ });
+ $( "#redo" ).button({
+ "icon": "ui-icon-arrowreturnthick-1-e",
+ "showLabel": false
+ });
+ $( "#undo" ).button({
+ "icon": "ui-icon-arrowreturnthick-1-w",
+ "showLabel": false
+ });
+ $( "#print, #bold, #italic, #underline, #undo, #redo" ).on( "click", function() {
+ contents[ 0 ].execCommand( this.id );
+ });
+ $( "#fontsize, #forecolor, #hilitecolor, #backcolor, #fontname" ).on( "change selectmenuchange", function() {
+ contents[ 0 ].execCommand( this.id ,false, $( this ).val() );
+ });
+ $( ".toolbar" ).controlgroup();
+ $( "#zoom" ).on( "selectmenuchange", function() {
+ contents.find( "#output" ).css({ "zoom": $( this ).val() });
+ })
+ $( "form" ).on( "submit", function( event ) {
+ return false;
+ });
+ });
+ });
+ </script>
+ <style>
+ #zoom, #fontsize {
+ min-width:75px;
+ }
+ #input {
+ display: none;
+ }
+ #input, #display {
+ width: 98%;
+ height: 300px;
+ border: 2px inset #ccc;
+ font-size: 11px;
+ font-family: "Lucida Grande";
+ zoom: 100%;
+ padding: 5px;
+ }
+ </style>
+</head>
+<body>
+<div class="demo-description">
+<p>A sample editor toolbar</p>
+<p>Highlight text and edit it using the buttons and dropdowns in the toolbar</p>
+</div>
+ <div class="toolbar">
+ <button id="print">Print</button>
+ <button id="undo">Undo</button>
+ <button id="redo">Redo</button>
+ <select id="zoom">
+ <option>50%</option>
+ <option>75%</option>
+ <option>90%</option>
+ <option selected>100%</option>
+ <option>125%</option>
+ <option>150%</option>
+ <option>200%</option>
+ </select>
+ <select id="fontname">
+ <option>Arial</option>
+ <option>Comic Sans MS</option>
+ <option>Courier New</option>
+ <option>Georgia</option>
+ <option>Impact</option>
+ <option selected>Lucida Grande</option>
+ <option>Times New Roman</option>
+ <option>Verdana</option>
+ </select>
+ <select id="fontsize">
+ <option value="1">8px</option>
+ <option value="2">9px</option>
+ <option value="3" selected>10px</option>
+ <option value="4">11px</option>
+ <option value="5">12px</option>
+ <option value="6">14px</option>
+ <option value="7">18px</option>
+ <option value="8">24px</option>
+ <option value="9">30px</option>
+ <option value="10">36px</option>
+ </select>
+ <select id="hilitecolor">
+ <option value="white">Highlight: None</option>
+ <option value="red">Highlight: Red</option>
+ <option value="yellow">Highlight: Yellow</option>
+ <option value="green">Highlight: Green</option>
+ <option value="blue">Highlight: Blue</option>
+ <option value="grey">Highlight: Grey</option>
+ <option value="purple">Highlight: Purple</option>
+ <option value="orange">Highlight: Orange</option>
+ </select>
+ <select id="forecolor">
+ <option value="white">Font: None</option>
+ <option value="red">Font: Red</option>
+ <option value="yellow">Font: Yellow</option>
+ <option value="green">Font: Green</option>
+ <option value="blue">Font: Blue</option>
+ <option value="#ccc">Font: Grey</option>
+ <option value="purple">Font: Purple</option>
+ <option value="orange">Font: Orange</option>
+ </select>
+ <button id="bold">B</button>
+ <button id="italic">I</button>
+ <button id="underline">U</button>
+
+ </div>
+ <br/><br/>
+<pre id="input">
+The Rime of the Ancient Mariner (text of 1834)
+BY SAMUEL TAYLOR COLERIDGE
+Argument
+
+How a Ship having passed the Line was driven by storms to the cold Country towards the South Pole;
+and how from thence she made her course to the tropical Latitude of the Great Pacific Ocean; and
+of the strange things that befell; and in what manner the Ancyent Marinere came back to his own
+Country.
+
+PART I
+It is an ancient Mariner,
+And he stoppeth one of three.
+'By thy long grey beard and glittering eye,
+Now wherefore stopp'st thou me?
+
+The Bridegroom's doors are opened wide,
+And I am next of kin;
+The guests are met, the feast is set:
+May'st hear the merry din.'
+
+He holds him with his skinny hand,
+'There was a ship,' quoth he.
+'Hold off! unhand me, grey-beard loon!'
+Eftsoons his hand dropt he.
+
+He holds him with his glittering eye—
+The Wedding-Guest stood still,
+And listens like a three years' child:
+The Mariner hath his will.
+
+The Wedding-Guest sat on a stone:
+He cannot choose but hear;
+And thus spake on that ancient man,
+The bright-eyed Mariner.
+
+'The ship was cheered, the harbour cleared,
+Merrily did we drop
+Below the kirk, below the hill,
+Below the lighthouse top.
+
+The Sun came up upon the left,
+Out of the sea came he!
+And he shone bright, and on the right
+Went down into the sea.
+
+Higher and higher every day,
+Till over the mast at noon—'
+The Wedding-Guest here beat his breast,
+For he heard the loud bassoon.
+
+The bride hath paced into the hall,
+Red as a rose is she;
+Nodding their heads before her goes
+The merry minstrelsy.
+
+The Wedding-Guest he beat his breast,
+Yet he cannot choose but hear;
+And thus spake on that ancient man,
+The bright-eyed Mariner.
+
+And now the STORM-BLAST came, and he
+Was tyrannous and strong:
+He struck with his o'ertaking wings,
+And chased us south along.
+
+With sloping masts and dipping prow,
+As who pursued with yell and blow
+Still treads the shadow of his foe,
+And forward bends his head,
+The ship drove fast, loud roared the blast,
+And southward aye we fled.
+
+And now there came both mist and snow,
+And it grew wondrous cold:
+And ice, mast-high, came floating by,
+As green as emerald.
+
+And through the drifts the snowy clifts
+Did send a dismal sheen:
+Nor shapes of men nor beasts we ken—
+The ice was all between.
+
+The ice was here, the ice was there,
+The ice was all around:
+It cracked and growled, and roared and howled,
+Like noises in a swound!
+
+At length did cross an Albatross,
+Thorough the fog it came;
+As if it had been a Christian soul,
+We hailed it in God's name.
+
+It ate the food it ne'er had eat,
+And round and round it flew.
+The ice did split with a thunder-fit;
+The helmsman steered us through!
+
+And a good south wind sprung up behind;
+The Albatross did follow,
+And every day, for food or play,
+Came to the mariner's hollo!
+
+In mist or cloud, on mast or shroud,
+It perched for vespers nine;
+Whiles all the night, through fog-smoke white,
+Glimmered the white Moon-shine.'
+
+'God save thee, ancient Mariner!
+From the fiends, that plague thee thus!—
+Why look'st thou so?'—With my cross-bow
+I shot the ALBATROSS.
+</pre>
+</body>
+</html>
diff --git a/demos/index.html b/demos/index.html
index f37874a44..4b4d04e06 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -11,6 +11,7 @@
<li><a href="accordion/">accordion</a></li>
<li><a href="autocomplete/">autocomplete</a></li>
<li><a href="button/">button</a></li>
+ <li><a href="checkboxradio/">checkboxradio</a></li>
<li><a href="datepicker/">datepicker</a></li>
<li><a href="dialog/">dialog</a></li>
<li><a href="draggable/">draggable</a></li>
diff --git a/tests/unit/checkboxradio/checkboxradio.html b/tests/unit/checkboxradio/checkboxradio.html
new file mode 100644
index 000000000..92db788c5
--- /dev/null
+++ b/tests/unit/checkboxradio/checkboxradio.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Checkboxradio Test Suite</title>
+
+ <script src="../../../external/requirejs/require.js"></script>
+ <script src="../../lib/css.js" data-modules="core button checkboxradio"></script>
+ <script src="../../lib/bootstrap.js" data-widget="button"></script>
+</head>
+<body>
+
+<div id="qunit"></div>
+<div id="qunit-fixture">
+
+<div id="radio0">
+ <input type="radio" id="radio01" name="radio" checked="checked"><label for="radio01">Choice 1</label>
+ <input type="radio" id="radio02" name="radio"><label for="radio02">Choice 2</label>
+ <input type="radio" id="radio03" name="radio"><label for="radio03">Choice 3</label>
+</div>
+<form id="form1">
+ <div id="radio1">
+ <input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
+ <input type="radio" id="radio12" name="radio"><label for="radio12">Choice 2</label>
+ <input type="radio" id="radio13" name="radio" checked="checked"><label for="radio13">Choice 3</label>
+ </div>
+</form>
+<form id="form2">
+ <div id="radio2">
+ <input type="radio" id="radio21" name="radio"><label for="radio21">Choice 1</label>
+ <input type="radio" id="radio22" name="radio"><label for="radio22">Choice 2</label>
+ <input type="radio" id="radio23" name="radio" checked="checked"><label for="radio23">Choice 3</label>
+ </div>
+</form>
+<form>
+ <div id="radio3">
+ <input type="radio" id="radio31" name="data['Page']['parse']"><label for="radio31">Choice 1</label>
+ <input type="radio" id="radio32" name="data['Page']['parse']" checked="checked"><label for="radio32">Choice 2</label>
+ <input type="radio" id="radio33" name="data['Page']['parse']"><label for="radio33">Choice 3</label>
+ </div>
+</form>
+
+<input type="checkbox" id="check"><label for="check">Toggle</label>
+<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
+<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
+<input type="checkbox" id="checkbox-method-refresh"/>
+<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
+<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
+<label for="checkbox-method-disable">checkbox refresh</label>
+<input type="checkbox" class="foo" id="checkbox-method-disable"/>
+
+<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
+<input type="radio" id="radio-method-refresh"/>
+<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
+<input type="radio" class="foo" id="radio-method-destroy"/>
+<label for="radio-method-disable">radio refresh</label>
+<input type="radio" class="foo" id="radio-method-disable"/>
+
+<label for="checkbox-option-disabled">checkbox disabled</label>
+<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
+<label for="checkbox-option-icon">checkbox icon</label>
+<input type="checkbox" class="foo" id="checkbox-option-icon"/>
+<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label>
+<label>
+ <input type="checkbox" id="label-with-no-for"/>
+</label>
+</div>
+</body>
+</html>
diff --git a/tests/unit/checkboxradio/common.js b/tests/unit/checkboxradio/common.js
new file mode 100644
index 000000000..6a739435f
--- /dev/null
+++ b/tests/unit/checkboxradio/common.js
@@ -0,0 +1,22 @@
+define( [
+ "lib/common",
+ "ui/checkboxradio"
+], function( common ) {
+
+common.testWidget( "checkboxradio", {
+ noDefaultElement: true,
+ defaults: {
+ disabled: null,
+ label: null,
+ icon: true,
+ classes: {
+ "ui-checkboxradio-label": "ui-corner-all",
+ "ui-checkboxradio-icon": "ui-corner-all"
+ },
+
+ // Callbacks
+ create: null
+ }
+});
+
+} );
diff --git a/tests/unit/checkboxradio/core.js b/tests/unit/checkboxradio/core.js
new file mode 100644
index 000000000..e70ca58c1
--- /dev/null
+++ b/tests/unit/checkboxradio/core.js
@@ -0,0 +1,102 @@
+define( [
+ "jquery",
+ "ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: core" );
+test( "Checkbox - Initial class structure", function( assert ) {
+ expect( 2 );
+ var input = $("#check"),
+ label = $("label[for=check]");
+
+ input.checkboxradio();
+ assert.hasClasses( input, "ui-helper-hidden-accessible ui-checkboxradio" );
+ assert.hasClasses( label, "ui-button ui-widget ui-checkboxradio-label ui-corner-all" );
+});
+
+test( "Radios - Initial class structure", function( assert ) {
+ expect( 6 );
+ var inputs = $( "#radio0 input" ),
+ labels = $( "#radio0 label" );
+
+ inputs.checkboxradio();
+ inputs.each( function() {
+ assert.hasClasses( this, "ui-helper-hidden-accessible" );
+ });
+ labels.each( function() {
+ assert.hasClasses( this, "ui-button" );
+ });
+});
+
+asyncTest( "Ensure checked after single click on checkbox label button", function( assert ) {
+ expect( 2 );
+
+ $( "#check2" ).checkboxradio().change( function() {
+ var label = $( this ).checkboxradio( "widget" );
+ ok( this.checked, "checked ok" );
+
+ assert.hasClasses( label, "ui-state-active" );
+ });
+
+ // Support: Opera
+ // Opera doesn't trigger a change event when this is done synchronously.
+ // This seems to be a side effect of another test, but until that can be
+ // tracked down, this delay will have to do.
+ setTimeout(function() {
+ $( "#check2" ).checkboxradio( "widget" ).simulate( "click" );
+ start();
+ });
+});
+
+test( "Checkbox creation requires a label, and finds it in all cases", function( assert ) {
+ expect( 7 );
+ var groups = [
+ "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>",
+ "<span><input type='checkbox' id='t7092b'><label for='t7092b'></label></span>",
+ "<span><span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label></span>",
+ "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>",
+ "<span><input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>",
+ "<span><label><input type='checkbox' id='t7092f'></label></span>",
+ "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>"
+ ];
+
+ $.each( groups, function( index, markup ) {
+ var group = $( markup );
+
+ group.find( "input[type=checkbox]" ).checkboxradio();
+ assert.hasClasses( group.find( "label" ), "ui-button" );
+ } );
+});
+
+test( "Calling checkboxradio on an unsupported element throws an error", function( assert ) {
+ expect( 2 );
+ var error = new Error( "Can't create checkboxradio on element.nodeName=div and element.type=undefined" );
+ assert.raises(
+ function() {
+ $( "<div>" ).checkboxradio();
+ },
+ error,
+ "Proper error thrown"
+ );
+ error = new Error( "Can't create checkboxradio on element.nodeName=input and element.type=button" );
+ assert.raises(
+ function() {
+ $( "<input type='button'>" ).checkboxradio();
+ },
+ error,
+ "Proper error thrown"
+ );
+});
+test( "Calling checkboxradio on an input with no label throws an error", function( assert ) {
+ expect( 1 );
+ var error = new Error( "No label found for checkboxradio widget" );
+ assert.raises(
+ function() {
+ $( "<input type='checkbox'>" ).checkboxradio();
+ },
+ error,
+ "Proper error thrown"
+ );
+});
+
+} );
diff --git a/tests/unit/checkboxradio/events.js b/tests/unit/checkboxradio/events.js
new file mode 100644
index 000000000..e5909a386
--- /dev/null
+++ b/tests/unit/checkboxradio/events.js
@@ -0,0 +1,113 @@
+define( [
+ "jquery",
+ "ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: events" );
+
+asyncTest( "form reset / click", function( assert ) {
+ expect( 35 );
+
+ var radios = [
+ $( "#radio11" ).checkboxradio(),
+ $( "#radio12" ).checkboxradio(),
+ $( "#radio13" ).checkboxradio()
+ ],
+ widgets = [
+ radios[ 0 ].checkboxradio( "widget" ),
+ radios[ 1 ].checkboxradio( "widget" ),
+ radios[ 2 ].checkboxradio( "widget" )
+ ],
+ form1 = $( "#form1" ),
+ form2 = $( "#form2" );
+
+ // Checkes that only the specified radio is checked in the group
+ function assertChecked( checked ) {
+ $.each( widgets, function( index ) {
+ var method = index === checked ? "hasClasses" : "lacksClasses";
+
+ assert[ method ]( widgets[ index ], "ui-checkboxradio-checked ui-state-active" );
+ } );
+ }
+
+ // Checks the form count on each form
+ function assertFormCount( count ) {
+ equal( form1.data( "uiCheckboxradioCount" ), count, "Form1 has a count of " + count );
+ equal( form2.data( "uiCheckboxradioCount" ), 3, "Form2 has a count of 3" );
+ }
+
+ // Run the tests
+ function testForms( current, start ) {
+ assertChecked( 2 );
+
+ if ( !start && current !== 0 ) {
+ radios[ current - 1 ].checkboxradio( "destroy" );
+ }
+
+ assertFormCount( 3 - current );
+
+ radios[ current ].prop( "checked", true );
+ radios[ current ].trigger( "change" );
+ assertChecked( current );
+
+ form1.trigger( "reset" );
+ }
+
+ // Recoursivly run the tests in a setTimeout with call back for the resets
+ function iterate( i ) {
+ setTimeout( function() {
+ if ( i < 3 ) {
+ testForms( i );
+ iterate( i + 1 );
+ return;
+ }
+ radios[ 2 ].checkboxradio( "destroy" );
+ assertChecked( false );
+ start();
+ } );
+ }
+
+ $( "#form2 input" ).checkboxradio();
+
+ // Check the starting state then kick everything off
+ testForms( 0, true );
+ iterate( 0 );
+
+} );
+
+asyncTest(
+ "Resetting a checkbox's form should refresh the visual state of the checkbox",
+ function( assert ) {
+ expect( 2 );
+ var form = $( "<form>" +
+ "<label for='c1'></label><input id='c1' type='checkbox' checked>" +
+ "</form>" ),
+ checkbox = form.find( "input[type=checkbox]" ).checkboxradio(),
+ widget = checkbox.checkboxradio( "widget" );
+
+ checkbox.prop( "checked", false ).checkboxradio( "refresh" );
+ assert.lacksClasses( widget, "ui-state-active" );
+
+ form.get( 0 ).reset();
+
+ setTimeout(function() {
+ assert.hasClasses( widget, "ui-state-active" );
+ start();
+ }, 1 );
+ }
+);
+
+asyncTest( "Checkbox shows focus when using keyboard navigation", function( assert ) {
+ expect( 2 );
+ var check = $( "#check" ).checkboxradio(),
+ label = $( "label[for='check']" );
+ assert.lacksClasses( label, "ui-state-focus" );
+ check.focus();
+ setTimeout(function() {
+ assert.hasClasses( label, "ui-state-focus" );
+ start();
+ } );
+ }
+);
+
+} );
diff --git a/tests/unit/checkboxradio/methods.js b/tests/unit/checkboxradio/methods.js
new file mode 100644
index 000000000..f189c9eea
--- /dev/null
+++ b/tests/unit/checkboxradio/methods.js
@@ -0,0 +1,97 @@
+define( [
+ "jquery",
+ "ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: methods" );
+
+$.each( [ "checkbox", "radio" ], function( index, value ) {
+ test( value + ": refresh", function( assert ) {
+ var widget, icon,
+ checkbox = value === "checkbox",
+ input = $( "#" + value + "-method-refresh" );
+
+ expect( checkbox ? 11 : 8 );
+
+ input.checkboxradio();
+
+ widget = input.checkboxradio( "widget" );
+ icon = widget.find( ".ui-icon" );
+ strictEqual( icon.length, 1,
+ "There is initally one icon" );
+
+ icon.remove();
+ input.checkboxradio( "refresh" );
+ icon = widget.find( ".ui-icon" );
+ strictEqual( icon.length, 1,
+ "Icon is recreated on refresh if absent" );
+ assert.hasClasses( icon, "ui-icon-blank" );
+ if ( checkbox ) {
+ assert.lacksClasses( icon, "ui-icon-check" );
+ }
+ assert.lacksClasses( widget, "ui-checkboxradio-checked" );
+
+ input.prop( "checked", true );
+ input.checkboxradio( "refresh" );
+ if ( checkbox ) {
+ assert.hasClasses( icon, "ui-icon-check" );
+ }
+ assert[ !checkbox ? "hasClasses" : "lacksClasses" ]( icon, "ui-icon-blank" );
+ assert.hasClasses( widget, "ui-checkboxradio-checked" );
+
+ input.prop( "checked", false );
+ input.checkboxradio( "refresh" );
+ assert.hasClasses( icon, "ui-icon-blank" );
+ if ( checkbox ) {
+ assert.lacksClasses( icon, "ui-icon-check" );
+ }
+ assert.lacksClasses( widget, "ui-checkboxradio-checked" );
+ });
+
+ test( value + ": destroy", function( assert ){
+ expect( 1 );
+ assert.domEqual( "#" + value + "-method-destroy", function() {
+ $( "#" + value + "-method-destroy" ).checkboxradio().checkboxradio( "destroy" );
+ });
+ });
+
+ test( value + ": disable / enable", function( assert ) {
+ expect( 4 );
+ var input = $( "#" + value + "-method-disable" ),
+ widget = input.checkboxradio().checkboxradio( "widget" );
+
+ input.checkboxradio( "disable" );
+ assert.hasClasses( widget, "ui-state-disabled" );
+ strictEqual( input.is( ":disabled" ), true,
+ value + " is disabled when disable is called" );
+
+ input.checkboxradio( "enable" );
+ assert.lacksClasses( widget, "ui-state-disabled" );
+ strictEqual( input.is( ":disabled" ), false,
+ value + " has disabled prop removed when enable is called" );
+ });
+
+ test( value + ": widget returns the label", function(){
+ var input = $( "#" + value + "-method-refresh" ),
+ label = $( "#" + value + "-method-refresh-label" );
+
+ expect( 1 );
+
+ input.checkboxradio();
+ strictEqual( input.checkboxradio( "widget" )[ 0 ], label[ 0 ],
+ "widget method returns label" );
+ });
+
+} );
+
+test( "Input wrapped in a label preserved on refresh", function() {
+ var input = $( "#label-with-no-for" ).checkboxradio(),
+ element = input.checkboxradio( "widget" );
+
+ expect( 1 );
+
+ input.checkboxradio( "refresh" );
+ strictEqual( input.parent()[ 0 ], element[ 0 ], "Input preserved" );
+});
+
+} );
diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js
new file mode 100644
index 000000000..11bd072ca
--- /dev/null
+++ b/tests/unit/checkboxradio/options.js
@@ -0,0 +1,189 @@
+define( [
+ "jquery",
+ "ui/checkboxradio"
+], function( $ ) {
+
+module( "Checkboxradio: options" );
+
+function assertDisabled( checkbox, assert ) {
+ assert.hasClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled",
+ "label gets ui-state-disabled" );
+ strictEqual( checkbox.is( ":disabled" ), true,
+ "checkbox is disabled" );
+}
+
+function assertEnabled( checkbox, assert ) {
+ assert.lacksClasses( checkbox.checkboxradio( "widget" ), "ui-state-disabled",
+ "label has ui-state-disabled removed when disabled set to false" );
+ strictEqual( checkbox.is( ":disabled" ), false,
+ "checkbox has disabled prop removed when disabled set to false" );
+}
+
+test( "disabled", function( assert ) {
+ var checkbox = $( "#checkbox-option-disabled" );
+ expect( 6 );
+ checkbox.checkboxradio({
+ disabled: true
+ });
+
+ assertDisabled( checkbox, assert );
+
+ checkbox.checkboxradio( "option", "disabled", false );
+ assertEnabled( checkbox, assert );
+
+ checkbox.checkboxradio( "option", "disabled", true );
+ assertDisabled( checkbox, assert );
+});
+test( "disabled - prop true on init", function( assert ) {
+ expect( 2 );
+ var checkbox = $( "#checkbox-option-disabled" );
+
+ checkbox.prop( "disabled", true );
+ checkbox.checkboxradio();
+
+ assertDisabled( checkbox, assert );
+});
+test( "disabled - explicit null value, checks the DOM", function( assert ) {
+ expect( 2 );
+ var checkbox = $( "#checkbox-option-disabled" );
+
+ checkbox.prop( "disabled", true );
+ checkbox.checkboxradio({
+ disabled: null
+ });
+ assertDisabled( checkbox, assert );
+});
+
+function assertNoIcon( checkbox ) {
+ strictEqual( checkbox.checkboxradio( "widget" ).find( "span.ui-icon" ).length, 0,
+ "Label does not contain an icon" );
+}
+function assertIcon( checkbox, icon, assert ) {
+ var iconElement = checkbox.checkboxradio( "widget" ).find( ".ui-icon" );
+
+ icon = icon || "blank";
+ strictEqual( iconElement.length, 1,
+ "Label contains icon" );
+ assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " +
+ "ui-icon-background ui-icon-" + icon,
+ "Icon has proper classes" );
+}
+test( "icon - false on init", function() {
+ var checkbox = $( "#checkbox-option-icon" );
+
+ expect( 1 );
+
+ checkbox.checkboxradio({ icon: false });
+ assertNoIcon( checkbox );
+});
+
+test( "icon - default unchecked", function( assert ) {
+ var checkbox = $( "#checkbox-option-icon" );
+
+ expect( 2 );
+
+ checkbox.checkboxradio();
+ assertIcon( checkbox, false, assert );
+});
+test( "icon", function( assert ){
+ var checkbox = $( "#checkbox-option-icon" );
+
+ expect( 8 );
+
+ checkbox.prop( "checked", true );
+
+ checkbox.checkboxradio();
+ assertIcon( checkbox, "check", assert );
+
+ checkbox.checkboxradio( "option", "icon", false );
+ assertNoIcon( checkbox );
+
+ checkbox.checkboxradio( "option", "icon", true );
+ assertIcon( checkbox, "check", assert );
+
+ checkbox.checkboxradio( "option", "icon", false );
+ assertNoIcon( checkbox );
+
+ checkbox.prop( "checked", false ).checkboxradio( "refresh" );
+ checkbox.checkboxradio( "option", "icon", true );
+ assertIcon( checkbox, false, assert );
+
+});
+
+test( "label - default", function() {
+ var checkbox = $( "#checkbox-option-label" ),
+ widget;
+
+ expect( 2 );
+
+ checkbox.checkboxradio();
+ widget = checkbox.checkboxradio( "widget" );
+ strictEqual( checkbox.checkboxradio( "option", "label" ),
+ "checkbox label", "When no value passed on create text from dom is used for option" );
+ strictEqual( widget.text(),
+ " checkbox label", "When no value passed on create text from dom is used in dom" );
+});
+test( "label - explicit value", function() {
+ expect( 5 );
+ var checkbox = $( "#checkbox-option-label" ).checkboxradio({
+ label: "foo"
+ }),
+ widget = checkbox.checkboxradio( "widget" ),
+ icon = widget.find( ".ui-icon" ),
+ iconSpace = widget.find( ".ui-checkboxradio-icon-space" );
+
+ strictEqual( checkbox.checkboxradio( "option", "label" ),
+ "foo", "When value is passed on create value is used for option" );
+ strictEqual( widget.text(),
+ " foo", "When value is passed on create value is used in dom" );
+ strictEqual( icon.length, 1,
+ "Icon is preserved when label is set on init when wrapped in label" );
+ strictEqual( iconSpace.length, 1,
+ "Icon space is preserved when label is set on init when wrapped in label" );
+ strictEqual( $( "#checkbox-option-label" ).length, 1,
+ "Element is preserved when label is set on init when wrapped in label" );
+});
+
+test( "label - explicit null value", function() {
+ var checkbox = $( "#checkbox-option-label" ),
+ widget;
+
+ expect( 2 );
+
+ // We are testing the default here because the default null is a special value which means to check
+ // the DOM, so we need to make sure this happens correctly checking the options should never return
+ // null. It should always be true or false
+ checkbox.checkboxradio({
+ label: null
+ });
+ widget = checkbox.checkboxradio( "widget" );
+ strictEqual( checkbox.checkboxradio( "option", "label" ),
+ "checkbox label", "When null is passed on create text from dom is used for option" );
+ strictEqual( widget.text(),
+ " checkbox label", "When null is passed on create text from dom is used in dom" );
+
+});
+
+test( "label", function() {
+ var checkbox = $( "#checkbox-option-label" ),
+ widget;
+
+ expect( 4 );
+
+ checkbox.checkboxradio();
+ widget = checkbox.checkboxradio( "widget" );
+ checkbox.checkboxradio( "option", "label", "bar" );
+ strictEqual( checkbox.checkboxradio( "option", "label" ),
+ "bar", "When value is passed value is used for option" );
+ strictEqual( widget.text(),
+ " bar", "When value is passed value is used in dom" );
+
+ checkbox.checkboxradio( "option", "label", null );
+ strictEqual( checkbox.checkboxradio( "option", "label" ),
+ "bar", "When null is passed text from dom is used for option" );
+ strictEqual( widget.text(),
+ " bar", "When null is passed text from dom is used in dom" );
+
+});
+
+} );
diff --git a/tests/unit/controlgroup/controlgroup_core.js b/tests/unit/controlgroup/controlgroup_core.js
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/tests/unit/controlgroup/controlgroup_core.js
diff --git a/tests/unit/index.html b/tests/unit/index.html
index 418cfd34c..fe358cb6c 100644
--- a/tests/unit/index.html
+++ b/tests/unit/index.html
@@ -40,6 +40,7 @@
<li><a href="accordion/accordion.html">Accordion</a></li>
<li><a href="autocomplete/autocomplete.html">Autocomplete</a></li>
<li><a href="button/button.html">Button</a></li>
+ <li><a href="checkboxradio/checkboxradio.html">Checkboxradio</a></li>
<li><a href="datepicker/datepicker.html">Datepicker</a></li>
<li><a href="dialog/dialog.html">Dialog</a></li>
<li><a href="menu/menu.html">Menu</a></li>
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>
diff --git a/tests/visual/index.html b/tests/visual/index.html
index 98753c827..39168c9f4 100644
--- a/tests/visual/index.html
+++ b/tests/visual/index.html
@@ -31,6 +31,11 @@
<li><a href="button/performance.html">Performance</a></li>
</ul>
+ <h2>Checkboxradio</h2>
+ <ul>
+ <li><a href="checkboxradio/checkboxradio.html">General</a></li>
+ </ul>
+
<h2>Dialog</h2>
<ul>
<li><a href="dialog/animated.html">Animations</a></li>
diff --git a/themes/base/base.css b/themes/base/base.css
index 3ed02661f..7194eba27 100644
--- a/themes/base/base.css
+++ b/themes/base/base.css
@@ -13,6 +13,7 @@
@import url("accordion.css");
@import url("autocomplete.css");
@import url("button.css");
+@import url("checkboxradio.css");
@import url("datepicker.css");
@import url("dialog.css");
@import url("draggable.css");
diff --git a/themes/base/checkboxradio.css b/themes/base/checkboxradio.css
new file mode 100644
index 000000000..063ed5b5c
--- /dev/null
+++ b/themes/base/checkboxradio.css
@@ -0,0 +1,33 @@
+/*!
+ * jQuery UI Checkboxradio @VERSION
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/checkboxradio/#theming
+ */
+
+.ui-checkboxradio-label .ui-icon-background {
+ border-radius: .12em;
+ border: none;
+}
+.ui-checkboxradio-radio-label .ui-icon-background {
+ width: 16px;
+ height: 16px;
+ border-radius: 1em;
+ overflow: visible;
+ border: none;
+}
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
+.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
+ background-image: none;
+ width: 8px;
+ height: 8px;
+ border-width: 4px;
+ border-style: solid;
+}
+.ui-checkboxradio-disabled {
+ pointer-events: none;
+}
diff --git a/themes/base/theme.css b/themes/base/theme.css
index eddbc8a0b..7553d4c58 100644
--- a/themes/base/theme.css
+++ b/themes/base/theme.css
@@ -102,12 +102,18 @@ a.ui-button:focus {
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
-.ui-button:active {
+.ui-button:active,
+.ui-button.ui-state-active:hover {
border: 1px solid #003eff/*{borderColorActive}*/;
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #ffffff/*{fcActive}*/;
}
+.ui-icon-background,
+.ui-state-active .ui-icon-background {
+ border: #003eff/*{borderColorActive}*/;
+ background-color: #ffffff/*{bgColorActive}*/;
+}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
@@ -184,7 +190,6 @@ a.ui-button:active,
.ui-widget-header .ui-icon {
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
}
-.ui-state-default .ui-icon,
.ui-button .ui-icon {
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
}
@@ -198,7 +203,8 @@ a.ui-button:active,
.ui-button:active .ui-icon {
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
}
-.ui-state-highlight .ui-icon {
+.ui-state-highlight .ui-icon,
+.ui-button .ui-state-highlight.ui-icon {
background-image: url("images/ui-icons_777620_256x240.png")/*{iconsHighlight}*/;
}
.ui-state-error .ui-icon,
diff --git a/ui/checkboxradio.js b/ui/checkboxradio.js
new file mode 100644
index 000000000..84f69afaa
--- /dev/null
+++ b/ui/checkboxradio.js
@@ -0,0 +1,289 @@
+/*!
+ * jQuery UI Checkboxradio @VERSION
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/checkboxradio/
+ */
+( function( factory ) {
+ if ( typeof define === "function" && define.amd ) {
+
+ // AMD. Register as an anonymous module.
+ define( [
+ "jquery",
+ "./core",
+ "./widget"
+ ], factory );
+ } else {
+
+ // Browser globals
+ factory( jQuery );
+ }
+}( function( $ ) {
+
+// Remove and replace with reset handler extension
+var formResetHandler = function() {
+ var form = $( this );
+
+ // Wait for the form reset to actually happen before refreshing
+ setTimeout( function() {
+
+ // We dont filter for css only versions since css only is not supported
+ form.find( ".ui-checkboxradio" ).checkboxradio( "refresh" );
+ } );
+ };
+
+$.widget( "ui.checkboxradio", {
+ version: "@VERSION",
+ options: {
+ disabled: null,
+ label: null,
+ icon: true,
+ classes: {
+ "ui-checkboxradio-label": "ui-corner-all",
+ "ui-checkboxradio-icon": "ui-corner-all"
+ }
+ },
+
+ _getCreateOptions: function() {
+ var disabled, labels,
+ that = this,
+ options = this._super() || {};
+
+ // We read the type here, because it makes more sense to throw a element type error first,
+ // rather then the error for lack of a label. Often if its the wrong type, it
+ // won't have a label (e.g. calling on a div, btn, etc)
+ this._readType();
+
+ labels = this.element.labels();
+
+ // Todo: For now we will use the last label we need to check about the best
+ // way to handle multiple labels with some accessability experts
+ this.label = $( labels[ labels.length - 1 ] );
+ if ( !this.label.length ) {
+ $.error( "No label found for checkboxradio widget" );
+ }
+
+ this.originalLabel = "";
+
+ // We need to get the label text but this may also need to make sure it does not contain the
+ // input itself.
+ this.label.contents().not( this.element ).each( function() {
+
+ // The label contents could be text html or a mix we concat each element to get a string
+ // representation of the label without the input as part of it.
+ that.originalLabel += this.nodeType === 3 ? $( this ).text() : this.outerHTML;
+ } );
+
+ // Set the label option if we found label text
+ if ( this.originalLabel ) {
+ options.label = this.originalLabel;
+ }
+
+ disabled = this.element[ 0 ].disabled;
+ if ( disabled != null ) {
+ options.disabled = disabled;
+ }
+ return options;
+ },
+
+ _create: function() {
+ var formCount,
+ checked = this.element[ 0 ].checked,
+ form = this.element.form();
+ this.formParent = !!form.length ? form : $( "body" );
+
+ formCount = this.formParent.data( "uiCheckboxradioCount" ) || 0;
+
+ // We don't use _on and _off here because we want all the checkboxes in the same form to use
+ // single handler which handles all the checkboxradio widgets in the form
+ if ( formCount === 0 ) {
+ this.formParent.on( "reset." + this.widgetFullName, formResetHandler );
+ }
+
+ this.formParent.data( "uiCheckboxradioCount", formCount + 1 );
+
+ if ( this.options.disabled == null ) {
+ this.options.disabled = this.element[ 0 ].disabled || false;
+ }
+
+ this._setOption( "disabled", this.options.disabled );
+ this._addClass( "ui-checkboxradio", "ui-helper-hidden-accessible" );
+ this._addClass( this.label, "ui-checkboxradio-label", "ui-button ui-widget" );
+
+ if ( this.type === "radio" ) {
+ this._addClass( this.label, "ui-checkboxradio-radio-label" );
+ }
+
+ if ( this.options.label && this.options.label !== this.originalLabel ) {
+ this._updateLabel();
+ } else if ( this.originalLabel ) {
+ this.options.label = this.originalLabel;
+ }
+
+ this._enhance();
+
+ if ( checked ) {
+ this._addClass( this.label, "ui-checkboxradio-checked", "ui-state-active" );
+ this._addClass( this.icon, null, "ui-state-hover" );
+ }
+
+ this._on( {
+ "change": "_toggleClasses",
+ "focus": function() {
+ this._addClass( this.label, null, "ui-state-focus ui-visual-focus" );
+ },
+ "blur": function() {
+ this._removeClass( this.label, null, "ui-state-focus ui-visual-focus" );
+ }
+ } );
+ },
+
+ _readType: function() {
+ var nodeName = this.element[ 0 ].nodeName.toLowerCase();
+ this.type = this.element[ 0 ].type;
+ if ( nodeName !== "input" || !/radio|checkbox/.test( this.type ) ) {
+ $.error( "Can't create checkboxradio on element.nodeName=" + nodeName +
+ " and element.type=" + this.type );
+ }
+ },
+
+ // Support jQuery Mobile enhanced option
+ _enhance: function() {
+ this._updateIcon( this.element[ 0 ].checked );
+ },
+
+ widget: function() {
+ return this.label;
+ },
+
+ _getRadioGroup: function() {
+ var name = this.element[ 0 ].name,
+ that = this,
+ radios = $( [] );
+
+ if ( name ) {
+ name = $.ui.escapeSelector( name );
+ radios = this.formParent.find( "[name='" + $.ui.escapeSelector( name ) + "']" ).filter( function() {
+ var form = $( this ).form();
+ return ( form.length ? form : $( "body" ) )[ 0 ] === that.formParent[ 0 ];
+ } );
+ }
+ return radios.not( this.element );
+ },
+
+ _toggleClasses: function() {
+ var checked = this.element[ 0 ].checked;
+ this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+
+ if ( this.options.icon && this.type === "checkbox" ) {
+
+ // We add ui-state-highlight to change the icon color
+ this._toggleClass( this.icon, null, "ui-icon-check ui-state-highlight", checked )
+ ._toggleClass( this.icon, null, "ui-icon-blank", !checked );
+ }
+ if ( this.type === "radio" ) {
+ this._getRadioGroup()
+ .each( function() {
+ var instance = $( this ).checkboxradio( "instance" );
+
+ if ( instance ) {
+ instance._removeClass( instance.label,
+ "ui-checkboxradio-checked", "ui-state-active" );
+ }
+ } );
+ }
+ },
+
+ _destroy: function() {
+ var formCount = this.formParent.data( "uiCheckboxradioCount" ) - 1;
+
+ this.formParent.data( "uiCheckboxradioCount", formCount );
+
+ if ( formCount === 0 ) {
+ this.formParent.off( "reset." + this.widgetFullName, formResetHandler );
+ }
+
+ if ( this.icon ) {
+ this.icon.remove();
+ this.iconSpace.remove();
+ }
+ },
+
+ _setOption: function( key, value ) {
+
+ // We don't alow the value to be set to nothing
+ if ( key === "label" && !value ) {
+ return;
+ }
+
+ this._super( key, value );
+
+ if ( key === "disabled" ) {
+ this._toggleClass( this.label, null, "ui-state-disabled", value );
+ this.element[ 0 ].disabled = value;
+
+ // Don't refresh if disabled
+ return;
+ }
+ this.refresh();
+ },
+
+ _updateIcon: function( checked ) {
+ var toAdd = "ui-icon ui-icon-background ";
+
+ if ( this.options.icon ) {
+ if ( !this.icon ) {
+ this.icon = $( "<span>" );
+ this.iconSpace = $( "<span> </span>" );
+ this._addClass( this.iconSpace, "ui-checkboxradio-icon-space" );
+ }
+
+ if ( this.type === "checkbox" ) {
+ toAdd += checked ? "ui-icon-check" : "ui-icon-blank";
+ this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
+ } else {
+ toAdd += "ui-icon-blank";
+ }
+ this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
+ if ( !checked ) {
+ this._removeClass( this.icon, null, "ui-icon-check" );
+ }
+ this.icon.prependTo( this.label ).after( this.iconSpace );
+ } else if ( this.icon !== undefined ) {
+ this.icon.remove();
+ this.iconSpace.remove();
+ delete this.icon;
+ }
+ },
+
+ _updateLabel: function() {
+
+ // Remove the contents of the label ( minus the icon, icon space, and input )
+ this.label.contents().not( this.element.add( this.icon ).add( this.iconSpace ) ).remove();
+ this.label.append( this.options.label );
+ },
+
+ refresh: function() {
+ var checked = this.element[ 0 ].checked,
+ isDisabled = this.element[ 0 ].disabled;
+
+ this._updateIcon( checked );
+ this._toggleClass( this.label, "ui-checkboxradio-checked", "ui-state-active", checked );
+ if ( this.options.label !== null ) {
+ this._updateLabel();
+ }
+
+ if ( isDisabled !== this.options.disabled ) {
+ this._setOptions( { "disabled": isDisabled } );
+ }
+ }
+
+} );
+
+return $.ui.checkboxradio;
+
+} ) );
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-08 23:40:21 +0000