r3558 committed - Button: Merged button, toggleButton and radioButton into one plugin. I...
Revision: 3558
Author: scott.gonzalez
Date: Wed Dec 30 09:03:39 2009
Log: Button: Merged button, toggleButton and radioButton into one plugin.
Introduces a few regressions that need to be fixed.
http://code.google.com/p/jquery-ui/source/detail?r=3558
Modified:
/branches/dev/tests/visual/button/default.html
/branches/dev/ui/jquery.ui.button.js
=======================================
--- /branches/dev/tests/visual/button/default.html Sun Dec 27 08:03:55 2009
+++ /branches/dev/tests/visual/button/default.html Wed Dec 30 09:03:39 2009
@@ -13,27 +13,32 @@
<script type="text/javascript"
src="../../../ui/jquery.ui.tooltip.js"></script>
<script type="text/javascript">
$(function() {
- var selection = $("#push button, #ops1, #ops2, #format, #radio, #mode,
#toggle, #inputs, #anchors");
-
- selection.click(function(event) {
- $("<div/>").text("Clicked " + $(event.target).text() + " (#" +
event.target.id + ")").appendTo("#log");
+ var buttons = $('#push button, #check, #ops1 button, #ops2 button,
#format :checkbox').button();
+ var buttonSets = $('#radio, #mode, #inputs, #anchors').buttons();
+
+ buttons.add(buttonSets).click(function(event) {
+ $("<div></div>").text("Clicked " + $(event.target).text() + " (#" +
event.target.id + ")").appendTo("#log");
});
$("#disable-widgets").toggle(function() {
- selection.buttons("disable");
+ buttons.button("disable");
+ buttonSets.buttons("disable");
}, function() {
- selection.buttons("enable");
+ buttons.button("enable");
+ buttonSets.buttons("enable");
});
$("#toggle-widgets").toggle(function() {
- selection.buttons();
+ buttons.button();
+ buttonSets.buttons();
}, function() {
- selection.buttons("destroy");
+ buttons.button("destroy");
+ buttonSets.buttons("destroy");
}).click();
//$().tooltip();
});
</script>
- <style>
+ <style type="text/css">
#toolbar { margin-top: 2em; }
#ops1, #ops2, #format, #mode { margin-right: 1em }
</style>
@@ -107,7 +112,7 @@
<script type="text/javascript"
src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script>
- $.fn.themeswitcher && $('<div/>').css({
+ $.fn.themeswitcher && $('<div></div>').css({
position: "absolute",
right: 10,
top: 10
=======================================
--- /branches/dev/ui/jquery.ui.button.js Wed Dec 30 06:13:29 2009
+++ /branches/dev/ui/jquery.ui.button.js Wed Dec 30 09:03:39 2009
@@ -14,6 +14,10 @@
(function($) {
/*
+Todo:
+- disabling checkbox/radio (needs to add classes to this.buttonElement,
not this.element
+- uncheck other radios when one is clicked
+
Plan:
- button plugin
- button - full support
@@ -41,13 +45,18 @@
}
},
_init: function() {
- var options = this.options;
+ this._determineButtonType();
+
+ var self = this,
+ options = this.options,
+ toggleButton = this.type == 'checkbox' || this.type == 'radio',
+ hoverClass = 'ui-state-hover' + (!toggleButton ? '
ui-state-active' : '');
if (options.label === null) {
- options.label = this.element.html();
+ options.label = this.buttonElement.html();
}
- this.element
+ this.buttonElement
.addClass(baseClasses)
.bind("mouseenter.button", function() {
if (options.disabled) { return; }
@@ -58,28 +67,79 @@
})
.bind("mouseleave.button", function() {
if (options.disabled) { return; }
- $(this).removeClass("ui-state-hover ui-state-active");
- })
- .bind("mousedown.button", function() {
+ $(this).removeClass(hoverClass);
+ });
+
+ if (toggleButton) {
+ this.buttonElement.bind('click.button', function() {
if (options.disabled) { return; }
- $(this).addClass("ui-state-active");
- lastActive = this;
- $(document).one('mouseup', function() {
- lastActive = null;
- });
- })
- .bind("mouseup.button", function() {
- if (options.disabled) { return; }
- $(this).removeClass("ui-state-active");
+ $(this).toggleClass("ui-state-active");
+ self.element
+ .attr("checked", function() {
+ return self.type == 'checkbox'
+ ? !this.checked
+ // radio
+ : true;
+ })
+ .click();
});
+ } else {
+ this.buttonElement
+ .bind("mousedown.button", function() {
+ if (options.disabled) { return; }
+ $(this).addClass("ui-state-active");
+ lastActive = this;
+ $(document).one('mouseup', function() {
+ lastActive = null;
+ });
+ })
+ .bind("mouseup.button", function() {
+ if (options.disabled) { return; }
+ $(this).removeClass("ui-state-active");
+ });
+ }
this._resetButton();
},
+ _determineButtonType: function() {
+ this.type = this.element.is(':checkbox')
+ ? 'checkbox'
+ : this.element.is(':radio')
+ ? 'radio'
+ : this.element.is('input')
+ ? 'input'
+ : 'button';
+
+ if (this.type == 'radio') {
+ $('[name=' + this.element.attr('name') + ']').button();
+ }
+
+ if (this.type == 'checkbox' || this.type == 'radio') {
+ this.buttonElement = $("[for=" + this.element.attr("id") + "]");
+ this.element.hide();
+
+ if (this.element.is(':checked')) {
+ this.buttonElement.addClass('ui-state-actiave');
+ }
+ } else {
+ this.buttonElement = this.element;
+ }
+ },
+
+ widget: function() {
+ return this.buttonElement;
+ },
+
destroy: function() {
- this.element
+ this.buttonElement
.removeClass(baseClasses + " " + otherClasses)
- .html(this.element.find(".ui-button-text").html());
+ .html(this.buttonElement.find(".ui-button-text").html());
+
+ if (this.type == 'checkbox' || this.type == 'radio') {
+ this.element.show();
+ }
+
$.Widget.prototype.destroy.call(this);
},
@@ -89,150 +149,73 @@
},
_resetButton: function() {
- var buttonText = $("<span></span>")
- .addClass("ui-button-text")
- .html(this.options.label)
- .appendTo(this.element.empty())
- .text();
+ var buttonElement = this.buttonElement,
+ buttonText = $("<span></span>")
+ .addClass("ui-button-text")
+ .html(this.options.label)
+ .appendTo(buttonElement.empty())
+ .text();
var icons = this.options.icons,
multipleIcons = icons.primary && icons.secondary;
if (icons.primary || icons.secondary) {
- this.element.addClass("ui-button-text-icon" +
+ buttonElement.addClass("ui-button-text-icon" +
(multipleIcons ? "s" : ""));
if (icons.primary) {
- this.element.prepend("<span class='ui-button-icon-primary ui-icon " +
icons.primary + "'></span>");
+ buttonElement.prepend("<span class='ui-button-icon-primary ui-icon " +
icons.primary + "'></span>");
}
if (icons.secondary) {
- this.element.append("<span class='ui-button-icon-secondary ui-icon " +
icons.secondary + "'></span>");
+ buttonElement.append("<span class='ui-button-icon-secondary ui-icon "
+ icons.secondary + "'></span>");
}
if (!this.options.text) {
- this.element
+ buttonElement
.addClass(multipleIcons ? "ui-button-icons-only" : "ui-button-icon-only")
.removeClass("ui-button-text-icons ui-button-text-icon");
- if (!this.element.attr("title")) {
- this.element.attr("title", buttonText);
+ if (!buttonElement.attr("title")) {
+ buttonElement.attr("title", buttonText);
}
}
} else {
- this.element.addClass("ui-button-text-only");
+ buttonElement.addClass("ui-button-text-only");
}
}
});
-// TODO merge with button-widget
-$.widget("ui.toggleButton", {
+$.widget("ui.buttons", {
_init: function() {
- this.element.hide();
- var self = this,
- label = (this.label = $("[for='" + this.element.attr("id") + "']"));
- label.button()
- .unbind("mousedown.button mouseup.button mouseleave.button")
- .bind("click.button", function() {
- if (self.options.disabled) { return; }
- $(this).toggleClass("ui-state-active");
- self.element.attr("checked", function() {
- return !this.checked;
- })
- .click();
+ this.element.addClass("ui-button-set");
+ this.buttons =
this.element.find(':button, :submit, :reset, :checkbox, :radio, a')
+ .button()
+ .map(function() {
+ return $(this).button('widget')[0];
})
- .bind("mouseleave.button", function() {
- if (self.options.disabled) { return; }
- $(this).removeClass("ui-state-hover");
- });
-
- if (this.element.attr("checked")) {
- label.addClass("ui-state-active");
- }
+ .removeClass('ui-corner-all')
+ .filter(':first')
+ .addClass('ui-corner-left')
+ .end()
+ .filter(':last')
+ .addClass('ui-corner-right')
+ .end()
+ .end();
},
- destroy: function() {
- this.element.show();
- this.label.button("destroy");
- $.Widget.prototype.destroy.call(this);
- },
-
- widget: function() {
- return this.button;
- }
-});
-
-// TODO merge with button-widget
-$.widget("ui.radioButton", {
- _init: function() {
- var self = this,
- radios = (this.radios = this.element.find(":radio"));
- self.labels = $([]);
- self.element.addClass("ui-button-set");
- radios.hide().each(function(index) {
- var radio = $(this),
- label = $("[for='" + this.id + "']");
- var button = label
- .button()
- .unbind("mousedown.button mouseup.button mouseleave.button")
- .bind("click.button", function() {
- if (self.options.disabled) { return; }
- self.labels.removeClass("ui-state-active");
- $(this).addClass("ui-state-active");
- radio.attr("checked", true).click();
- })
- .bind("mouseleave.button", function() {
- if (self.options.disabled) { return; }
- $(this).removeClass("ui-state-hover");
- });
-
- if (this.checked) {
- button.addClass("ui-state-active");
- }
-
- self.labels = self.labels.add(label);
- });
+ _setOption: function(key, value) {
+ if (key == 'disabled') {
+ this.buttons.button('option', key, value);
+ }
+
+ $.Widget.prototype._setOption.apply(this, arguments);
},
destroy: function() {
- this.radios.show();
- this.labels.button("destroy");
- $.Widget.prototype.destroy.call(this);
- },
-
- widget: function() {
- // TODO technically correct, but inconsistent
- return this.radios.next();
- }
-});
-
-$.widget("ui.buttons", {
- _init: function() {
- var buttons = (this.buttons =
this.element.find("button, :submit, :reset, a").button());
- if (!buttons.length) {
- this.toggle = this.element.find(":checkbox").toggleButton();
- buttons = this.toggle.next();
- }
- if (!buttons.length && this.element.is(":has(:radio)")) {
- this.radio = this.element.radioButton();
- buttons = this.radio.find(".ui-button");
- }
- if (buttons.length) {
- this.element.addClass("ui-button-set");
- buttons.removeClass("ui-corner-all");
- buttons.filter(":first").addClass("ui-corner-left");
- buttons.filter(":last").addClass("ui-corner-right");
- } else {
- this.buttons = this.element.filter("button").button();
- }
- },
-
- destroy: function() {
- if (this.toggle) {
- this.toggle.toggleButton("destroy");
- }
- if (this.radio) {
- this.radio.radioButton("destroy");
- }
- this.buttons.button("destroy").removeClass("ui-corner-left
ui-corner-right");
+ this.element.removeClass('ui-button-set');
+ this.buttons
+ .button("destroy")
+ .removeClass("ui-corner-left ui-corner-right");
+
$.Widget.prototype.destroy.call(this);
},
-
+
widget: function() {
// TODO technically correct, but inconsistent
return this.buttons;
--