YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Button Control

# Button Control: Examples

The Button Control enables the creation of rich, graphical buttons that function like traditional HTML form buttons; the Button Control provides more-impactful and easier-to-use replacements for simple buttons, radio buttons, and checkboxes, and it can go beyond the HTML form-control functionality by providing an extensible platform for various split-button implementations (including menu buttons).

- Push Buttons: This example explores various ways to create a Push Button.
- Link Buttons: Link Buttons function like HTML anchor elements; this example shows you several ways to create Link Buttons.
- Checkbox Buttons: This example demonstrates different ways to create a Button that functions like an HTML checkbox.
- Radio Buttons: This example demonstrates different ways to create a Button that functions like an HTML radio button.
- Submit Buttons: This example demonstrates different ways to create a Button that functions like an HTML submit button.
- Reset Buttons: This example demonstrates different ways to create a Button that functions like an HTML reset button.
- Menu Buttons: With the inclusion of the optional Menu Control, it is possible to create Buttons that incorporate a menu; this example shows you how.
- Split Buttons: Split Buttons are a hybrid of Menu Buttons and standard buttons; this example shows you how to use the Button Control to create Split Buttons.
- Simple Calendar Menu Button: This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.
- Calendar Menu Button with Date on Button Face: This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar and label reflects the selected date.
- Color Picker Button: This example demonstrates how to render a Color Picker into the Menu of a Split Button.
- Fixed Width Menu Button: This example demonstrates how to create a Menu Button whose text label has a fixed width.
- Glowing Button: This example demonstrates how to skin a Button instance to create a glossy, glass-like effect with a glowing background reminiscent of Aqua buttons found in Mac OS X.
- Slider Button: This example demonstrates how to combine a Split Button with a Slider to create an opacity slider button, similar to that found in Adobe Photoshop.
- Using the Button ARIA Plugin: The Button ARIA plugin makes it easy to use the WAI-ARIA Roles and States with the Button control.
- Using A Menu Button To Replace A <select> Element: This example illustrates how to use Button to mimic the behavior of an HTML `<select>` element.
- Replacing the content of a Button's Menu: This example illustrates how to replace the content of a Button's Menu on the fly.

## Other YUI Examples That Make Use of the Button Control

- Combobox, with CSS for Multiple Stacked Instances (included with examples for the AutoComplete Control)
- Showing, Hiding, and Reordering Columns. (included with examples for the DataTable Control)
- Getting CSS Style Sheets (included with examples for the Get Utility)
- Complex Application (included with examples for the Layout Manager)

### Button Control:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF(external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings