YUI recommends YUI3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
This documentation is no longer maintained.
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.
Begin by creating a Button instance of type "menu" and a Menu instance to house a Slider instance.
1 | /* |
2 | Create a Menu instance whose body element will house a |
3 | Slider instance. |
4 | */ |
5 | |
6 | var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" }); |
7 | |
8 | |
9 | /* |
10 | Create a new Button instance, wrapping the label in an |
11 | <em> element. The <em> element will be used to give the |
12 | Button instance a fixed width to prevent it from growing |
13 | and shrinking as the text label is updated. |
14 | */ |
15 | |
16 | var oButton = new YAHOO.widget.Button({ |
17 | type: "menu", |
18 | id: "opacitybutton", |
19 | label: "<em id=\"opacitybutton-currentopacity\">100%</em>", |
20 | menu: oOpacityMenu, |
21 | container: oDIV }); |
view plain | print | ? |
Once the new Button is created, add a listener for its "appendTo" event that will be used to render its Menu instance into the same DOM element specified as the containing element for the Button.
1 | /* |
2 | Maintain a reference to the <em> element inside the label |
3 | so that its text can easily be updated in response to the firing |
4 | of the Slider instance's "change" event. |
5 | */ |
6 | |
7 | var oCurrentOpacity; |
8 | |
9 | |
10 | oButton.on("appendTo", function () { |
11 | |
12 | // Add Slider markup to the Menu instance's body element |
13 | |
14 | oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=http://developer.yahoo.com/%22../button/assets/thumb-n.gif/></div></div>"); |
15 | |
16 | |
17 | /* |
18 | Render the Menu instance into the element specified as the |
19 | Button instance's container |
20 | */ |
21 | |
22 | oOpacityMenu.render(this.get("container")); |
23 | |
24 | oCurrentOpacity = Dom.get("opacitybutton-currentopacity"); |
25 | |
26 | }); |
view plain | print | ? |
Lastly, add a listener for the Menu's "render" event. Once the Menu instance is rendered, the Slider markup will be in the page and it is safe to instantiate the Slider instance.
1 | /* |
2 | Give the Button instance's <button> element an id so that |
3 | clicking its corresponding <label> element will result in the |
4 | Button instance receiving focus. |
5 | */ |
6 | |
7 | var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0]; |
8 | |
9 | oHTMLButton.id = "opacitybutton-button"; |
10 | |
11 | |
12 | |
13 | /* |
14 | Add a "beforeShow" event handler to the Menu instance that |
15 | will instantiate the Slider. |
16 | */ |
17 | |
18 | var onMenuBeforeShow = function () { |
19 | |
20 | // Instantiate the Slider |
21 | |
22 | oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1); |
23 | |
24 | |
25 | // Set the initial value of the Slider instance |
26 | |
27 | oSlider.setValue(200, true); |
28 | |
29 | |
30 | // Maintain a reference to the Slider instance's root element |
31 | |
32 | var oSliderEl = Dom.get("slider-bg"); |
33 | |
34 | |
35 | // Subscribe to the Slider instance's "change" event |
36 | |
37 | oSlider.subscribe("change", function() { |
38 | |
39 | /* |
40 | Divide the pixel offset in half to get a value between |
41 | 0 and 100 - used to convey the current opacity via the |
42 | Button instance's label. |
43 | */ |
44 | |
45 | var nValue = (Math.round(oSlider.getValue() * .5)), |
46 | |
47 | /* |
48 | Divide by 100 in order to set provide a compatible |
49 | value for the CSS "opacity" property. |
50 | */ |
51 | |
52 | nOpacity = (nValue * .01); |
53 | |
54 | |
55 | /* |
56 | Update the title attribute of the Slider instance's |
57 | root element. This helps assistive technology to |
58 | communicate the state change. |
59 | */ |
60 | |
61 | oSliderEl.title = "slider value = " + Math.round(nOpacity); |
62 | |
63 | |
64 | |
65 | |
66 | // Set the opacity of the photo |
67 | |
68 | Dom.setStyle("photo", "opacity", nOpacity); |
69 | |
70 | |
71 | |
72 | |
73 | // Update the text label of the Button instance |
74 | |
75 | oCurrentOpacity.innerHTML = (nValue + "%"); |
76 | |
77 | }); |
78 | |
79 | |
80 | var focusSlider = function () { |
81 | |
82 | if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) { |
83 | |
84 | window.setTimeout(function () { |
85 | |
86 | oSliderEl.focus(); |
87 | |
88 | }, 0); |
89 | |
90 | } |
91 | |
92 | }; |
93 | |
94 | |
95 | focusSlider(); |
96 | |
97 | |
98 | // Focus the Slider instance each time it is made visible |
99 | |
100 | oOpacityMenu.subscribe("show", focusSlider); |
101 | |
102 | |
103 | // Unsubscribe from the "beforeShow" event, since we only need to initialize the |
104 | // Slider once. |
105 | |
106 | oOpacityMenu.unsubscribe("beforeShow", onMenuBeforeShow); |
107 | |
108 | }; |
109 | |
110 | |
111 | oOpacityMenu.subscribe("beforeShow", onMenuBeforeShow); |
view plain | print | ? |
Lastly, style the <em>
element wrapping the Button
instance's text label with a fixed width so that the Button doesn't grow or
shrink as the text label is updated.
1 | #opacitybutton-currentopacity { |
2 | |
3 | width: 3em; |
4 | font-style: normal; |
5 | display: block; |
6 | text-align: left; |
7 | |
8 | } |
view plain | print | ? |
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.
Copyright © 2013 Yahoo! Inc. All rights reserved.