library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event

Browse Source
This commit is contained in:
Richard Worth 2010-03-11 06:31:16 +00:00
parent c2ed8ffc07
commit 7799b4ecf9
2 changed files with 125 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
tests/visual/button/button_ticket_5278.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Button Visual Test : Button ticket #5278</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css">
<script type="text/javascript" src="../../../jquery-1.4.2.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript">
$(function() {
$('#id1, #id2, #id3, #id4').button();
$('#r1, #r2, #r3, #r4').button();
});
</script>
</head>
<body>
<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5278">#5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event</a></h1>
<form>
<input name="a1" id="id1" type="checkbox"/>
<label for="id1">Checkbox</label>
<input name="a2" id="id2" type="checkbox"/>
<label for="id2">Checkbox</label>
<input name="a3" id="id3" type="checkbox" checked="checked" />
<label for="id3">Checkbox</label>
<input name="a4" id="id4" type="checkbox"/>
<label for="id4">Checkbox</label>
<input type="reset"/>
<input name="r" id="r1" type="radio"/>
<label for="r1">Radio</label>
<input name="r" id="r2" type="radio"/>
<label for="r2">Radio</label>
<input name="r" id="r3" type="radio" checked="checked" />
<label for="r3">Radio</label>
<input name="r" id="r4" type="radio"/>
<label for="r4">Radio</label>
</form>
</body>
</html>

91
ui/jquery.ui.button.js vendored
View File

@ -16,7 +16,31 @@
var lastActive,
baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
otherClasses = "ui-state-hover ui-state-active " +
"ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only";
"ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon ui-button-text-only",
formResetHandler = function(event) {
$(':ui-button', event.target.form).each(function() {
var inst = $(this).data('button');
setTimeout(function() {
inst.refresh()
}, 1);
});
},
radioGroup = function(radio) {
var name = radio.name,
form = radio.form,
radios = $([]);
if ( name ) {
if ( form ) {
radios = $( form ).find( "[name='" + name + "']" );
} else {
radios = $( "[name='" + name + "']", radio.ownerDocument )
.filter(function() {
return !this.form;
});
}
}
return radios;
};
$.widget( "ui.button", {
options: {
@ -28,6 +52,8 @@ $.widget( "ui.button", {
}
},
_create: function() {
this.element.closest('form').unbind('reset.button').bind('reset.button', formResetHandler);
this._determineButtonType();
this.hasTitle = !!this.buttonElement.attr( "title" );
@ -66,6 +92,13 @@ $.widget( "ui.button", {
.bind( "blur.button", function() {
$( this ).removeClass( focusClass );
});
if ( toggleButton ) {
var self = this;
this.element.bind('change.button', function() {
self.refresh();
});
}
if ( this.type === "checkbox") {
this.buttonElement.bind( "click.button", function() {
@ -83,27 +116,14 @@ $.widget( "ui.button", {
$( this ).addClass( "ui-state-active" );
self.buttonElement.attr( "aria-pressed", true );
var radio = self.element[ 0 ],
name = radio.name,
form = radio.form,
radios;
if ( name ) {
if ( form ) {
radios = $( form ).find( "[name='" + name + "']" );
} else {
radios = $( "[name='" + name + "']", radio.ownerDocument )
.filter(function() {
return !this.form;
});
}
radios
.not( radio )
.map(function() {
return $( this ).button( "widget" )[ 0 ];
})
.removeClass( "ui-state-active" )
.attr( "aria-pressed", false );
}
var radio = self.element[ 0 ];
radioGroup( radio )
.not( radio )
.map(function() {
return $( this ).button( "widget" )[ 0 ];
})
.removeClass( "ui-state-active" )
.attr( "aria-pressed", false );
});
} else {
this.buttonElement
@ -200,6 +220,32 @@ $.widget( "ui.button", {
$.Widget.prototype._setOption.apply( this, arguments );
this._resetButton();
},
refresh: function() {
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);
}
});
} 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);
}
}
},
_resetButton: function() {
if ( this.type === "input" ) {
@ -276,5 +322,4 @@ $.widget( "ui.buttonset", {
}
});
$.fn.log = function() { console.log(this); return this; };
})( jQuery );