Slider Button
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
/*
Margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments.
*/
body {
margin: 0;
padding: 0;
}
#example {
padding: 1em;
}
#photo {
border: solid 1px #000;
}
/*
Set the "zoom" property to "normal" since it is set to "1" by the
".example-container .bd" rule in yui.css and this causes a Menu
instance's width to expand to 100% of the browser viewport.
*/
div.yuimenu .bd {
zoom: normal;
}
/* Style the element containing the Button instance */
#opacitycontrols {
border-top: solid 1px #000;
padding: .5em .25em;
margin-top: .5em;
}
/* Style the Slider instance */
#slider-bg {
position: relative;
background: url(yui_2.7.0b-assets/button-assets/bg-fader.gif) 7px 12px no-repeat;
height: 28px;
width: 217px;
}
#slider-thumb {
cursor: default;
position: absolute;
top: 4px;
}
/*
Give the element wrapping the Button instance's text label a
fixed width so that the Button doesn't grow or shrink as the
text label is updated.
*/
#opacitybutton-currentopacity {
width: 3em;
font-style: normal;
display: block;
text-align: left;
}
#opacitybutton {
vertical-align: middle;
}
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.
(function() {
var Event = YAHOO.util.Event;
Event.onContentReady("example", function () {
var Dom = YAHOO.util.Dom,
oSlider;
/*
Create a element to house a Button instance and its
corresponding ";
Dom.get("example").appendChild(oDIV);
/*
Create a Menu instance whose body element will house a
Slider instance.
*/
var oOpacityMenu = new YAHOO.widget.Menu("opacitymenu", { width: "220px" });
/*
Create a new Button instance, wrapping the label in an
element. The element will be used to give the
Button instance a fixed width to prevent it from growing
and shrinking as the text label is updated.
*/
var oButton = new YAHOO.widget.Button({
type: "menu",
id: "opacitybutton",
label: "100% ",
menu: oOpacityMenu,
container: "opacitycontrols" });
/*
Maintain a reference to the element inside the label
so that its text can easily be updated in response to the firing
of the Slider instance's "change" event.
*/
var oCurrentOpacity;
oButton.on("appendTo", function () {
// Add Slider markup to the Menu instance's body element
oOpacityMenu.setBody("