r3311 committed - button: experimental button sets
Revision: 3311
Author: joern.zaefferer
Date: Mon Sep 28 10:01:08 2009
Log: button: experimental button sets
http://code.google.com/p/jquery-ui/source/detail?r=3311
Modified:
/branches/dev/tests/visual/button/default.html
/branches/dev/themes/base/ui.button.css
/branches/dev/ui/jquery.ui.button.js
=======================================
--- /branches/dev/tests/visual/button/default.html Sat Sep 26 04:15:45 2009
+++ /branches/dev/tests/visual/button/default.html Mon Sep 28 10:01:08 2009
@@ -12,6 +12,8 @@
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();
}
@@ -77,7 +79,7 @@
<button><span class="ui-icon ui-icon-disk"></span></button>
<button><span class="ui-icon ui-icon-trash"></span></button>
</span>
- <span>
+ <span class="ui-button-set">
<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>
=======================================
--- /branches/dev/themes/base/ui.button.css Sat Sep 26 04:12:14 2009
+++ /branches/dev/themes/base/ui.button.css Mon Sep 28 10:01:08 2009
@@ -3,4 +3,4 @@
.ui-button { outline: 0; margin:0 4px 0 0; padding: .4em 1em;
text-decoration:none !important; cursor:pointer; position: relative;
text-align: center; zoom: 1; }
.ui-button .ui-icon, button .ui-icon { display: inline-block !important; }
-.ui-radio-button .ui-button { margin-right:-3px; }
+.ui-button-set .ui-button { margin-right:-3px; }
=======================================
--- /branches/dev/ui/jquery.ui.button.js Mon Sep 28 09:47:28 2009
+++ /branches/dev/ui/jquery.ui.button.js Mon Sep 28 10:01:08 2009
@@ -54,6 +54,7 @@
}
});
+// TODO merge with button-widget
$.widget("ui.toggleButton", {
_init: function() {
var self = this,
@@ -90,13 +91,14 @@
}
});
+// TODO merge with button-widget
$.widget("ui.radioButton", {
_init: function() {
var self = this,
radios = (this.radios = this.element.find(":radio"));
self.buttons = $([]);
self.labels = $([]);
- self.element.addClass("ui-radio-button");
+ self.element.addClass("ui-button-set");
radios.each(function(index) {
var radio = $(this),
label = $("[for='" + this.id + "']");
@@ -120,16 +122,11 @@
if (this.checked) {
button.addClass("ui-state-active");
}
- button.removeClass("ui-corner-all");
- if (index === 0) {
- button.addClass("ui-corner-left");
- }
- if (index == radios.length - 1) {
- button.addClass("ui-corner-right");
- }
+
self.buttons = self.buttons.add(button);
self.labels = self.labels.add(label);
});
+ self.buttons.buttonSet();
},
destroy: function() {
@@ -139,4 +136,18 @@
}
});
+// 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");
+ }
+ });
+}
+
+
})(jQuery);