[jquery-ui] r3298 committed - button: checkbox-toggle-button
codesite...@google.com
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);
Todd Parker
example.
Adding a ui-state-primary, ui-state-secondary, ui-state-disabled, ui-
state-highight, ui-state-error example would also be good for testing.
I'm curious why the ui-state-secondary is a different size in the
current demo, hope the styles aren't off. Maybe it's affecting font
size so the overall button is scaling down?
Anything that uses the framework needs to be in a parent with ui-
widget to get the font settings. Maybe that's the issue?
Would you mind using a different icon because with that arrow icon,
it's sort of hard to see how well the positioning is working. It might
be good try try a few types:
ui-icon-lock
ui-icon-scissors
ui-icon-circle-close
ui-icon-arrowthick-1-e
ui-icon-volume-on
ui-icon-info
_t
todd.parker .: . filament group inc.
102 south street #3 boston, ma 02111
email + to...@filamentgroup.com
phone + 617.482.7120
fax + 617.687.0212
web + filamentgroup.com
On Sep 25, 2009, at 12:22 PM | September 25, 2009, codesite...@google.com
wrote:
Richard D. Worth
These new buttons as starting to shape up nicely, I like the checkbox
example.
Adding a ui-state-primary, ui-state-secondary, ui-state-disabled, ui-
state-highight, ui-state-error example would also be good for testing.
I'm curious why the ui-state-secondary is a different size in the
current demo, hope the styles aren't off. Maybe it's affecting font
size so the overall button is scaling down?
Anything that uses the framework needs to be in a parent with ui-
widget to get the font settings. Maybe that's the issue?
Todd Parker
Richard D. Worth
Jörn Zaefferer
by the icons, thats now primarily a theming issue.
I just commited radio sets, also fixing enter/space keys for the Toggle button.
Jörn
Richard D. Worth
Jörn Zaefferer
CSS code review by FG. Currently there are three seperate widgets,
where the toggle and radio widgets use the button widget.
Jörn
Richard D. Worth
Jörn Zaefferer
Jörn