r3339 committed - button: ui.buttons widget to encapsulate radio, checkbox and button
Revision: 3339
Author: joern.zaefferer
Date: Wed Sep 30 14:25:32 2009
Log: button: ui.buttons widget to encapsulate radio, checkbox and button
http://code.google.com/p/jquery-ui/source/detail?r=3339
Modified:
/branches/dev/tests/visual/button/default.html
/branches/dev/ui/jquery.ui.button.js
=======================================
--- /branches/dev/tests/visual/button/default.html Mon Sep 28 10:01:08 2009
+++ /branches/dev/tests/visual/button/default.html Wed Sep 30 14:25:32 2009
@@ -9,35 +9,22 @@
<script type="text/javascript"
src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript">
$(function() {
- function enable() {
- $("#push button, #toolbar button").button();
- $("#toggle input, #toolbar :checkbox").toggleButton();
- // TODO merge with button-widget
- $("#toolbar .ui-button-set button").buttonSet();
- $("#radio, #mode").radioButton();
- }
-
- enable();
- $("#push button, #toggle input, :radio").click(function() {
- $("<div/>").text("Clicked " + $(this).text() + " (#" + this.id
+ ")").appendTo("#log");
+ var selection = $("#push button, #ops1, #ops2, #format, #radio, #mode,
#toggle");
+
+ selection.click(function(event) {
+ $("<div/>").text("Clicked " + $(event.target).text() + " (#" +
event.target.id + ")").appendTo("#log");
});
$("#disable-widgets").toggle(function() {
- $("#push button, #toolbar button").button("disable");
- $("#toggle input, #toolbar :checkbox").toggleButton("disable");
- $("#radio, #mode").radioButton("disable");
+ selection.buttons("disable");
}, function() {
- $("#push button, #toolbar button").button("enable");
- $("#toggle input, #toolbar :checkbox").toggleButton("enable");
- $("#radio, #mode").radioButton("enable");
+ selection.buttons("enable");
});
$("#toggle-widgets").toggle(function() {
- $("#push button, #toolbar button").button("destroy");
- $("#toggle input, #toolbar :checkbox").toggleButton("destroy");
- $("#radio, #mode").radioButton("destroy");
+ selection.buttons();
}, function() {
- enable();
- });
+ selection.buttons("destroy");
+ }).click();
});
</script>
<style>
@@ -74,17 +61,17 @@
</div>
<div id="toolbar" class="ui-widget-header ui-corner-all
ui-helper-clearfix">
- <span>
+ <span id="ops1">
<button><span class="ui-icon ui-icon-folder-open"></span></button>
<button><span class="ui-icon ui-icon-disk"></span></button>
<button><span class="ui-icon ui-icon-trash"></span></button>
</span>
- <span class="ui-button-set">
+ <span 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>
</span>
- <span>
+ <span id="ops2">
<button><span class="ui-icon ui-icon-print"></span></button>
<button><span class="ui-icon ui-icon-mail-closed"></span></button>
</span>
=======================================
--- /branches/dev/ui/jquery.ui.button.js Mon Sep 28 18:44:00 2009
+++ /branches/dev/ui/jquery.ui.button.js Wed Sep 30 14:25:32 2009
@@ -124,7 +124,6 @@
self.buttons = self.buttons.add(button);
self.labels = self.labels.add(label);
});
- self.buttons.buttonSet();
},
destroy: function() {
@@ -134,18 +133,38 @@
}
});
-// TODO merge with button-widget
-$.fn.buttonSet = function() {
- var length = this.length;
- return this.removeClass("ui-corner-all").each(function(index) {
- if (index === 0) {
- $(this).addClass("ui-corner-left");
- }
- if (index == length - 1) {
- $(this).addClass("ui-corner-right");
- }
- });
-};
+$.widget("ui.buttons", {
+ _init: function() {
+ var buttons = this.buttons = this.element.find("button").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("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");
+ $.widget.prototype.destroy.call(this);
+ }
+});
})(jQuery);