r3299 committed - button: radiosets
Revision: 3299
Author: joern.zaefferer
Date: Sat Sep 26 03:49:55 2009
Log: button: radiosets
http://code.google.com/p/jquery-ui/source/detail?r=3299
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 Fri Sep 25 09:21:39 2009
+++ /branches/dev/tests/visual/button/default.html Sat Sep 26 03:49:55 2009
@@ -12,23 +12,27 @@
function enable() {
$("#push button").button();
$("#toggle input").toggleButton();
+ $("#radio").radioButton();
}
enable();
- $("#push button, #toggle input").click(function() {
- $("<div/>").text("Clicked " + $(this).text() + "(#" + this.id
+ ")").appendTo("#log");
+ $("#push button, #toggle input, :radio").click(function() {
+ $("<div/>").text("Clicked " + $(this).text() + " (#" + this.id
+ ")").appendTo("#log");
});
$("#disable-widgets").toggle(function() {
$("#push button").button("disable");
$("#toggle input").toggleButton("disable");
+ $("#radio").radioButton("disable");
}, function() {
$("#push button").button("enable");
$("#toggle input").toggleButton("enable");
+ $("#radio").radioButton("enable");
});
$("#toggle-widgets").toggle(function() {
$("#push button").button("destroy");
$("#toggle input").toggleButton("destroy");
+ $("#radio").radioButton("destroy");
}, function() {
enable();
});
@@ -38,17 +42,31 @@
<body>
<div id="push">
- <button>Simple button, only text</button>
- <button><span class="ui-icon ui-icon-arrow"></span> Button with icon on
the left</button>
- <button>Button with icon on the right<span class="ui-icon
ui-icon-arrow"></span></button>
- <button>Button with icon <span class="ui-icon ui-icon-arrow"></span>
inbetween.</button>
- <button class="ui-priority-secondary">Secondary priority button</button>
+ <div>
+ No icon
+ <button>Simple button, only text</button>
+ <button class="ui-priority-secondary">Secondary priority button</button>
+ <button class="ui-state-highlight">Highlight button</button>
+ <button class="ui-state-error">Error button</button>
+ </div>
+ <div>
+ With icon
+ <button><span class="ui-icon ui-icon-locked"></span> Button with icon on
the left</button>
+ <button>Button with icon on the right<span class="ui-icon
ui-icon-scissors"></span></button>
+ <button>Button with icon <span class="ui-icon
ui-icon-circle-close"></span> inbetween.</button>
+ </div>
</div>
<div id="toggle" style="margin-top: 2em;">
<input type="checkbox" id="check" /><label for="check">Toggle</label>
</div>
+<div id="radio" style="margin-top: 2em;">
+ <input type="radio" id="radio1" name="radio" /><label for="radio1">Choice
1</label>
+ <input type="radio" id="radio2" name="radio" /><label for="radio2">Choice
2</label>
+ <input type="radio" id="radio3" name="radio" /><label for="radio3">Choice
3</label>
+</div>
+
<div style="margin-top: 2em;">
<button id="disable-widgets">Toggle disabled</button>
<button id="toggle-widgets">Toggle widget</button>
=======================================
--- /branches/dev/themes/base/ui.button.css Wed Sep 23 14:21:52 2009
+++ /branches/dev/themes/base/ui.button.css Sat Sep 26 03:49:55 2009
@@ -1,4 +1,6 @@
/* Button
----------------------------------*/
-.ui-button { padding: 0.2em 0.8em; }
+.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; }
=======================================
--- /branches/dev/ui/jquery.ui.button.js Fri Sep 25 09:21:39 2009
+++ /branches/dev/ui/jquery.ui.button.js Sat Sep 26 03:49:55 2009
@@ -50,12 +50,14 @@
var self = this;
var label = this.label = $("[for='" + this.element.attr("id") + "']");
label.add(this.element).hide();
- this.button = $("<button/>").html("" +
label.html()).insertAfter(this.element).button().unbind("mousedown.button
mouseup.button mouseleave.button").bind("mousedown.toggleButton",
function() {
+ this.button = $("<button/>").html("" +
label.html()).insertAfter(this.element).button().unbind("mousedown.button
mouseup.button mouseleave.button").bind("click", function() {
+ if (self.options.disabled)
+ return;
$(this).toggleClass("ui-state-active");
self.element.attr("checked", function() {
return !!this.checked;
}).click();
- }).bind("mouseleave.toggleButton", function() {
+ }).bind("mouseleave", function() {
if (self.options.disabled)
return;
$(this).removeClass("ui-state-hover");
@@ -72,4 +74,48 @@
}
});
+$.widget("ui.radioButton", {
+ _init: function() {
+ var self = this;
+ var radios = this.radios = this.element.find(":radio");
+ self.buttons = $([]);
+ self.labels = $([]);
+ self.element.addClass("ui-radio-button");
+ radios.each(function(index) {
+ var radio = $(this);
+ var label = $("[for='" + this.id + "']");
+ label.add(radio).hide();
+ var button = $("<button/>").html("" +
label.html()).insertAfter(this).button().unbind("mousedown.button
mouseup.button mouseleave.button").bind("click", function() {
+ if (self.options.disabled)
+ return;
+ self.buttons.removeClass("ui-state-active");
+ $(this).addClass("ui-state-active");
+ radio.attr("checked", true).click();
+ }).bind("mouseleave", function() {
+ if (self.options.disabled)
+ return;
+ $(this).removeClass("ui-state-hover");
+ });
+ 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);
+ })
+ },
+
+ destroy: function() {
+ this.buttons.remove();
+ this.labels.add(this.radios).show();
+ $.widget.prototype.destroy.apply(this, arguments);
+ }
+});
+
})(jQuery);