mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Button: Initial commit of button re-factor
Move to using element stats rather then js class states remove ui-button-text spans. Removed button set
This commit is contained in:
Alexander Schmitz
parent
79d312f3f5
commit
02033262ee
@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Button - 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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#check" ).button();
|
||||
$( "#format" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#format { margin-top: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||
|
||||
<div id="format">
|
||||
<input type="checkbox" id="check1" /><label for="check1">B</label>
|
||||
<input type="checkbox" id="check2" /><label for="check2">I</label>
|
||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
|
||||
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -11,25 +11,33 @@
|
||||
<script src="../../ui/button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "input[type=submit], a, button" )
|
||||
.button()
|
||||
.on( "click", function( event ) {
|
||||
$( function() {
|
||||
$( ".widget input[type=submit], .widget a, .widget button" ).button();
|
||||
$( "button, input, a" ).click( function( event ) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="widget">
|
||||
<h1>Widget Buttons</h1>
|
||||
<button>A button element</button>
|
||||
|
||||
<button>A button element</button>
|
||||
<input type="submit" value="A submit button">
|
||||
|
||||
<input type="submit" value="A submit button">
|
||||
<a href="#">An anchor</a>
|
||||
</div>
|
||||
<h1>CSS Buttons</h1>
|
||||
<button class="ui-button ui-widget ui-corner-all">A button element</button>
|
||||
|
||||
<a href="#">An anchor</a>
|
||||
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
|
||||
|
||||
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
|
||||
<p>Buttons can be styled via the button widget or by adding the classes yourself. This avoids the JavaScript overhead if you don't need any of the methods provided by the button widget.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,38 +11,58 @@
|
||||
<script src="../../ui/button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
});
|
||||
$( function() {
|
||||
$( ".widget button" ).first()
|
||||
.button()
|
||||
.next().button( {
|
||||
icon: "ui-icon-gear",
|
||||
showLabel: false
|
||||
} ).next().button( {
|
||||
icon: "ui-icon-gear"
|
||||
} ).next().button( {
|
||||
icon: "ui-icon-gear",
|
||||
iconPosition: "end"
|
||||
} ).next().button( {
|
||||
icon: "ui-icon-gear",
|
||||
iconPosition: "top"
|
||||
} ).next().button( {
|
||||
icon: "ui-icon-gear",
|
||||
iconPosition: "bottom"
|
||||
} );
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with two icons</button>
|
||||
<button>Button with two icons and no text</button>
|
||||
|
||||
<div class="widget">
|
||||
<h1>Widget</h1>
|
||||
<button>Button with only text</button>
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with icon on the right</button>
|
||||
<button>Button with icon on the top</button>
|
||||
<button>Button with icon on the bottom</button>
|
||||
</div>
|
||||
<div class="css">
|
||||
<h1>CSS</h1>
|
||||
<button class="ui-button ui-widget ui-corner-all">
|
||||
Button with only text
|
||||
</button>
|
||||
<button class="ui-button ui-widget ui-corner-all ui-button-icon-only" title="Button with icon only">
|
||||
<span class="ui-icon ui-icon-gear"></span> Button with icon only
|
||||
</button>
|
||||
<button class="ui-button ui-widget ui-corner-all">
|
||||
<span class="ui-icon ui-icon-gear"></span> Button with icon on the left
|
||||
</button>
|
||||
<button class="ui-button ui-widget ui-corner-all">
|
||||
Button with icon on the right <span class="ui-icon ui-icon-gear"></span>
|
||||
</button>
|
||||
<button class="ui-button ui-widget ui-corner-all">
|
||||
<span class="ui-icon ui-icon-gear ui-widget-icon-block"></span> Button with icon on the top
|
||||
</button>
|
||||
<button class="ui-button ui-widget ui-corner-all">
|
||||
Button with icon on the bottom <span class="ui-icon ui-icon-gear ui-widget-icon-block"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-description">
|
||||
<p>Some buttons with various combinations of text and icons.</p>
|
||||
</div>
|
||||
|
||||
@ -9,11 +9,7 @@
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>jQuery UI Button - Radios</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>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#radio" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form>
|
||||
<div id="radio">
|
||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
|
||||
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A set of three radio buttons transformed into a button set.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -6,54 +6,23 @@
|
||||
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../lib/css.js" data-modules="core button"></script>
|
||||
<script src="../../lib/bootstrap.js" data-widget="button"></script>
|
||||
<script src="../../lib/bootstrap.js" data-widget="button" data-no-back-compat="true"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture">
|
||||
<form id="form1">
|
||||
<div><button id="button">Label</button></div>
|
||||
|
||||
<div><button id="button" class="foo">Label</button></div>
|
||||
|
||||
<div id="radio0" style="margin-top: 2em;">
|
||||
<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>
|
||||
<div id="checkbox0">
|
||||
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
|
||||
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
|
||||
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
|
||||
</div>
|
||||
<form>
|
||||
<div id="radio1" style="margin-top: 2em;">
|
||||
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
|
||||
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
|
||||
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div id="radio2" style="margin-top: 2em;">
|
||||
<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>
|
||||
<div><input id="submit" type="submit" value="Label"></div>
|
||||
</form>
|
||||
|
||||
<input type="checkbox" id="check"><label for="check">Toggle</label>
|
||||
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
|
||||
|
||||
<div><input id="submit" type="submit" value="Label"></div>
|
||||
|
||||
<button id="button1">Button</button>
|
||||
<form id="form2">
|
||||
<button id="button-disabled" disabled>Button</button>
|
||||
|
||||
<a href="#" id="anchor-button">Anchor Button</a>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
27
tests/unit/button/common-deprecated.js
Normal file
27
tests/unit/button/common-deprecated.js
Normal file
@ -0,0 +1,27 @@
|
||||
define( [
|
||||
"lib/common",
|
||||
"ui/button"
|
||||
], function( common ) {
|
||||
|
||||
common.testWidget( "button", {
|
||||
defaults: {
|
||||
classes: {
|
||||
"ui-button": "ui-corner-all"
|
||||
},
|
||||
disabled: null,
|
||||
icon: null,
|
||||
iconPosition: "beginning",
|
||||
icons: {
|
||||
primary: null,
|
||||
secondary: null
|
||||
},
|
||||
label: null,
|
||||
showLabel: true,
|
||||
text: true,
|
||||
|
||||
// Callbacks
|
||||
create: null
|
||||
}
|
||||
} );
|
||||
|
||||
} );
|
||||
@ -5,14 +5,14 @@ define( [
|
||||
|
||||
common.testWidget( "button", {
|
||||
defaults: {
|
||||
classes: {},
|
||||
disabled: null,
|
||||
icons: {
|
||||
primary: null,
|
||||
secondary: null
|
||||
classes: {
|
||||
"ui-button": "ui-corner-all"
|
||||
},
|
||||
disabled: null,
|
||||
icon: null,
|
||||
iconPosition: "beginning",
|
||||
label: null,
|
||||
text: true,
|
||||
showLabel: true,
|
||||
|
||||
// Callbacks
|
||||
create: null
|
||||
|
||||
@ -3,227 +3,19 @@ define( [
|
||||
"ui/widgets/button"
|
||||
], function( $ ) {
|
||||
|
||||
module( "button: core" );
|
||||
module( "Button: core" );
|
||||
|
||||
test( "checkbox", function( assert ) {
|
||||
expect( 4 );
|
||||
var input = $( "#check" ),
|
||||
label = $( "label[for=check]" );
|
||||
ok( input.is( ":visible" ) );
|
||||
ok( label.is( ":not(.ui-button)" ) );
|
||||
input.button();
|
||||
assert.hasClasses( input, "ui-helper-hidden-accessible" );
|
||||
assert.hasClasses( label, "ui-button" );
|
||||
} );
|
||||
|
||||
test( "radios", function( assert ) {
|
||||
expect( 8 );
|
||||
var inputs = $( "#radio0 input" ),
|
||||
labels = $( "#radio0 label" );
|
||||
ok( inputs.is( ":visible" ) );
|
||||
ok( labels.is( ":not(.ui-button)" ) );
|
||||
inputs.button();
|
||||
inputs.each( function() {
|
||||
assert.hasClasses( this, "ui-helper-hidden-accessible" );
|
||||
} );
|
||||
labels.each( function() {
|
||||
assert.hasClasses( this, "ui-button" );
|
||||
} );
|
||||
} );
|
||||
|
||||
test( "radio groups", function( assert ) {
|
||||
expect( 12 );
|
||||
|
||||
function assertClasses( noForm, form1, form2 ) {
|
||||
assert.hasClasses( $( "#radio0 .ui-button" + noForm ), "ui-state-active" );
|
||||
assert.hasClasses( $( "#radio1 .ui-button" + form1 ), "ui-state-active" );
|
||||
assert.hasClasses( $( "#radio2 .ui-button" + form2 ), "ui-state-active" );
|
||||
}
|
||||
|
||||
$( "input[type=radio]" ).button();
|
||||
assertClasses( ":eq(0)", ":eq(1)", ":eq(2)" );
|
||||
|
||||
// Click outside of forms
|
||||
$( "#radio0 .ui-button:eq(1)" ).trigger( "click" );
|
||||
assertClasses( ":eq(1)", ":eq(1)", ":eq(2)" );
|
||||
|
||||
// Click in first form
|
||||
$( "#radio1 .ui-button:eq(0)" ).trigger( "click" );
|
||||
assertClasses( ":eq(1)", ":eq(0)", ":eq(2)" );
|
||||
|
||||
// Click in second form
|
||||
$( "#radio2 .ui-button:eq(0)" ).trigger( "click" );
|
||||
assertClasses( ":eq(1)", ":eq(0)", ":eq(0)" );
|
||||
} );
|
||||
|
||||
test( "radio groups - ignore elements with same name", function() {
|
||||
expect( 1 );
|
||||
var form = $( "form:first" ),
|
||||
radios = form.find( "[type=radio]" ).button(),
|
||||
checkbox = $( "<input>", {
|
||||
type: "checkbox",
|
||||
name: radios.attr( "name" )
|
||||
} );
|
||||
|
||||
form.append( checkbox );
|
||||
radios.button( "refresh" );
|
||||
ok( true, "no exception from accessing button instance of checkbox" );
|
||||
} );
|
||||
|
||||
test( "input type submit, don't create child elements", function() {
|
||||
asyncTest( "Disabled button loses focus", function() {
|
||||
expect( 2 );
|
||||
var input = $( "#submit" );
|
||||
deepEqual( input.children().length, 0 );
|
||||
input.button();
|
||||
deepEqual( input.children().length, 0 );
|
||||
} );
|
||||
var element = $( "#button" ).button();
|
||||
|
||||
test( "buttonset", function( assert ) {
|
||||
expect( 6 );
|
||||
var set = $( "#radio1" ).buttonset();
|
||||
assert.hasClasses( set, "ui-buttonset" );
|
||||
deepEqual( set.children( ".ui-button" ).length, 3 );
|
||||
deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
|
||||
ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
|
||||
ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
|
||||
ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
|
||||
} );
|
||||
|
||||
test( "buttonset (rtl)", function( assert ) {
|
||||
expect( 6 );
|
||||
var set,
|
||||
parent = $( "#radio1" ).parent();
|
||||
|
||||
// Set to rtl
|
||||
parent.attr( "dir", "rtl" );
|
||||
|
||||
set = $( "#radio1" ).buttonset();
|
||||
assert.hasClasses( set, "ui-buttonset" );
|
||||
deepEqual( set.children( ".ui-button" ).length, 3 );
|
||||
deepEqual( set.children( "input[type=radio].ui-helper-hidden-accessible" ).length, 3 );
|
||||
ok( set.children( "label:eq(0)" ).is( ".ui-button.ui-corner-right:not(.ui-corner-all)" ) );
|
||||
ok( set.children( "label:eq(1)" ).is( ".ui-button:not(.ui-corner-all)" ) );
|
||||
ok( set.children( "label:eq(2)" ).is( ".ui-button.ui-corner-left:not(.ui-corner-all)" ) );
|
||||
} );
|
||||
|
||||
// TODO: simulated click events don't behave like real click events in IE
|
||||
// remove this when simulate properly simulates this
|
||||
// see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
|
||||
if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
|
||||
asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function( assert ) {
|
||||
expect( 3 );
|
||||
|
||||
$( "#check2" ).button().on( "change", function() {
|
||||
var lbl = $( this ).button( "widget" );
|
||||
ok( this.checked, "checked ok" );
|
||||
ok( lbl.attr( "aria-pressed" ) === "true", "aria ok" );
|
||||
assert.hasClasses( lbl, "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.
|
||||
element.focus();
|
||||
setTimeout( function() {
|
||||
$( "#check2" ).button( "widget" ).simulate( "click" );
|
||||
start();
|
||||
}, 1 );
|
||||
} );
|
||||
}
|
||||
|
||||
test( "#7092 - button creation that requires a matching label does not find label in all cases", function( assert ) {
|
||||
expect( 5 );
|
||||
var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
|
||||
group.find( "input[type=checkbox]" ).button();
|
||||
assert.hasClasses( group.find( "label" ), "ui-button" );
|
||||
equal( element[ 0 ], $.ui.safeActiveElement( document ), "Button is focused" );
|
||||
|
||||
group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
|
||||
group.filter( "input[type=checkbox]" ).button();
|
||||
assert.hasClasses( group.filter( "label" ), "ui-button" );
|
||||
|
||||
group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
|
||||
group.find( "input[type=checkbox]" ).button();
|
||||
assert.hasClasses( group.filter( "label" ), "ui-button" );
|
||||
|
||||
group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
|
||||
group.find( "input[type=checkbox]" ).button();
|
||||
assert.hasClasses( group.find( "label" ), "ui-button" );
|
||||
|
||||
group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
|
||||
group.filter( "input[type=checkbox]" ).button();
|
||||
assert.hasClasses( group.find( "label" ), "ui-button" );
|
||||
} );
|
||||
|
||||
test( "#5946 - buttonset should ignore buttons that are not :visible", function( assert ) {
|
||||
expect( 2 );
|
||||
$( "#radio01" ).next().addBack().hide();
|
||||
var set = $( "#radio0" ).buttonset( { items: "input[type=radio]:visible" } );
|
||||
ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
|
||||
assert.hasClasses( set.find( "label:eq(1)" ), "ui-button ui-corner-left" );
|
||||
} );
|
||||
|
||||
test( "#6262 - buttonset not applying ui-corner to invisible elements", function( assert ) {
|
||||
expect( 3 );
|
||||
$( "#radio0" ).hide();
|
||||
var set = $( "#radio0" ).buttonset();
|
||||
assert.hasClasses( set.find( "label:eq(0)" ), "ui-button ui-corner-left" );
|
||||
assert.hasClasses( set.find( "label:eq(1)" ), "ui-button" );
|
||||
assert.hasClasses( set.find( "label:eq(2)" ), "ui-button ui-corner-right" );
|
||||
|
||||
} );
|
||||
|
||||
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function( assert ) {
|
||||
expect( 2 );
|
||||
var form = $( "<form>" +
|
||||
"<button></button>" +
|
||||
"<label for='c1'></label><input id='c1' type='checkbox' checked>" +
|
||||
"</form>" ),
|
||||
button = form.find( "button" ).button(),
|
||||
checkbox = form.find( "input[type=checkbox]" ).button();
|
||||
|
||||
checkbox.prop( "checked", false ).button( "refresh" );
|
||||
assert.lacksClasses( checkbox.button( "widget" ), "ui-state-active" );
|
||||
|
||||
form.get( 0 ).reset();
|
||||
|
||||
// If a button has been removed, refresh should not be called on it when
|
||||
// its corresponding form is reset.
|
||||
button.remove();
|
||||
|
||||
setTimeout( function() {
|
||||
assert.hasClasses( checkbox.button( "widget" ), "ui-state-active" );
|
||||
start();
|
||||
}, 1 );
|
||||
} );
|
||||
|
||||
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function( assert ) {
|
||||
expect( 2 );
|
||||
var check = $( "#check" ).button(),
|
||||
label = $( "label[for='check']" );
|
||||
assert.lacksClasses( label, "ui-state-focus" );
|
||||
check.trigger( "focus" );
|
||||
setTimeout( function() {
|
||||
assert.hasClasses( label, "ui-state-focus" );
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
|
||||
test( "#7534 - Button label selector works for ids with \":\"", function( assert ) {
|
||||
expect( 1 );
|
||||
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
|
||||
group.find( "input" ).button();
|
||||
assert.hasClasses( group.find( "label" ), "ui-button", "Found an id with a :" );
|
||||
} );
|
||||
|
||||
asyncTest( "#9169 - Disabled button maintains ui-state-focus", function( assert ) {
|
||||
expect( 2 );
|
||||
var element = $( "#button1" ).button();
|
||||
element[ 0 ].focus();
|
||||
setTimeout( function() {
|
||||
assert.hasClasses( element, "ui-state-focus" );
|
||||
element.button( "disable" );
|
||||
assert.lacksClasses( element, "ui-state-focus",
|
||||
"button does not have ui-state-focus when disabled" );
|
||||
notEqual( element[ 0 ], $.ui.safeActiveElement( document ), "Button has had focus removed" );
|
||||
start();
|
||||
} );
|
||||
} );
|
||||
|
||||
60
tests/unit/button/deprecated.html
Normal file
60
tests/unit/button/deprecated.html
Normal file
@ -0,0 +1,60 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button Deprecated Test Suite</title>
|
||||
|
||||
<script src="../../../external/requirejs/require.js"></script>
|
||||
<script src="../../lib/css.js" data-modules="core button"></script>
|
||||
<script src="../../lib/bootstrap.js" data-widget="button" data-deprecated="true"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture">
|
||||
|
||||
<div class="buttonset"><button id="button">Label</button><button>button 2</button></div>
|
||||
|
||||
<div id="radio0" style="margin-top: 2em;">
|
||||
<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>
|
||||
<div id="checkbox0">
|
||||
<input type="checkbox" id="checkbox01" name="checkbox"><label for="checkbox01">Choice 1</label>
|
||||
<input type="checkbox" id="checkbox02" name="checkbox"><label for="checkbox02">Choice 2</label>
|
||||
<input type="checkbox" id="checkbox03" name="checkbox"><label for="checkbox03">Choice 3</label>
|
||||
</div>
|
||||
<form>
|
||||
<div id="radio1" style="margin-top: 2em;">
|
||||
<input type="radio" id="radio11" name="radio"><label for="radio11">Choice 1</label>
|
||||
<input type="radio" id="radio12" name="radio" checked="checked"><label for="radio12">Choice 2</label>
|
||||
<input type="radio" id="radio13" name="radio"><label for="radio13">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
<form>
|
||||
<div id="radio2" style="margin-top: 2em;">
|
||||
<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>
|
||||
|
||||
<div><input id="submit" type="submit" value="Label"></div>
|
||||
<button id="button-disabled" disabled>Button</button>
|
||||
<button id="button1">Button</button>
|
||||
<a href="#" id="anchor-button">Anchor Button</a>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
196
tests/unit/button/deprecated.js
Normal file
196
tests/unit/button/deprecated.js
Normal file
@ -0,0 +1,196 @@
|
||||
define( [
|
||||
"jquery",
|
||||
"ui/button"
|
||||
], function( $ ) {
|
||||
|
||||
module( "Button (deprecated): core" );
|
||||
|
||||
test( "Calling button on a checkbox input calls checkboxradio widget", function() {
|
||||
var checkbox = $( "#checkbox01" );
|
||||
|
||||
expect( 2 );
|
||||
checkbox.button();
|
||||
|
||||
ok( !!checkbox.checkboxradio( "instance" ),
|
||||
"Calling button on a checkbox creates checkboxradio instance" );
|
||||
ok( !checkbox.checkboxradio( "option", "icon" ),
|
||||
"Calling button on a checkbox sets the checkboxradio icon option to false" );
|
||||
} );
|
||||
|
||||
test( "Calling buttonset calls controlgroup", function() {
|
||||
var controlgroup = $( ".buttonset" );
|
||||
|
||||
expect( 1 );
|
||||
controlgroup.buttonset();
|
||||
|
||||
ok( controlgroup.is( ":ui-controlgroup" ), "Calling buttonset creates controlgroup instance" );
|
||||
} );
|
||||
|
||||
module( "Button (deprecated): methods" );
|
||||
|
||||
test( "destroy", function( assert ) {
|
||||
expect( 1 );
|
||||
assert.domEqual( "#checkbox02", function() {
|
||||
$( "#checkbox02" ).button().button( "destroy" );
|
||||
} );
|
||||
} );
|
||||
|
||||
test( "refresh: Ensure disabled state is preserved correctly.", function() {
|
||||
expect( 5 );
|
||||
var element = null;
|
||||
|
||||
element = $( "#checkbox02" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
|
||||
ok( element.prop( "disabled" ), "Input remains disabled after refresh" );
|
||||
|
||||
element = $( "#radio02" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
|
||||
|
||||
element = $( "#checkbox02" );
|
||||
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
|
||||
ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
|
||||
|
||||
element = $( "#radio02" );
|
||||
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
|
||||
ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
|
||||
|
||||
} );
|
||||
|
||||
module( "button (deprecated): options" );
|
||||
|
||||
test( "Setting items option on buttonset sets the button properties on the items option", function() {
|
||||
expect( 2 );
|
||||
|
||||
var controlgroup = $( ".buttonset" );
|
||||
|
||||
controlgroup.buttonset( { items: "bar" } );
|
||||
equal( controlgroup.controlgroup( "option", "items.button" ), "bar",
|
||||
"items.button set when setting items option on init on buttonset" );
|
||||
|
||||
controlgroup.buttonset( "option", "items", "foo" );
|
||||
equal( controlgroup.controlgroup( "option", "items.button" ), "foo",
|
||||
"items.button set when setting items option on buttonset" );
|
||||
} );
|
||||
|
||||
test( "disabled, null", function() {
|
||||
expect( 2 );
|
||||
|
||||
$( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
|
||||
deepEqual( $( "#radio02" ).button( "option", "disabled" ), true,
|
||||
"disabled option set to true" );
|
||||
deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
|
||||
} );
|
||||
|
||||
test( "text / showLabel options proxied", function() {
|
||||
expect( 8 );
|
||||
var button = $( "#button" );
|
||||
button.button( {
|
||||
text: false,
|
||||
icon: "ui-icon-gear"
|
||||
} );
|
||||
equal( button.button( "option", "showLabel" ), false,
|
||||
"Setting the text option to false sets the showLabel option to false on init" );
|
||||
button.button( "option", "showLabel", true );
|
||||
equal( button.button( "option", "text" ), true,
|
||||
"Setting showLabel true with option method sets text option to true" );
|
||||
button.button( "option", "text", false );
|
||||
equal( button.button( "option", "showLabel" ), false,
|
||||
"Setting text false with option method sets showLabel option to false" );
|
||||
button.button( "option", "text", true );
|
||||
equal( button.button( "option", "showLabel" ), true,
|
||||
"Setting text true with option method sets showLabel option to true" );
|
||||
button.button( "option", "showLabel", false );
|
||||
equal( button.button( "option", "text" ), false,
|
||||
"Setting showLabel false with option method sets text option to false" );
|
||||
button.button( "destroy" );
|
||||
button.button( {
|
||||
text: true,
|
||||
icon: "ui-icon-gear"
|
||||
} );
|
||||
equal( button.button( "option", "showLabel" ), true,
|
||||
"Setting the text option to true sets the showLabel option to true on init" );
|
||||
button.button( "destroy" );
|
||||
button.button( {
|
||||
showLabel: true,
|
||||
icon: "ui-icon-gear"
|
||||
} );
|
||||
equal( button.button( "option", "text" ), true,
|
||||
"Setting the showLabel option to true sets the text option to true on init" );
|
||||
button.button( "destroy" );
|
||||
button.button( {
|
||||
showLabel: false,
|
||||
icon: "ui-icon-gear"
|
||||
} );
|
||||
equal( button.button( "option", "text" ), false,
|
||||
"Setting the showLabel option to false sets the text option to false on init" );
|
||||
} );
|
||||
|
||||
test( "icon / icons options properly proxied", function() {
|
||||
expect( 10 );
|
||||
|
||||
var button = $( "#button" );
|
||||
|
||||
button.button( {
|
||||
icon: "foo"
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icons.primary" ), "foo",
|
||||
"Icon option properly proxied on init" );
|
||||
|
||||
button.button( {
|
||||
icon: "bar"
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icons.primary" ), "bar",
|
||||
"Icon option properly proxied with option method" );
|
||||
|
||||
button.button( {
|
||||
icons: {
|
||||
primary: "foo"
|
||||
}
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icon" ), "foo",
|
||||
"Icons primary option properly proxied with option method" );
|
||||
equal( button.button( "option", "iconPosition" ), "beginning",
|
||||
"Icons primary option sets iconPosition option to beginning" );
|
||||
|
||||
button.button( {
|
||||
icons: {
|
||||
secondary: "bar"
|
||||
}
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icon" ), "bar",
|
||||
"Icons secondary option properly proxied with option method" );
|
||||
equal( button.button( "option", "iconPosition" ), "end",
|
||||
"Icons secondary option sets iconPosition option to end" );
|
||||
|
||||
button.button( "destroy" );
|
||||
|
||||
button.button( {
|
||||
icons: {
|
||||
primary: "foo"
|
||||
}
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icon" ), "foo",
|
||||
"Icons primary option properly proxied on init" );
|
||||
equal( button.button( "option", "iconPosition" ), "beginning",
|
||||
"Icons primary option sets iconPosition option to beginning on init" );
|
||||
|
||||
button.button( {
|
||||
icons: {
|
||||
secondary: "bar"
|
||||
}
|
||||
} );
|
||||
|
||||
equal( button.button( "option", "icon" ), "bar",
|
||||
"Icons secondary option properly proxied on init" );
|
||||
equal( button.button( "option", "iconPosition" ), "end",
|
||||
"Icons secondary option sets iconPosition option to end on init" );
|
||||
} );
|
||||
|
||||
} );
|
||||
@ -3,34 +3,18 @@ define( [
|
||||
"ui/widgets/button"
|
||||
], function( $ ) {
|
||||
|
||||
module( "button: events" );
|
||||
module( "Button: events" );
|
||||
|
||||
test( "buttonset works with single-quote named elements (#7505)", function() {
|
||||
asyncTest( "Anchor recieves click event when spacebar is pressed", function() {
|
||||
expect( 1 );
|
||||
$( "#radio3" ).buttonset();
|
||||
$( "#radio33" ).on( "click", function() {
|
||||
ok( true, "button clicks work with single-quote named elements" );
|
||||
} ).trigger( "click" );
|
||||
} );
|
||||
var element = $( "#anchor-button" ).button();
|
||||
|
||||
asyncTest( "when button loses focus, ensure active state is removed (#8559)", function( assert ) {
|
||||
expect( 1 );
|
||||
|
||||
var element = $( "#button" ).button();
|
||||
|
||||
element.one( "keypress", function() {
|
||||
element.one( "blur", function() {
|
||||
assert.lacksClasses( element, "ui-state-active", "button loses active state appropriately" );
|
||||
element.on( "click", function() {
|
||||
ok( true, "click occcured as a result of spacebar" );
|
||||
start();
|
||||
} ).trigger( "blur" );
|
||||
} );
|
||||
|
||||
element.trigger( "focus" );
|
||||
setTimeout( function() {
|
||||
element
|
||||
.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } )
|
||||
.simulate( "keypress", { keyCode: $.ui.keyCode.ENTER } );
|
||||
} );
|
||||
element.trigger( $.Event( "keyup", { keyCode: $.ui.keyCode.SPACE } ) );
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
@ -3,7 +3,7 @@ define( [
|
||||
"ui/widgets/button"
|
||||
], function( $ ) {
|
||||
|
||||
module( "button: methods" );
|
||||
module( "Button: methods" );
|
||||
|
||||
test( "destroy", function( assert ) {
|
||||
expect( 1 );
|
||||
@ -13,61 +13,22 @@ test( "destroy", function( assert ) {
|
||||
} );
|
||||
|
||||
test( "refresh: Ensure disabled state is preserved correctly.", function() {
|
||||
expect( 8 );
|
||||
expect( 3 );
|
||||
|
||||
var element = $( "<a href='#'></a>" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "Anchor button should remain disabled after refresh" ); //See #8237
|
||||
|
||||
element = $( "<div></div>" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "<div> buttons should remain disabled after refresh" );
|
||||
ok( element.button( "option", "disabled" ),
|
||||
"Anchor button should remain disabled after refresh" );
|
||||
|
||||
element = $( "<button></button>" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "<button> should remain disabled after refresh" );
|
||||
|
||||
element = $( "<input type='checkbox'>" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "Checkboxes should remain disabled after refresh" );
|
||||
|
||||
element = $( "<input type='radio'>" );
|
||||
element.button( { disabled: true } ).button( "refresh" );
|
||||
ok( element.button( "option", "disabled" ), "Radio buttons should remain disabled after refresh" );
|
||||
|
||||
element = $( "<button></button>" );
|
||||
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
|
||||
ok( !element.button( "option", "disabled" ), "Changing a <button>'s disabled property should update the state after refresh." ); //See #8828
|
||||
ok( !element.button( "option", "disabled" ),
|
||||
"Changing a <button>'s disabled property should update the state after refresh." );
|
||||
|
||||
element = $( "<input type='checkbox'>" );
|
||||
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
|
||||
ok( !element.button( "option", "disabled" ), "Changing a checkbox's disabled property should update the state after refresh." );
|
||||
|
||||
element = $( "<input type='radio'>" );
|
||||
element.button( { disabled: true } ).prop( "disabled", false ).button( "refresh" );
|
||||
ok( !element.button( "option", "disabled" ), "Changing a radio button's disabled property should update the state after refresh." );
|
||||
} );
|
||||
|
||||
// #8975
|
||||
test( "refresh: buttonset should turn added elements into button widgets", function() {
|
||||
expect( 2 );
|
||||
var radioButtonset = $( "#radio0" ).buttonset(),
|
||||
checkboxButtonset = $( "#checkbox0" ).buttonset();
|
||||
|
||||
radioButtonset.append(
|
||||
"<input type='radio' name='radio' id='radio04'>" +
|
||||
"<label for='radio04'>Choice 4</label>"
|
||||
);
|
||||
checkboxButtonset.append(
|
||||
"<input type='checkbox' name='checkbox' id='checkbox04'>" +
|
||||
"<label for='checkbox04'>Choice 4</label>"
|
||||
);
|
||||
|
||||
radioButtonset.buttonset( "refresh" );
|
||||
checkboxButtonset.buttonset( "refresh" );
|
||||
|
||||
equal( radioButtonset.find( ":ui-button" ).length, 4, "radio" );
|
||||
equal( checkboxButtonset.find( ":ui-button" ).length, 4, "checkbox" );
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
@ -6,152 +6,170 @@ define( [
|
||||
module( "button: options" );
|
||||
|
||||
test( "disabled, explicit value", function( assert ) {
|
||||
expect( 7 );
|
||||
expect( 8 );
|
||||
|
||||
var element = $( "#radio01" ).button( { disabled: false } );
|
||||
deepEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
|
||||
deepEqual( element.prop( "disabled" ), false, "element is disabled" );
|
||||
var element = $( "#button" ).button( { disabled: false } );
|
||||
|
||||
strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
|
||||
strictEqual( element.prop( "disabled" ), false, "Disabled property is false" );
|
||||
|
||||
assert.lacksClasses( element.button( "widget" ), "ui-state-disabled ui-button-disabled" );
|
||||
|
||||
element = $( "#radio02" ).button( { disabled: true } );
|
||||
element = $( "#button" ).button( { disabled: true } );
|
||||
|
||||
ok( !element.button( "widget" ).attr( "aria-disabled" ), "element does not get aria-disabled" );
|
||||
assert.hasClasses( element.button( "widget" ), "ui-button-disabled ui-state-disabled" );
|
||||
assert.hasClasses( element.button( "widget" ), "ui-state-disabled" );
|
||||
strictEqual( element.button( "widget" ).attr( "aria-disabled" ), undefined,
|
||||
"element does not get aria-disabled" );
|
||||
assert.hasClasses( element.button( "widget" ), "ui-button-disabled" );
|
||||
|
||||
deepEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
|
||||
deepEqual( element.prop( "disabled" ), true, "element is not disabled" );
|
||||
strictEqual( element.button( "option", "disabled" ), true, "disabled option set to true" );
|
||||
strictEqual( element.prop( "disabled" ), true, "Disabled property is set" );
|
||||
} );
|
||||
|
||||
// We are testing the default here because the default null is a special value which means to check
|
||||
// the DOM. We need to make sure this happens correctly. Checking the options should never return
|
||||
// null, it should always be true or false.
|
||||
test( "disabled, null", function() {
|
||||
expect( 4 );
|
||||
$( "#radio01" ).button( { disabled: null } );
|
||||
deepEqual( false, $( "#radio01" ).button( "option", "disabled" ),
|
||||
"disabled option set to false" );
|
||||
deepEqual( false, $( "#radio01" ).prop( "disabled" ), "element is disabled" );
|
||||
var element = $( "#button" ),
|
||||
elementDisabled = $( "#button-disabled" );
|
||||
|
||||
$( "#radio02" ).prop( "disabled", true ).button( { disabled: null } );
|
||||
deepEqual( true, $( "#radio02" ).button( "option", "disabled" ),
|
||||
element.add( elementDisabled ).button( { disabled: null } );
|
||||
strictEqual( element.button( "option", "disabled" ), false, "disabled option set to false" );
|
||||
strictEqual( element.prop( "disabled" ), false, "element is disabled" );
|
||||
strictEqual( elementDisabled.button( "option", "disabled" ), true,
|
||||
"disabled option set to true" );
|
||||
deepEqual( true, $( "#radio02" ).prop( "disabled" ), "element is not disabled" );
|
||||
strictEqual( elementDisabled.prop( "disabled" ), true, "element is disabled" );
|
||||
} );
|
||||
|
||||
test( "disabled, ui-state-active is removed unless checkbox or radio", function( assert ) {
|
||||
expect( 12 );
|
||||
var elements = [
|
||||
$( "<input type='button'>" ),
|
||||
$( "<button></button>" ),
|
||||
$( "<a></a>" ),
|
||||
$( "<div></div>" ),
|
||||
$( "<input type='checkbox' id='checkbox' checked><label for='checkbox'></label>" ),
|
||||
$( "<input type='radio' id='radio' checked><label for='radio'></label>" )
|
||||
];
|
||||
test( "showLabel, false, without icon", function( assert ) {
|
||||
expect( 4 );
|
||||
|
||||
$.each( elements, function() {
|
||||
var element = $( this ).first().button(),
|
||||
buttonElement = element.button( "widget" ),
|
||||
elementType = element.prop( "nodeName" ).toLowerCase();
|
||||
|
||||
if ( element.is( "input" ) ) {
|
||||
elementType += ":" + element.attr( "type" );
|
||||
}
|
||||
|
||||
element.trigger( "mousedown" );
|
||||
assert.hasClasses( buttonElement, "ui-state-active",
|
||||
"[" + elementType + "] has ui-state-active class after mousedown." );
|
||||
|
||||
element.button( "disable" );
|
||||
if ( element.is( "[type=checkbox], [type=radio]" ) ) {
|
||||
assert.hasClasses( buttonElement, "ui-state-active",
|
||||
"Disabled [" + elementType + "] has ui-state-active class." );
|
||||
} else {
|
||||
assert.lacksClasses( buttonElement, "ui-state-active",
|
||||
"Disabled [" + elementType + "] does not have ui-state-active class." );
|
||||
}
|
||||
var button = $( "#button" ).button( {
|
||||
showLabel: false
|
||||
} );
|
||||
|
||||
assert.lacksClasses( button, "ui-button-icon-only" );
|
||||
strictEqual( button.button( "option", "showLabel" ), true,
|
||||
"showLabel false only allowed if icon true" );
|
||||
|
||||
button.button( "option", "showLabel", false );
|
||||
assert.lacksClasses( button, "ui-button-icon-only" );
|
||||
strictEqual( button.button( "option", "showLabel" ), true,
|
||||
"showLabel false only allowed if icon true" );
|
||||
} );
|
||||
|
||||
test( "text false without icon", function() {
|
||||
test( "showLabel, false, with icon", function( assert ) {
|
||||
expect( 1 );
|
||||
$( "#button" ).button( {
|
||||
text: false
|
||||
var button = $( "#button" ).button( {
|
||||
showLabel: false,
|
||||
icon: "iconclass"
|
||||
} );
|
||||
ok( $( "#button" ).is( ".ui-button-text-only:not(.ui-button-icon-only)" ) );
|
||||
|
||||
$( "#button" ).button( "destroy" );
|
||||
} );
|
||||
|
||||
test( "text false with icon", function() {
|
||||
expect( 1 );
|
||||
$( "#button" ).button( {
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "iconclass"
|
||||
}
|
||||
} );
|
||||
ok( $( "#button" ).is( ".ui-button-icon-only:not(.ui-button-text):has(span.ui-icon.iconclass)" ) );
|
||||
|
||||
$( "#button" ).button( "destroy" );
|
||||
assert.hasClasses( button, "ui-button ui-corner-all ui-widget ui-button-icon-only" );
|
||||
} );
|
||||
|
||||
test( "label, default", function() {
|
||||
expect( 2 );
|
||||
$( "#button" ).button();
|
||||
deepEqual( $( "#button" ).text(), "Label" );
|
||||
deepEqual( $( "#button" ).button( "option", "label" ), "Label" );
|
||||
var button = $( "#button" ).button();
|
||||
|
||||
$( "#button" ).button( "destroy" );
|
||||
deepEqual( button.text(), "Label" );
|
||||
deepEqual( button.button( "option", "label" ), "Label" );
|
||||
} );
|
||||
|
||||
test( "label", function() {
|
||||
test( "label, explicit value", function() {
|
||||
expect( 2 );
|
||||
$( "#button" ).button( {
|
||||
var button = $( "#button" ).button( {
|
||||
label: "xxx"
|
||||
} );
|
||||
deepEqual( $( "#button" ).text(), "xxx" );
|
||||
deepEqual( $( "#button" ).button( "option", "label" ), "xxx" );
|
||||
|
||||
$( "#button" ).button( "destroy" );
|
||||
deepEqual( button.text(), "xxx" );
|
||||
deepEqual( button.button( "option", "label" ), "xxx" );
|
||||
} );
|
||||
|
||||
test( "label default with input type submit", function() {
|
||||
test( "label, default, with input type submit", function() {
|
||||
expect( 2 );
|
||||
deepEqual( $( "#submit" ).button().val(), "Label" );
|
||||
deepEqual( $( "#submit" ).button( "option", "label" ), "Label" );
|
||||
var button = $( "#submit" ).button();
|
||||
|
||||
deepEqual( button.val(), "Label" );
|
||||
deepEqual( button.button( "option", "label" ), "Label" );
|
||||
} );
|
||||
|
||||
test( "label with input type submit", function() {
|
||||
test( "label, explicit value, with input type submit", function() {
|
||||
expect( 2 );
|
||||
var label = $( "#submit" ).button( {
|
||||
var button = $( "#submit" ).button( {
|
||||
label: "xxx"
|
||||
} ).val();
|
||||
deepEqual( label, "xxx" );
|
||||
deepEqual( $( "#submit" ).button( "option", "label" ), "xxx" );
|
||||
} );
|
||||
|
||||
test( "icons", function() {
|
||||
expect( 1 );
|
||||
$( "#button" ).button( {
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "iconclass",
|
||||
secondary: "iconclass2"
|
||||
}
|
||||
} );
|
||||
ok( $( "#button" ).is( ":has(span.ui-icon.ui-button-icon-primary.iconclass):has(span.ui-icon.ui-button-icon-secondary.iconclass2)" ) );
|
||||
|
||||
$( "#button" ).button( "destroy" );
|
||||
deepEqual( button.val(), "xxx" );
|
||||
deepEqual( button.button( "option", "label" ), "xxx" );
|
||||
} );
|
||||
|
||||
test( "#5295 - button does not remove hoverstate if disabled", function( assert ) {
|
||||
expect( 1 );
|
||||
var btn = $( "#button" ).button();
|
||||
btn.on( "hover", function() {
|
||||
btn.button( "disable" );
|
||||
} );
|
||||
btn.trigger( "mouseenter" );
|
||||
btn.trigger( "mouseleave" );
|
||||
assert.lacksClasses( btn, "ui-state-hover" );
|
||||
test( "icon", function( assert ) {
|
||||
expect( 4 );
|
||||
var button = $( "#button" ).button( {
|
||||
showLabel: false,
|
||||
icon: "iconclass"
|
||||
} ),
|
||||
icon = button.find( ".ui-icon" );
|
||||
|
||||
assert.hasClasses( icon, "iconclass" );
|
||||
equal( icon.length, 1, "button with icon option set has icon" );
|
||||
|
||||
button.button( "option", "icon", false );
|
||||
equal( button.find( ".ui-icon" ).length, 0, "setting icon to false removes the icon" );
|
||||
|
||||
button.button( "option", "icon", "iconclass" );
|
||||
ok( button.find( ".ui-icon" ).length, "setting icon to a value adds the icon" );
|
||||
|
||||
} );
|
||||
|
||||
test( "icon position", function( assert ) {
|
||||
expect( 22 );
|
||||
|
||||
var button = $( "#button" ).button( {
|
||||
icon: "ui-icon-gear"
|
||||
} ),
|
||||
icon = button.find( ".ui-icon" ),
|
||||
space = button.find( ".ui-button-icon-space" );
|
||||
|
||||
equal( icon.length, 1, "button with icon option set has icon" );
|
||||
equal( button.button( "option", "iconPosition" ), "beginning",
|
||||
"Button has iconPosition beginning by default" );
|
||||
equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is begining" );
|
||||
equal( icon.next()[ 0 ], space[ 0 ], "icon is followed by a space when position is begining" );
|
||||
equal( space.text(), " ",
|
||||
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
|
||||
assert.lacksClasses( icon, "ui-widget-icon-block" );
|
||||
|
||||
button.button( "option", "iconPosition", "end" );
|
||||
icon = button.find( ".ui-icon" );
|
||||
space = button.find( ".ui-button-icon-space" );
|
||||
equal( icon.length, 1, "Changing position to end does not re-create or duplicate icon" );
|
||||
equal( button.button( "option", "iconPosition" ), "end", "Button has iconPosition end" );
|
||||
equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is appended when position is end" );
|
||||
equal( icon.prev()[ 0 ], space[ 0 ], "icon is preceeded by a space when position is end" );
|
||||
equal( space.text(), " ",
|
||||
"ui-button-icon-space contains a breaking space iconPosition:beginning" );
|
||||
assert.lacksClasses( icon, "ui-widget-icon-block" );
|
||||
|
||||
button.button( "option", "iconPosition", "top" );
|
||||
icon = button.find( ".ui-icon" );
|
||||
equal( icon.length, 1, "Changing position to top does not re-create or duplicate icon" );
|
||||
equal( button.button( "option", "iconPosition" ), "top", "Button has iconPosition top" );
|
||||
equal( button.contents()[ 0 ], icon[ 0 ], "icon is prepended when position is top" );
|
||||
ok( !button.find( "ui-button-icon-space" ).length,
|
||||
"Button should not have an iconSpace with position: top" );
|
||||
assert.hasClasses( icon, "ui-widget-icon-block" );
|
||||
|
||||
button.button( "option", "iconPosition", "bottom" );
|
||||
icon = button.find( ".ui-icon" );
|
||||
equal( icon.length, 1, "Changing position to bottom does not re-create or duplicate icon" );
|
||||
equal( button.button( "option", "iconPosition" ), "bottom", "Button has iconPosition top" );
|
||||
equal( button.contents().last()[ 0 ], icon[ 0 ], "icon is prepended when position is bottom" );
|
||||
ok( !button.find( "ui-button-icon-space" ).length,
|
||||
"Button should not have an iconSpace with position: bottom" );
|
||||
assert.hasClasses( icon, "ui-widget-icon-block" );
|
||||
|
||||
} );
|
||||
|
||||
} );
|
||||
|
||||
@ -10,17 +10,13 @@
|
||||
$( this ).children()
|
||||
.eq( 0 )
|
||||
.button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-help"
|
||||
}
|
||||
showLabel: false,
|
||||
icon: "ui-icon-help"
|
||||
})
|
||||
.end()
|
||||
.eq( 1 )
|
||||
.button({
|
||||
icons: {
|
||||
primary: "ui-icon-help"
|
||||
},
|
||||
icon: "ui-icon-help",
|
||||
disabled: true
|
||||
})
|
||||
.end()
|
||||
@ -61,24 +57,6 @@
|
||||
<input type="submit" value="input submit">
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<input type="checkbox" id="input-checkbox0">
|
||||
<input type="checkbox" id="input-checkbox1">
|
||||
<input type="checkbox" id="input-checkbox2">
|
||||
<label for="input-checkbox0">input checkbox</label>
|
||||
<label for="input-checkbox1">input checkbox</label>
|
||||
<label for="input-checkbox2">input checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<input type="radio" id="input-radio0" name="radio">
|
||||
<input type="radio" id="input-radio1" name="radio">
|
||||
<input type="radio" id="input-radio2" name="radio">
|
||||
<label for="input-radio0">input radio</label>
|
||||
<label for="input-radio1">input radio</label>
|
||||
<label for="input-radio2">input radio</label>
|
||||
</div>
|
||||
|
||||
<div class="buttons">
|
||||
<a href="#">anchor</a>
|
||||
<a href="#">anchor</a>
|
||||
|
||||
@ -16,18 +16,6 @@
|
||||
padding: .5em .5em .5em .7em;
|
||||
font-size: 100%;
|
||||
}
|
||||
.ui-accordion .ui-accordion-icons {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
|
||||
padding-left: 2.2em;
|
||||
}
|
||||
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
|
||||
position: absolute;
|
||||
left: .5em;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-accordion .ui-accordion-content {
|
||||
padding: 1em 2.2em;
|
||||
border-top: 0;
|
||||
|
||||
@ -9,16 +9,23 @@
|
||||
* http://api.jqueryui.com/button/#theming
|
||||
*/
|
||||
.ui-button {
|
||||
padding: .4em 1em;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
line-height: normal;
|
||||
margin-right: .1em;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: visible; /* removes extra width in IE */
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
/* Support: IE <= 11 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.ui-button,
|
||||
.ui-button:link,
|
||||
.ui-button:visited,
|
||||
@ -26,87 +33,31 @@
|
||||
.ui-button:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* to make room for the icon, a width needs to be set here */
|
||||
.ui-button-icon-only {
|
||||
width: 2.2em;
|
||||
}
|
||||
/* button elements seem to need a little more width */
|
||||
button.ui-button-icon-only {
|
||||
width: 2.4em;
|
||||
}
|
||||
.ui-button-icons-only {
|
||||
width: 3.4em;
|
||||
}
|
||||
button.ui-button-icons-only {
|
||||
width: 3.7em;
|
||||
width: 2em;
|
||||
box-sizing: border-box;
|
||||
text-indent: -9999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* button text element */
|
||||
.ui-button .ui-button-text {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
}
|
||||
.ui-button-text-only .ui-button-text {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
.ui-button-icon-only .ui-button-text,
|
||||
.ui-button-icons-only .ui-button-text {
|
||||
padding: 0;
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 1em .4em 2.1em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 2.1em .4em 1em;
|
||||
}
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding-left: 2.1em;
|
||||
padding-right: 2.1em;
|
||||
}
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button {
|
||||
padding: .4em 1em;
|
||||
/* no icon support for input elements */
|
||||
input.ui-button.ui-button-icon-only {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/* button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon,
|
||||
.ui-button-text-icon-primary .ui-icon,
|
||||
.ui-button-text-icon-secondary .ui-icon,
|
||||
.ui-button-text-icons .ui-icon,
|
||||
.ui-button-icons-only .ui-icon {
|
||||
.ui-button-icon-only .ui-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-button-icon-only .ui-icon {
|
||||
left: 50%;
|
||||
margin-top: -8px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary,
|
||||
.ui-button-text-icons .ui-button-icon-primary,
|
||||
.ui-button-icons-only .ui-button-icon-primary {
|
||||
left: .5em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary,
|
||||
.ui-button-text-icons .ui-button-icon-secondary,
|
||||
.ui-button-icons-only .ui-button-icon-secondary {
|
||||
right: .5em;
|
||||
}
|
||||
|
||||
/* button sets */
|
||||
.ui-buttonset {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.ui-buttonset .ui-button {
|
||||
margin-left: 0;
|
||||
margin-right: -.3em;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
/* reset extra padding in Firefox, see h5bp.com/l */
|
||||
/* Support: FireFox >= 4 */
|
||||
input.ui-button::-moz-focus-inner,
|
||||
button.ui-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
|
||||
@ -68,15 +68,18 @@
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -.25em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-widget-icon-block {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
@ -173,3 +173,14 @@
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
/* Icons */
|
||||
.ui-datepicker .ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
left: .5em;
|
||||
top: .3em;
|
||||
}
|
||||
|
||||
|
||||
@ -53,7 +53,10 @@
|
||||
----------------------------------*/
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
.ui-widget-header .ui-state-default,
|
||||
.ui-button,
|
||||
html .ui-button.ui-state-disabled:hover,
|
||||
html .ui-button.ui-state-disabled:active {
|
||||
border: 1px solid #c5c5c5/*{borderColorDefault}*/;
|
||||
background: #f6f6f6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ /*{bgDefaultXPos}*/ /*{bgDefaultYPos}*/ /*{bgDefaultRepeat}*/;
|
||||
font-weight: normal/*{fwDefault}*/;
|
||||
@ -61,7 +64,11 @@
|
||||
}
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited {
|
||||
.ui-state-default a:visited,
|
||||
a.ui-button,
|
||||
a:link.ui-button,
|
||||
a:visited.ui-button,
|
||||
.ui-button {
|
||||
color: #454545/*{fcDefault}*/;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -70,7 +77,9 @@
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus {
|
||||
.ui-widget-header .ui-state-focus,
|
||||
.ui-button:hover,
|
||||
.ui-button:focus {
|
||||
border: 1px solid #cccccc/*{borderColorHover}*/;
|
||||
background: #ededed/*{bgColorHover}*/ /*{bgImgUrlHover}*/ /*{bgHoverXPos}*/ /*{bgHoverYPos}*/ /*{bgHoverRepeat}*/;
|
||||
font-weight: normal/*{fwDefault}*/;
|
||||
@ -83,13 +92,17 @@
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited {
|
||||
.ui-state-focus a:visited,
|
||||
a.ui-button:hover,
|
||||
a.ui-button:focus {
|
||||
color: #2b2b2b/*{fcHover}*/;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
.ui-widget-header .ui-state-active,
|
||||
a.ui-button:active,
|
||||
.ui-button:active {
|
||||
border: 1px solid #003eff/*{borderColorActive}*/;
|
||||
background: #007fff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ /*{bgActiveXPos}*/ /*{bgActiveYPos}*/ /*{bgActiveRepeat}*/;
|
||||
font-weight: normal/*{fwDefault}*/;
|
||||
@ -171,14 +184,18 @@
|
||||
.ui-widget-header .ui-icon {
|
||||
background-image: url("images/ui-icons_444444_256x240.png")/*{iconsHeader}*/;
|
||||
}
|
||||
.ui-state-default .ui-icon {
|
||||
.ui-state-default .ui-icon,
|
||||
.ui-button .ui-icon {
|
||||
background-image: url("images/ui-icons_777777_256x240.png")/*{iconsDefault}*/;
|
||||
}
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon {
|
||||
.ui-state-focus .ui-icon,
|
||||
.ui-button:hover .ui-icon,
|
||||
.ui-button:focus .ui-icon {
|
||||
background-image: url("images/ui-icons_555555_256x240.png")/*{iconsHover}*/;
|
||||
}
|
||||
.ui-state-active .ui-icon {
|
||||
.ui-state-active .ui-icon,
|
||||
.ui-button:active .ui-icon {
|
||||
background-image: url("images/ui-icons_ffffff_256x240.png")/*{iconsActive}*/;
|
||||
}
|
||||
.ui-state-highlight .ui-icon {
|
||||
|
||||
@ -22,10 +22,13 @@
|
||||
// AMD. Register as an anonymous module.
|
||||
define( [
|
||||
"jquery",
|
||||
"../data",
|
||||
|
||||
// These are only for backcompat
|
||||
// TODO: Remove after 1.12
|
||||
"./controlgroup",
|
||||
"./checkboxradio",
|
||||
|
||||
"../keycode",
|
||||
"../labels",
|
||||
"../version",
|
||||
"../widget"
|
||||
], factory );
|
||||
} else {
|
||||
@ -35,390 +38,346 @@
|
||||
}
|
||||
}( function( $ ) {
|
||||
|
||||
var lastActive,
|
||||
baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
|
||||
typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
|
||||
formResetHandler = function() {
|
||||
var form = $( this );
|
||||
setTimeout( function() {
|
||||
form.find( ":ui-button" ).button( "refresh" );
|
||||
}, 1 );
|
||||
},
|
||||
radioGroup = function( radio ) {
|
||||
var name = radio.name,
|
||||
form = radio.form,
|
||||
radios = $( [] );
|
||||
if ( name ) {
|
||||
name = name.replace( /'/g, "\\'" );
|
||||
if ( form ) {
|
||||
radios = $( form ).find( "[name='" + name + "'][type=radio]" );
|
||||
} else {
|
||||
radios = $( "[name='" + name + "'][type=radio]", radio.ownerDocument )
|
||||
.filter( function() {
|
||||
return !this.form;
|
||||
} );
|
||||
}
|
||||
}
|
||||
return radios;
|
||||
};
|
||||
|
||||
$.widget( "ui.button", {
|
||||
version: "@VERSION",
|
||||
defaultElement: "<button>",
|
||||
options: {
|
||||
classes: {
|
||||
"ui-button": "ui-corner-all"
|
||||
},
|
||||
disabled: null,
|
||||
text: true,
|
||||
icon: null,
|
||||
iconPosition: "beginning",
|
||||
label: null,
|
||||
showLabel: true
|
||||
},
|
||||
|
||||
_getCreateOptions: function() {
|
||||
var disabled,
|
||||
|
||||
// This is to support cases like in jQuery Mobile where the base widget does have
|
||||
// an implementation of _getCreateOptions
|
||||
options = this._super() || {};
|
||||
|
||||
this.isInput = this.element.is( "input" );
|
||||
|
||||
disabled = this.element[ 0 ].disabled;
|
||||
if ( disabled != null ) {
|
||||
options.disabled = disabled;
|
||||
}
|
||||
|
||||
this.originalLabel = this.isInput ? this.element.val() : this.element.html();
|
||||
if ( this.originalLabel ) {
|
||||
options.label = this.originalLabel;
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
if ( !this.option.showLabel & !this.options.icon ) {
|
||||
this.options.showLabel = true;
|
||||
}
|
||||
|
||||
// We have to check the option again here even though we did in _getCreateOptions,
|
||||
// because null may have been passed on init which would override what was set in
|
||||
// _getCreateOptions
|
||||
if ( this.options.disabled == null ) {
|
||||
this.options.disabled = this.element[ 0 ].disabled || false;
|
||||
}
|
||||
|
||||
this.hasTitle = !!this.element.attr( "title" );
|
||||
|
||||
// Check to see if the label needs to be set or if its already correct
|
||||
if ( this.options.label && this.options.label !== this.originalLabel ) {
|
||||
if ( this.isInput ) {
|
||||
this.element.val( this.options.label );
|
||||
} else {
|
||||
this.element.html( this.options.label );
|
||||
}
|
||||
}
|
||||
this._addClass( "ui-button", "ui-widget" );
|
||||
this._setOption( "disabled", this.options.disabled );
|
||||
this._enhance();
|
||||
|
||||
if ( this.element.is( "a" ) ) {
|
||||
this._on( {
|
||||
"keyup": function( event ) {
|
||||
if ( event.keyCode === $.ui.keyCode.SPACE ) {
|
||||
event.preventDefault();
|
||||
|
||||
// Support: PhantomJS <= 1.9, IE 8 Only
|
||||
// If a native click is available use it so we actually cause navigation
|
||||
// otherwise just trigger a click event
|
||||
if ( this.element[ 0 ].click ) {
|
||||
this.element[ 0 ].click();
|
||||
} else {
|
||||
this.element.trigger( "click" );
|
||||
}
|
||||
}
|
||||
}
|
||||
} );
|
||||
}
|
||||
},
|
||||
|
||||
_enhance: function() {
|
||||
this.element.attr( "role", "button" );
|
||||
|
||||
if ( this.options.icon ) {
|
||||
this._updateIcon( "icon", this.options.icon );
|
||||
this._updateTooltip();
|
||||
}
|
||||
},
|
||||
|
||||
_updateTooltip: function() {
|
||||
this.title = this.element.attr( "title" );
|
||||
|
||||
if ( !this.options.showLabel && !this.title ) {
|
||||
this.element.attr( "title", this.options.label );
|
||||
}
|
||||
},
|
||||
|
||||
_updateIcon: function( option, value ) {
|
||||
var icon = option !== "iconPosition",
|
||||
position = icon ? this.options.iconPosition : value,
|
||||
displayBlock = position === "top" || position === "bottom";
|
||||
|
||||
// Create icon
|
||||
if ( !this.icon ) {
|
||||
this.icon = $( "<span>" );
|
||||
|
||||
this._addClass( this.icon, "ui-button-icon", "ui-icon" );
|
||||
|
||||
if ( !this.options.showLabel ) {
|
||||
this._addClass( "ui-button-icon-only" );
|
||||
}
|
||||
} else if ( icon ) {
|
||||
|
||||
// If we are updating the icon remove the old icon class
|
||||
this._removeClass( this.icon, null, this.options.icon );
|
||||
}
|
||||
|
||||
// If we are updating the icon add the new icon class
|
||||
if ( icon ) {
|
||||
this._addClass( this.icon, null, value );
|
||||
}
|
||||
|
||||
this._attachIcon( position );
|
||||
|
||||
// If the icon is on top or bottom we need to add the ui-widget-icon-block class and remove
|
||||
// the iconSpace if there is one.
|
||||
if ( displayBlock ) {
|
||||
this._addClass( this.icon, null, "ui-widget-icon-block" );
|
||||
if ( this.iconSpace ) {
|
||||
this.iconSpace.remove();
|
||||
}
|
||||
} else {
|
||||
|
||||
// Position is beginning or end so remove the ui-widget-icon-block class and add the
|
||||
// space if it does not exist
|
||||
if ( !this.iconSpace ) {
|
||||
this.iconSpace = $( "<span> </span>" );
|
||||
this._addClass( this.iconSpace, "ui-button-icon-space" );
|
||||
}
|
||||
this._removeClass( this.icon, null, "ui-wiget-icon-block" );
|
||||
this._attachIconSpace( position );
|
||||
}
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
this.element.removeAttr( "role" );
|
||||
|
||||
if ( this.icon ) {
|
||||
this.icon.remove();
|
||||
}
|
||||
if ( this.iconSpace ) {
|
||||
this.iconSpace.remove();
|
||||
}
|
||||
if ( !this.hasTitle ) {
|
||||
this.element.removeAttr( "title" );
|
||||
}
|
||||
},
|
||||
|
||||
_attachIconSpace: function( iconPosition ) {
|
||||
this.icon[ /^(?:end|bottom)/.test( iconPosition ) ? "before" : "after" ]( this.iconSpace );
|
||||
},
|
||||
|
||||
_attachIcon: function( iconPosition ) {
|
||||
this.element[ /^(?:end|bottom)/.test( iconPosition ) ? "append" : "prepend" ]( this.icon );
|
||||
},
|
||||
|
||||
_setOptions: function( options ) {
|
||||
var newShowLabel = options.showLabel === undefined ?
|
||||
this.options.showLabel :
|
||||
options.showLabel,
|
||||
newIcon = options.icon === undefined ? this.options.icon : options.icon;
|
||||
|
||||
if ( !newShowLabel && !newIcon ) {
|
||||
options.showLabel = true;
|
||||
}
|
||||
this._super( options );
|
||||
},
|
||||
|
||||
_setOption: function( key, value ) {
|
||||
if ( key === "icon" ) {
|
||||
if ( value ) {
|
||||
this._updateIcon( key, value );
|
||||
} else if ( this.icon ) {
|
||||
this.icon.remove();
|
||||
if ( this.iconSpace ) {
|
||||
this.iconSpace.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( key === "iconPosition" ) {
|
||||
this._updateIcon( key, value );
|
||||
}
|
||||
|
||||
// Make sure we can't end up with a button that has neither text nor icon
|
||||
if ( key === "showLabel" ) {
|
||||
this._toggleClass( this._classes( "ui-button-icon-only" ), null, !value );
|
||||
this._updateTooltip();
|
||||
}
|
||||
|
||||
if ( key === "label" ) {
|
||||
if ( this.isInput ) {
|
||||
this.element.val( value );
|
||||
} else {
|
||||
|
||||
// If there is an icon, append it, else nothing then append the value
|
||||
// this avoids removal of the icon when setting label text
|
||||
this.element.html( value );
|
||||
if ( this.icon ) {
|
||||
this._attachIcon( this.options.iconPosition );
|
||||
this._attachIconSpace( this.options.iconPosition );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._super( key, value );
|
||||
|
||||
if ( key === "disabled" ) {
|
||||
this._toggleClass( null, "ui-state-disabled", value );
|
||||
this.element[ 0 ].disabled = value;
|
||||
if ( value ) {
|
||||
this.element.blur();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
|
||||
// Make sure to only check disabled if its an element that supports this otherwise
|
||||
// check for the disabled class to determine state
|
||||
var isDisabled = this.element.is( "input, button" ) ?
|
||||
this.element[ 0 ].disabled : this.element.hasClass( "ui-button-disabled" );
|
||||
|
||||
if ( isDisabled !== this.options.disabled ) {
|
||||
this._setOptions( { disabled: isDisabled } );
|
||||
}
|
||||
|
||||
this._updateTooltip();
|
||||
}
|
||||
} );
|
||||
|
||||
// DEPRECATED
|
||||
if ( $.uiBackCompat !== false ) {
|
||||
|
||||
// Text and Icons options
|
||||
$.widget( "ui.button", $.ui.button, {
|
||||
options: {
|
||||
text: true,
|
||||
icons: {
|
||||
primary: null,
|
||||
secondary: null
|
||||
}
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
this.element.closest( "form" )
|
||||
.off( "reset" + this.eventNamespace )
|
||||
.on( "reset" + this.eventNamespace, formResetHandler );
|
||||
|
||||
if ( typeof this.options.disabled !== "boolean" ) {
|
||||
this.options.disabled = !!this.element.prop( "disabled" );
|
||||
if ( this.options.showLabel && !this.options.text ) {
|
||||
this.options.showLabel = this.options.text;
|
||||
}
|
||||
if ( !this.options.showLabel && this.options.text ) {
|
||||
this.options.text = this.options.showLabel;
|
||||
}
|
||||
if ( !this.options.icon && ( this.options.icons.primary ||
|
||||
this.options.icons.secondary ) ) {
|
||||
if ( this.options.icons.primary ) {
|
||||
this.options.icon = this.options.icons.primary;
|
||||
} else {
|
||||
this.element.prop( "disabled", this.options.disabled );
|
||||
this.options.icon = this.options.icons.secondary;
|
||||
this.options.iconPosition = "end";
|
||||
}
|
||||
|
||||
this._determineButtonType();
|
||||
this.hasTitle = !!this.buttonElement.attr( "title" );
|
||||
|
||||
var that = this,
|
||||
options = this.options,
|
||||
toggleButton = this.type === "checkbox" || this.type === "radio",
|
||||
activeClass = !toggleButton ? "ui-state-active" : "";
|
||||
|
||||
if ( options.label === null ) {
|
||||
options.label = ( this.type === "input" ? this.buttonElement.val() : this.buttonElement.html() );
|
||||
}
|
||||
|
||||
this._hoverable( this.buttonElement );
|
||||
|
||||
this.buttonElement
|
||||
.addClass( baseClasses )
|
||||
.attr( "role", "button" )
|
||||
.on( "mouseenter" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return;
|
||||
}
|
||||
if ( this === lastActive ) {
|
||||
$( this ).addClass( "ui-state-active" );
|
||||
}
|
||||
} )
|
||||
.on( "mouseleave" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return;
|
||||
}
|
||||
$( this ).removeClass( activeClass );
|
||||
} )
|
||||
.on( "click" + this.eventNamespace, function( event ) {
|
||||
if ( options.disabled ) {
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
} );
|
||||
|
||||
// Can't use _focusable() because the element that receives focus
|
||||
// and the element that gets the ui-state-focus class are different
|
||||
this._on( {
|
||||
focus: function() {
|
||||
this.buttonElement.addClass( "ui-state-focus" );
|
||||
},
|
||||
blur: function() {
|
||||
this.buttonElement.removeClass( "ui-state-focus" );
|
||||
}
|
||||
} );
|
||||
|
||||
if ( toggleButton ) {
|
||||
this.element.on( "change" + this.eventNamespace, function() {
|
||||
that.refresh();
|
||||
} );
|
||||
}
|
||||
|
||||
if ( this.type === "checkbox" ) {
|
||||
this.buttonElement.on( "click" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return false;
|
||||
}
|
||||
} );
|
||||
} else if ( this.type === "radio" ) {
|
||||
this.buttonElement.on( "click" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return false;
|
||||
}
|
||||
$( this ).addClass( "ui-state-active" );
|
||||
that.buttonElement.attr( "aria-pressed", "true" );
|
||||
|
||||
var radio = that.element[ 0 ];
|
||||
radioGroup( radio )
|
||||
.not( radio )
|
||||
.map( function() {
|
||||
return $( this ).button( "widget" )[ 0 ];
|
||||
} )
|
||||
.removeClass( "ui-state-active" )
|
||||
.attr( "aria-pressed", "false" );
|
||||
} );
|
||||
} else {
|
||||
this.buttonElement
|
||||
.on( "mousedown" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return false;
|
||||
}
|
||||
$( this ).addClass( "ui-state-active" );
|
||||
lastActive = this;
|
||||
that.document.one( "mouseup", function() {
|
||||
lastActive = null;
|
||||
} );
|
||||
} )
|
||||
.on( "mouseup" + this.eventNamespace, function() {
|
||||
if ( options.disabled ) {
|
||||
return false;
|
||||
}
|
||||
$( this ).removeClass( "ui-state-active" );
|
||||
} )
|
||||
.on( "keydown" + this.eventNamespace, function( event ) {
|
||||
if ( options.disabled ) {
|
||||
return false;
|
||||
}
|
||||
if ( event.keyCode === $.ui.keyCode.SPACE || event.keyCode === $.ui.keyCode.ENTER ) {
|
||||
$( this ).addClass( "ui-state-active" );
|
||||
}
|
||||
} )
|
||||
|
||||
// see #8559, we bind to blur here in case the button element loses
|
||||
// focus between keydown and keyup, it would be left in an "active" state
|
||||
.on( "keyup" + this.eventNamespace + " blur" + this.eventNamespace, function() {
|
||||
$( this ).removeClass( "ui-state-active" );
|
||||
} );
|
||||
|
||||
if ( this.buttonElement.is( "a" ) ) {
|
||||
this.buttonElement.on( "keyup", function( event ) {
|
||||
if ( event.keyCode === $.ui.keyCode.SPACE ) {
|
||||
|
||||
// TODO pass through original event correctly (just as 2nd argument doesn't work)
|
||||
$( this ).trigger( "click" );
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
this._setOption( "disabled", options.disabled );
|
||||
this._resetButton();
|
||||
},
|
||||
|
||||
_determineButtonType: function() {
|
||||
var ancestor, labelSelector, checked;
|
||||
|
||||
if ( this.element.is( "[type=checkbox]" ) ) {
|
||||
this.type = "checkbox";
|
||||
} else if ( this.element.is( "[type=radio]" ) ) {
|
||||
this.type = "radio";
|
||||
} else if ( this.element.is( "input" ) ) {
|
||||
this.type = "input";
|
||||
} else {
|
||||
this.type = "button";
|
||||
}
|
||||
|
||||
if ( this.type === "checkbox" || this.type === "radio" ) {
|
||||
|
||||
// we don't search against the document in case the element
|
||||
// is disconnected from the DOM
|
||||
ancestor = this.element.parents().last();
|
||||
labelSelector = "label[for='" + this.element.attr( "id" ) + "']";
|
||||
this.buttonElement = ancestor.find( labelSelector );
|
||||
if ( !this.buttonElement.length ) {
|
||||
ancestor = ancestor.length ? ancestor.siblings() : this.element.siblings();
|
||||
this.buttonElement = ancestor.filter( labelSelector );
|
||||
if ( !this.buttonElement.length ) {
|
||||
this.buttonElement = ancestor.find( labelSelector );
|
||||
}
|
||||
}
|
||||
this.element.addClass( "ui-helper-hidden-accessible" );
|
||||
|
||||
checked = this.element.is( ":checked" );
|
||||
if ( checked ) {
|
||||
this.buttonElement.addClass( "ui-state-active" );
|
||||
}
|
||||
this.buttonElement.prop( "aria-pressed", checked );
|
||||
} else {
|
||||
this.buttonElement = this.element;
|
||||
}
|
||||
},
|
||||
|
||||
widget: function() {
|
||||
return this.buttonElement;
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
this.element
|
||||
.removeClass( "ui-helper-hidden-accessible" );
|
||||
this.buttonElement
|
||||
.removeClass( baseClasses + " ui-state-active " + typeClasses )
|
||||
.removeAttr( "role aria-pressed" )
|
||||
.html( this.buttonElement.find( ".ui-button-text" ).html() );
|
||||
|
||||
if ( !this.hasTitle ) {
|
||||
this.buttonElement.removeAttr( "title" );
|
||||
} else if ( this.options.icon ) {
|
||||
this.options.icons.primary = this.options.icon;
|
||||
}
|
||||
this._super();
|
||||
},
|
||||
|
||||
_setOption: function( key, value ) {
|
||||
this._super( key, value );
|
||||
if ( key === "disabled" ) {
|
||||
this.widget().toggleClass( "ui-state-disabled", !!value );
|
||||
this.element.prop( "disabled", !!value );
|
||||
if ( value ) {
|
||||
if ( this.type === "checkbox" || this.type === "radio" ) {
|
||||
this.buttonElement.removeClass( "ui-state-focus" );
|
||||
} else {
|
||||
this.buttonElement.removeClass( "ui-state-focus ui-state-active" );
|
||||
}
|
||||
}
|
||||
if ( key === "text" ) {
|
||||
this._super( "showLabel", value );
|
||||
return;
|
||||
}
|
||||
this._resetButton();
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
|
||||
//See #8237 & #8828
|
||||
var isDisabled = this.element.is( "input, button" ) ? this.element.is( ":disabled" ) : this.element.hasClass( "ui-button-disabled" );
|
||||
|
||||
if ( isDisabled !== this.options.disabled ) {
|
||||
this._setOption( "disabled", isDisabled );
|
||||
if ( key === "showLabel" ) {
|
||||
this.options.text = value;
|
||||
}
|
||||
if ( this.type === "radio" ) {
|
||||
radioGroup( this.element[ 0 ] ).each( function() {
|
||||
if ( $( this ).is( ":checked" ) ) {
|
||||
$( this ).button( "widget" )
|
||||
.addClass( "ui-state-active" )
|
||||
.attr( "aria-pressed", "true" );
|
||||
} else {
|
||||
$( this ).button( "widget" )
|
||||
.removeClass( "ui-state-active" )
|
||||
.attr( "aria-pressed", "false" );
|
||||
if ( key === "icon" ) {
|
||||
this.options.icons.primary = value;
|
||||
}
|
||||
if ( key === "icons" ) {
|
||||
if ( value.primary ) {
|
||||
this._super( "icon", value.primary );
|
||||
this._super( "iconPosition", "beginning" );
|
||||
} else if ( value.secondary ) {
|
||||
this._super( "icon", value.secondary );
|
||||
this._super( "iconPosition", "end" );
|
||||
}
|
||||
}
|
||||
this._superApply( arguments );
|
||||
}
|
||||
} );
|
||||
} else if ( this.type === "checkbox" ) {
|
||||
if ( this.element.is( ":checked" ) ) {
|
||||
this.buttonElement
|
||||
.addClass( "ui-state-active" )
|
||||
.attr( "aria-pressed", "true" );
|
||||
} else {
|
||||
this.buttonElement
|
||||
.removeClass( "ui-state-active" )
|
||||
.attr( "aria-pressed", "false" );
|
||||
|
||||
$.fn.button = ( function( orig ) {
|
||||
return function() {
|
||||
if ( !this.length || ( this.length && this[ 0 ].tagName !== "INPUT" ) ||
|
||||
( this.length && this[ 0 ].tagName === "INPUT" && (
|
||||
this.attr( "type" ) !== "checkbox" && this.attr( "type" ) !== "radio"
|
||||
) ) ) {
|
||||
return orig.apply( this, arguments );
|
||||
}
|
||||
if ( !$.ui.checkboxradio ) {
|
||||
$.error( "Checkboxradio widget missing" );
|
||||
}
|
||||
},
|
||||
|
||||
_resetButton: function() {
|
||||
if ( this.type === "input" ) {
|
||||
if ( this.options.label ) {
|
||||
this.element.val( this.options.label );
|
||||
if ( arguments.length === 0 ) {
|
||||
return this.checkboxradio( {
|
||||
"icon": false
|
||||
} );
|
||||
}
|
||||
return;
|
||||
return this.checkboxradio.apply( this, arguments );
|
||||
};
|
||||
} )( $.fn.button );
|
||||
|
||||
$.fn.buttonset = function() {
|
||||
if ( !$.ui.controlgroup ) {
|
||||
$.error( "Controlgroup widget missing" );
|
||||
}
|
||||
var buttonElement = this.buttonElement.removeClass( typeClasses ),
|
||||
buttonText = $( "<span></span>", this.document[ 0 ] )
|
||||
.addClass( "ui-button-text" )
|
||||
.html( this.options.label )
|
||||
.appendTo( buttonElement.empty() )
|
||||
.text(),
|
||||
icons = this.options.icons,
|
||||
multipleIcons = icons.primary && icons.secondary,
|
||||
buttonClasses = [];
|
||||
|
||||
if ( icons.primary || icons.secondary ) {
|
||||
if ( this.options.text ) {
|
||||
buttonClasses.push( "ui-button-text-icon" + ( multipleIcons ? "s" : ( icons.primary ? "-primary" : "-secondary" ) ) );
|
||||
if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" && arguments[ 2 ] ) {
|
||||
return this.controlgroup.apply( this,
|
||||
[ arguments[ 0 ], "items.button", arguments[ 2 ] ] );
|
||||
}
|
||||
|
||||
if ( icons.primary ) {
|
||||
buttonElement.prepend( "<span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span>" );
|
||||
if ( arguments[ 0 ] === "option" && arguments[ 1 ] === "items" ) {
|
||||
return this.controlgroup.apply( this, [ arguments[ 0 ], "items.button" ] );
|
||||
}
|
||||
|
||||
if ( icons.secondary ) {
|
||||
buttonElement.append( "<span class='ui-button-icon-secondary ui-icon " + icons.secondary + "'></span>" );
|
||||
if ( typeof arguments[ 0 ] === "object" && arguments[ 0 ].items ) {
|
||||
arguments[ 0 ].items = {
|
||||
button: arguments[ 0 ].items
|
||||
};
|
||||
}
|
||||
|
||||
if ( !this.options.text ) {
|
||||
buttonClasses.push( multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only" );
|
||||
|
||||
if ( !this.hasTitle ) {
|
||||
buttonElement.attr( "title", $.trim( buttonText ) );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
buttonClasses.push( "ui-button-text-only" );
|
||||
}
|
||||
buttonElement.addClass( buttonClasses.join( " " ) );
|
||||
}
|
||||
} );
|
||||
|
||||
$.widget( "ui.buttonset", {
|
||||
version: "@VERSION",
|
||||
options: {
|
||||
items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
|
||||
},
|
||||
|
||||
_create: function() {
|
||||
this.element.addClass( "ui-buttonset" );
|
||||
},
|
||||
|
||||
_init: function() {
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
_setOption: function( key, value ) {
|
||||
if ( key === "disabled" ) {
|
||||
this.buttons.button( "option", key, value );
|
||||
}
|
||||
|
||||
this._super( key, value );
|
||||
},
|
||||
|
||||
refresh: function() {
|
||||
var rtl = this.element.css( "direction" ) === "rtl",
|
||||
allButtons = this.element.find( this.options.items ),
|
||||
existingButtons = allButtons.filter( ":ui-button" );
|
||||
|
||||
// Initialize new buttons
|
||||
allButtons.not( ":ui-button" ).button();
|
||||
|
||||
// Refresh existing buttons
|
||||
existingButtons.button( "refresh" );
|
||||
|
||||
this.buttons = allButtons
|
||||
.map( function() {
|
||||
return $( this ).button( "widget" )[ 0 ];
|
||||
} )
|
||||
.removeClass( "ui-corner-all ui-corner-left ui-corner-right" )
|
||||
.filter( ":first" )
|
||||
.addClass( rtl ? "ui-corner-right" : "ui-corner-left" )
|
||||
.end()
|
||||
.filter( ":last" )
|
||||
.addClass( rtl ? "ui-corner-left" : "ui-corner-right" )
|
||||
.end()
|
||||
.end();
|
||||
},
|
||||
|
||||
_destroy: function() {
|
||||
this.element.removeClass( "ui-buttonset" );
|
||||
this.buttons
|
||||
.map( function() {
|
||||
return $( this ).button( "widget" )[ 0 ];
|
||||
} )
|
||||
.removeClass( "ui-corner-left ui-corner-right" )
|
||||
.end()
|
||||
.button( "destroy" );
|
||||
}
|
||||
} );
|
||||
return this.controlgroup.apply( this, arguments );
|
||||
};
|
||||
}
|
||||
|
||||
return $.ui.button;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user