diff options
| author | Richard Worth <rdworth@gmail.com> | 2010-03-11 06:31:16 +0000 |
|---|---|---|
| committer | Richard Worth <rdworth@gmail.com> | 2010-03-11 06:31:16 +0000 |
| commit | 7799b4ecf9578a9ab059fb13bbfd2c4975862124 (patch) | |
| tree | b8ba6f51d03208f477a1cee64482cab21f932f70 | |
| parent | c2ed8ffc07903855d67c8a446beeedff96fb5af6 (diff) | |
| download | jquery-ui-7799b4ecf9578a9ab059fb13bbfd2c4975862124.tar.gz jquery-ui-7799b4ecf9578a9ab059fb13bbfd2c4975862124.zip | |
Fixed #5278 - ui.buttons doesn't visually reset on form "reset" event or input "change" event
| -rw-r--r-- | tests/visual/button/button_ticket_5278.html | 57 | ||||
| -rw-r--r-- | ui/jquery.ui.button.js | 91 |
2 files changed, 125 insertions, 23 deletions
diff --git a/tests/visual/button/button_ticket_5278.html b/tests/visual/button/button_ticket_5278.html new file mode 100644 index 000000000..eb516faa2 --- /dev/null +++ b/tests/visual/button/button_ticket_5278.html @@ -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> diff --git a/ui/jquery.ui.button.js b/ui/jquery.ui.button.js index 14b8a6504..392f96e4e 100644 --- a/ui/jquery.ui.button.js +++ b/ui/jquery.ui.button.js @@ -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 ); |