r3298 committed - button: checkbox-toggle-button
Revision: 3298
Author: joern.zaefferer
Date: Fri Sep 25 09:21:39 2009
Log: button: checkbox-toggle-button
http://code.google.com/p/jquery-ui/source/detail?r=3298
Modified:
/branches/dev/tests/visual/button/default.html
/branches/dev/ui/jquery.ui.button.js
=======================================
--- /branches/dev/tests/visual/button/default.html Fri Sep 25 08:29:04 2009
+++ /branches/dev/tests/visual/button/default.html Fri Sep 25 09:21:39 2009
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
- <title>Button Visual Test: Default</title>
+ <title>Button Visual push: Default</title>
<link rel="stylesheet" href="../visual.css" type="text/css" />
<link rel="stylesheet" href="../../../themes/base/ui.all.css"
type="text/css">
<script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
@@ -9,28 +9,26 @@
<script type="text/javascript"
src="../../../ui/jquery.ui.button.js"></script>
<script type="text/javascript">
$(function() {
- $('<div/>').css({
- position: "absolute",
- right: 10,
- top: 10
- }).appendTo(document.body).themeswitcher();
-
function enable() {
- $("#test button").button();
+ $("#push button").button();
+ $("#toggle input").toggleButton();
}
enable();
- $("#test button").click(function() {
- $("<div/>").text("Clicked " + $(this).text()).appendTo("#log");
+ $("#push button, #toggle input").click(function() {
+ $("<div/>").text("Clicked " + $(this).text() + "(#" + this.id
+ ")").appendTo("#log");
});
- $("#disable").toggle(function() {
- $("#test button").button("disable");
+ $("#disable-widgets").toggle(function() {
+ $("#push button").button("disable");
+ $("#toggle input").toggleButton("disable");
}, function() {
- $("#test button").button("enable");
+ $("#push button").button("enable");
+ $("#toggle input").toggleButton("enable");
});
- $("#toggle").toggle(function() {
- $("#test button").button("destroy");
+ $("#toggle-widgets").toggle(function() {
+ $("#push button").button("destroy");
+ $("#toggle input").toggleButton("destroy");
}, function() {
enable();
});
@@ -39,16 +37,21 @@
</head>
<body>
-<div id="test">
+<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>
+
+<div id="toggle" style="margin-top: 2em;">
+ <input type="checkbox" id="check" /><label for="check">Toggle</label>
+</div>
+
<div style="margin-top: 2em;">
- <button id="disable">Toggle disabled</button>
- <button id="toggle">Toggle widget</button>
+ <button id="disable-widgets">Toggle disabled</button>
+ <button id="toggle-widgets">Toggle widget</button>
</div>
<div id="log"></div>
=======================================
--- /branches/dev/ui/jquery.ui.button.js Wed Sep 23 14:28:54 2009
+++ /branches/dev/ui/jquery.ui.button.js Fri Sep 25 09:21:39 2009
@@ -26,6 +26,7 @@
}).bind("mousedown.button mouseup.button", function() {
if (self.options.disabled)
return;
+ console.log(this, arguments)
$(this).toggleClass("ui-state-active");
}).bind("click", function(event) {
if (self.options.disabled) {
@@ -44,4 +45,31 @@
}
});
+$.widget("ui.toggleButton", {
+ _init: function() {
+ 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).toggleClass("ui-state-active");
+ self.element.attr("checked", function() {
+ return !!this.checked;
+ }).click();
+ }).bind("mouseleave.toggleButton", function() {
+ if (self.options.disabled)
+ return;
+ $(this).removeClass("ui-state-hover");
+ });
+ if (this.element.attr("checked")) {
+ this.button.addClass("ui-state-active");
+ }
+ },
+
+ destroy: function() {
+ this.element.add(this.label).show();
+ this.button.remove();
+ $.widget.prototype.destroy.apply(this, arguments);
+ }
+});
+
})(jQuery);