The Versatile Button Control

Blog
About

Site Search:

December 10, 2007 at 5:00 pm by Todd Kloots | In Development | 11 Comments

With the release of YUI 2.4.0, there are several new examples designed to demonstrate the Button Control’s versatility. By default, the Button Control enables the creation of rich, graphical buttons that function like traditional HTML form buttons. Button also seamlessly integrates with both the Overlay and Menu Controls, making it possible to create both menu buttons and split buttons whose menu can be used to display another YUI control. This extends the developer’s toolkit my making it easy to dream up and implement new types of UI controls for web applications.

Menu or Overlay?

Both split buttons and menu buttons incorporate a menu that can be created using either an Overlay or Menu Control. Choose Menu if you want the Button to pop up a traditional menu or a canvas with the default Menu styling. Choose Overlay if you want the basics: a blank canvas with no default style or behaviors — a canvas that can contain any content or UI control. Overlay is also lighter in file size. In either case, you’ll have the flexibility of being able to create the menu using existing HTML or script alone, and both Overlay and Menu provide an <iframe> shim to prevent <select> elements from poking through your Button’s menu in IE 6.

Two Approaches to a Popup Calendar

Two of the new Button Control examples demonstrate how to create a popular control found all over the web: a popup calendar.

The purpose of the first example is to show how easy it is to create a traditional calendar popup implementation by rendering a Calendar Control instance inside the menu of a menu button. The implementation is straightforward, performance-conscious, and less than one hundred lines of code.

The second example takes a slightly new approach to a calendar popup. Using a split button, the button’s face displays the currently selected date, while the other section of the button can be pressed to display a Calendar control. The result is a powerful date picker control that consumes a tiny amount of screen real-estate.

New Useful Combinations

Using the menu as your canvas and the palette of YUI widgets, it is possible to use both the menu button and split button controls to create new UI controls not natively available in HTML, as illustrated by both the Slider Button and Color Picker Button examples. In both examples, the face of the button is used to reflect the current value of the control embedded in the menu. While the slider button example mimics the opacity slider found in Adobe Photoshop, a slider button could also be used to for other purposes. Imagine, for example, a new take a on a rating widget.

* * * * *

If you’ve implemented Button, I’d love to know what you’re using it for. Please share your ideas and links to your implementations in the comments section. Is anything missing for you in the current Button Control? I’d love to hear about that, too.

Share and extend: Bookmark with Yahoo! My Web | Bookmark with del.icio.us | digg it! | reddit!

11 Comments »

RSS feed for comments on this post. TrackBack URI

Nicely executed, but I feel like I’m missing something. Creating a button that doesn’t do anything when you click it seems wrong to me.

In the calendar example you give, would compactness be the entire reason for choosing a split button? If so, you could certainly change the three date inputs next to the menu button to a single field, save real estate, and still allow for user input.

Comment by Jeff — December 12, 2007 #
Jeff -

Not sure what you are talking about here: “Creating a button that doesn’t do anything when you click it seems wrong to me.” Did you mean that one of the examples didn’t work for you? Please clarify.

Regarding your split button question: compactness wouldn’t be the only reason for using split button. I was just pointing that out as one of the benefits.

- Todd

Comment by Todd Kloots — December 13, 2007 #
Hi, Todd.

I think it worked for me as designed, and very cleanly. Clicking on the small arrow portion of the button allowed me to select a new date using the calendar widget.

Clicking on the other 80% of the button doesn’t do anything, though. So, to me, there are two disadvantages to this function. One, you’re displaying something that looks clickable, but isn’t. Two, you take away the user’s ability to simply enter a value if he or she prefers to do so. Given that, I was wondering what advantages this might have over the menu button implementation. When might you want to use this?

Jeff

Comment by Jeff — December 13, 2007 #
I was playing with YUI 2.4.0 and noticed a memory leak problem!
I was using menu with three Overlay in my page.
I noticed that the browser is getting slower and slower when I refresh pages.

I checked the (private) memory been used by process explorer for IE6, IE7 and FF.

E.g. If you try applicationmenubar_source.html, you will see every refresh is consuming about 5mb.

Any thoughts?

Comment by Reza — December 13, 2007 #
Todd -

I think Jeff is referring to the fact that in your examples you’re using an split button instead of a menu button, so when you click over the button area, nothing happen. Do you have a reason for use split button instead of menu button? or is just to point us the benefits of combining the YUI slider with the overlay for YUI buttons?

Another important issue here is that you are making examples that are really difficult to use in a real environment, and very difficult to modifying for newbies (Just try to modify the scale for YUI Button with Slider and you will see how many things you need to readjust to get it done), and unfortunately this is the main reason of the DOJO’s failure for newbies ;-), don’t do the same. My recommendation in this case is to create extensible examples (maybe singletons that adopt Form’s elements in an unobtrusive way).

I wrote an example for make my point…
http://www.bubbling-library.com/sandbox/buttons/unobtrusive-slider-button.html

- Caridy

Comment by Caridy Patiño — December 14, 2007 #
Reza -

I’ll look into the memory leak issue. If you are finding Menu leaks a lot, please file a bug via SourceForge if you haven’t already.

Caridy –

Your point about the split vs menu button is valid. I should have gone with a menu button instead of split. Sorry to hear that you didn’t find the Slider Button example easy to repurpose. I’ll see what I can do to smooth out the rough edges for a future release.

- Todd

Comment by Todd Kloots — December 14, 2007 #
Thanks for YUI 2.4.1

Memory problem been fixed!

:)
–
Reza
http://www.bract.us

Comment by reza — December 20, 2007 #
i’m new to javascript and am having a couple of issues you might be able to help with.
i am using a split button offering menu items that i would like to change on the fly.
after having made a selection and passing some info to be processed by a web service i would like to modify the menu items on the button. is this possible?
thanks in advance.

Comment by johnny — February 4, 2008 #
Hello, I’m new in javascript. When I try the Calendar Menu Button, i really love it.
If I want to make multiple calendar in one form, should I create the button menu script and the calendar script as many as the calendar that I want?
When I click a date then the date will appear in input text that I assign. Can I just parse variable to tell the calendar which input text that I want to fill in? So I just create one calendar script and n-times menu button. If this possible what should I do?
Thanks in advance.

Comment by John — April 10, 2009 #
Hello John-

Here is an example of how you can create multiple Calendar Menu Buttons that reuse a single Calendar instance:

http://yuiblog.com/sandbox/yui/v270/examples/button/example-03.html

Going forward the best place to ask questions about YUI would be in our developer forms:
http://yuilibrary.com/forum/

- Todd

Comment by Todd Kloots — April 14, 2009 #
Wow, thanks Todd. That is just exactly what I want.
Thanks for your info about the forum. If I had another question, I will ask it in the forum.

Once again, thanks for the solution. :D

Comment by John — April 14, 2009 #

Yahoo! User Interface Blog