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.
Skinning the Button widget is done using CSS. The stylesheet used for other Button examples is a minified version of the button-core.css and button-skin.css files. When customizing the Button skin, use the raw source files as a reference.
The button-core.css file includes foundational styling that clears the default
padding, margins and borders for the <button>
element as
wells as normalizes its display type, whereas the button-skin.css file is used
to apply colors, background images, etc. Skinning can be accomplished by
either overriding the styles defined in the button-skin.css file, or by creating
an entirely new skin file. When overriding styles, place them in a separate
file to simplify integrating with YUI updates. The follow example illustrates
how to create a new style for a Button instance from scratch.
Begin by creating a new Button instance.
1 | var oButton = new YAHOO.widget.Button({ |
2 | id: "ok-button", |
3 | label: "OK", |
4 | container: "buttoncontainer" }); |
view plain | print | ? |
Next, add style definitions for borders, background colors, and apply a transparent background to the Button's root element.
1 | .yui-button { |
2 | |
3 | border-width: 1px 0; |
4 | border-style: solid; |
5 | border-color: #004d89; |
6 | margin: auto .25em; |
7 | |
8 | /* |
9 | Give the Button instance a transparent background image that |
10 | provides a glossy, glass-like look. Since the background image is |
11 | transparent, it can apply the glass effect the Button instance |
12 | regardless of its background color. |
13 | */ |
14 | background: url(../button/assets/gloss.png) repeat-x left center; |
15 | |
16 | } |
17 | |
18 | .ie6 { |
19 | |
20 | /* Make background image transparent IE 6 using the AlphaImageLoader. */ |
21 | background-image: none; |
22 | filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../button/assets/gloss.png', sizingMethod = 'scale'); |
23 | |
24 | } |
25 | |
26 | .yui-button .first-child { |
27 | |
28 | border-width: 0 1px; |
29 | border-style: solid; |
30 | border-color: #004d89; |
31 | margin: 0 -1px; |
32 | |
33 | /* |
34 | The following is necessary to get negative margins working in IE.s |
35 | */ |
36 | |
37 | *position: relative; |
38 | *left: -1px; |
39 | |
40 | } |
41 | |
42 | .yui-button button, |
43 | .yui-button a { |
44 | |
45 | padding: 0 10px; |
46 | font-size: 93%; /* 12px */ |
47 | line-height: 2; /* ~24px */ |
48 | *line-height: 1.7; /* For IE */ |
49 | min-height: 2em; /* For Gecko */ |
50 | *min-height: auto; /* For IE */ |
51 | color: #fff; |
52 | border: solid 1px #599acd; |
53 | |
54 | } |
55 | |
56 | .yui-button#ok-button { |
57 | |
58 | background-color: #004d89; |
59 | |
60 | } |
view plain | print | ? |
Lastly, utilize the ColorAnim utility to animate the Button instance's background color.
1 | /* |
2 | Begin animating the Button instance's background color once it is |
3 | appended to its containing element. |
4 | */ |
5 | |
6 | oButton.on("appendTo", function () { |
7 | |
8 | /* |
9 | Apply a special CSS class to be able to target IE 6 |
10 | specifically in the CSS. |
11 | */ |
12 | |
13 | if (YAHOO.env.ua.ie == 6) { |
14 | |
15 | oButton.addClass("ie6"); |
16 | |
17 | } |
18 | |
19 | |
20 | // Create a new ColorAnim instance |
21 | |
22 | var oButtonAnim = new YAHOO.util.ColorAnim("ok-button", { backgroundColor: { to: "#b1ddff" } }); |
23 | |
24 | |
25 | /* |
26 | Restart the color animation each time the target color has |
27 | been applied. |
28 | */ |
29 | |
30 | oButtonAnim.onComplete.subscribe(function () { |
31 | |
32 | this.attributes.backgroundColor.to = (this.attributes.backgroundColor.to == "#b1ddff") ? "#016bbd" : "#b1ddff"; |
33 | |
34 | this.animate(); |
35 | |
36 | }); |
37 | |
38 | oButtonAnim.animate(); |
39 | |
40 | }); |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings