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.

YUI Library Examples: Button Control: Slider Button

Button Control: 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.

View example in new window.

Ella - A Shih Tzu + Maltese Mix Puppy

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 
6var 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 
16var 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 
7var oCurrentOpacity; 
8 
9 
10oButton.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 
7var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0]; 
8 
9oHTMLButton.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 
18var 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 
111oOpacityMenu.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 | ?

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More Button Control Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings