mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Checkboxradio: Initial commit of new widget
This commit is contained in:
Alexander Schmitz
parent
02033262ee
commit
25d0c85718
70
demos/checkboxradio/default.html
Normal file
70
demos/checkboxradio/default.html
Normal 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>
|
||||
BIN
demos/checkboxradio/images/jquery-mobile.png
Normal file
BIN
demos/checkboxradio/images/jquery-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
demos/checkboxradio/images/jquery-ui.png
Normal file
BIN
demos/checkboxradio/images/jquery-ui.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
demos/checkboxradio/images/jquery.png
Normal file
BIN
demos/checkboxradio/images/jquery.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
demos/checkboxradio/images/qunit.png
Normal file
BIN
demos/checkboxradio/images/qunit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
demos/checkboxradio/images/sizzle.png
Normal file
BIN
demos/checkboxradio/images/sizzle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
18
demos/checkboxradio/index.html
Normal file
18
demos/checkboxradio/index.html
Normal 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
demos/checkboxradio/no-icons.html
Normal file
70
demos/checkboxradio/no-icons.html
Normal 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
demos/checkboxradio/product-selector.html
Normal file
127
demos/checkboxradio/product-selector.html
Normal 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
demos/checkboxradio/radiogroup.html
Normal file
39
demos/checkboxradio/radiogroup.html
Normal 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>
|
||||
90
demos/controlgroup/default.html
Normal file
90
demos/controlgroup/default.html
Normal file
@ -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>
|
||||
17
demos/controlgroup/index.html
Normal file
17
demos/controlgroup/index.html
Normal file
@ -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>
|
||||
58
demos/controlgroup/splitbutton.html
Normal file
58
demos/controlgroup/splitbutton.html
Normal file
@ -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>
|
||||
256
demos/controlgroup/toolbar.html
Normal file
256
demos/controlgroup/toolbar.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
69
tests/unit/checkboxradio/checkboxradio.html
Normal file
69
tests/unit/checkboxradio/checkboxradio.html
Normal file
@ -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>
|
||||
22
tests/unit/checkboxradio/common.js
Normal file
22
tests/unit/checkboxradio/common.js
Normal file
@ -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
|
||||
}
|
||||
});
|
||||
|
||||
} );
|
||||
102
tests/unit/checkboxradio/core.js
Normal file
102
tests/unit/checkboxradio/core.js
Normal file
@ -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"
|
||||
);
|
||||
});
|
||||
|
||||
} );
|
||||
113
tests/unit/checkboxradio/events.js
Normal file
113
tests/unit/checkboxradio/events.js
Normal file
@ -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();
|
||||
} );
|
||||
}
|
||||
);
|
||||
|
||||
} );
|
||||
97
tests/unit/checkboxradio/methods.js
Normal file
97
tests/unit/checkboxradio/methods.js
Normal file
@ -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" );
|
||||
});
|
||||
|
||||
} );
|
||||
189
tests/unit/checkboxradio/options.js
Normal file
189
tests/unit/checkboxradio/options.js
Normal file
@ -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" );
|
||||
|
||||
});
|
||||
|
||||
} );
|
||||
0
tests/unit/controlgroup/controlgroup_core.js
Normal file
0
tests/unit/controlgroup/controlgroup_core.js
Normal file
@ -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>
|
||||
|
||||
65
tests/visual/checkboxradio/checkboxradio.html
Normal file
65
tests/visual/checkboxradio/checkboxradio.html
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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");
|
||||
|
||||
33
themes/base/checkboxradio.css
Normal file
33
themes/base/checkboxradio.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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,
|
||||
|
||||
289
ui/checkboxradio.js
Normal file
289
ui/checkboxradio.js
Normal file
@ -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;
|
||||
|
||||
} ) );
|
||||
Loading…
Reference in New Issue
Block a user