r3298 committed - button: checkbox-toggle-button

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);