oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui/examples/button/btn_example14_log.html
JT Smith ff7d72becc upgrade to yui 2.5.1
2008-03-25 16:13:25 +00:00

635 lines
27 KiB
HTML
Raw Blame History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Button Control: Slider Button</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/logger/assets/skins/sam/logger.css" />
<link rel="stylesheet" type="text/css" href="../../build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/logger/logger-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>
<script type="text/javascript" src="../../build/container/container_core-min.js"></script>
<script type="text/javascript" src="../../build/menu/menu-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-debug.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/*
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 <div> 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(../button/assets/bg-fader.gif) 7px 12px no-repeat;
height: 28px;
width: 217px;
}
#slider-thumb {
cursor: default;
position: absolute;
top: 4px;
}
/*
Give the <em> 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-currentopactiy {
width: 3em;
font-style: normal;
display: block;
text-align: left;
}
#opacitybutton {
vertical-align: middle;
}
</style>
<!--end custom header content for this example-->
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p><em>
<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>
<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
</em>
</p>
<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label>
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="fr" type="hidden" value="ush-myweb">
<input id="ygsp" name="va" size="22">
<input type="submit" value="Search" class="ygbt"></form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" width="378" height="28"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Button Control: Slider Button</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example">
<div class="promo">
<h1>Button Control: Slider Button</h1>
<div class="exampleIntro">
<p>
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.
</p>
</div>
<div class="example-container module ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="btn_example14_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event;
Event.onContentReady("example", function () {
var Dom = YAHOO.util.Dom,
oSlider;
/*
Create a <div> element to house a Button instance and its
corresponding <label> element.
*/
var oDIV = document.createElement("div")
oDIV.id = "opacitycontrols";
oDIV.innerHTML = "<label for=\"opacitybutton-button\">Opacity:</label>";
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
<em> element. The <em> 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: "<em id=\"opacitybutton-currentopactiy\">100%</em>",
menu: oOpacityMenu,
container: oDIV });
/*
Maintain a reference to the <em> 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 = Dom.get("opacitybutton-currentopactiy");
/*
Give the Button instance's <button> element an id so that
clicking its corresponding <label> element will result in the
Button instance receiving focus.
*/
var oHTMLButton = oButton.get("element").getElementsByTagName("button")[0];
oHTMLButton.id = "opacitybutton-button";
function onButtonClick() {
// Add Slider markup to the Menu instance's body element
oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>");
/*
Render the Menu instance into the element specified as the
Button instance's container
*/
oOpacityMenu.render(this.get("container"));
// Align the Menu instance to its corresponding Button
oOpacityMenu.align();
/*
Unsubscribe the listener from the "click" event so that
this code runs only once.
*/
this.unsubscribe("click", onButtonClick);
}
/*
Subscribe to the Button instance's "click" event to render the
Button instance's menu the first time it is made visible.
*/
oButton.on("click", onButtonClick);
/*
Add a "render" event handler to the Menu instance that
will instantiate the Slider.
*/
oOpacityMenu.subscribe("render", function () {
// Instantiate the Slider
oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1);
// Set the initial value of the Slider instance
oSlider.setValue(200, true);
// Maintain a reference to the Slider instance's root element
var oSliderEl = Dom.get("slider-bg");
// Subscribe to the Slider instance's "change" event
oSlider.subscribe("change", function() {
/*
Divide the pixel offset in half to get a value between
0 and 100 - used to convey the current opacity via the
Button instance's label.
*/
var nValue = (Math.round(oSlider.getValue() * .5)),
/*
Divide by 100 in order to set provide a compatible
value for the CSS "opacity" property.
*/
nOpacity = (nValue * .01);
/*
Update the title attribute of the Slider instance's
root element. This helps assistive technology to
communicate the state change.
*/
oSliderEl.title = "slider value = " + nOpacity;
// Set the opacity of the photo
Dom.setStyle("photo", "opacity", nOpacity);
// Update the text label of the Button instance
oCurrentOpacity.innerHTML = (nValue + "%");
});
function focusSlider() {
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
window.setTimeout(function () {
oSliderEl.focus();
}, 0);
}
}
// Focus the Slider instance
focusSlider();
// Focus the Slider instance each time it is made visible
oOpacityMenu.subscribe("show", focusSlider);
});
});
})();
</script>
<div id="example"><a href="http://www.flickr.com/photos/toddlr/477993821/" title="Photo Sharing"><img id="photo" src="http://farm1.static.flickr.com/198/477993821_0079194851.jpg" width="500" height="375" alt="Ella - A Shih Tzu + Maltese Mix Puppy"></a></div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<p>
Begin by creating a Button instance of type "menu" and a Menu instance to
house a Slider instance.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
/*
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
<em> element. The <em> 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: "<em id=\"opacitybutton-currentopactiy\">100%</em>",
menu: oOpacityMenu,
container: oDIV });
</textarea>
<p>
Next, add a listener for the Button instance's "click" event that will place
the Slider markup inside the Menu instance's body element and then render
the Menu. (Defering the rendering of the Menu until the firing of the "click"
event improves the intial load time of the Button instance.)
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
function onButtonClick() {
// Add Slider markup to the Menu instance's body element
oOpacityMenu.setBody("<div id=\"slider-bg\" tabindex=\"1\" title=\"Slider\"><div id=\"slider-thumb\"><img src=\"../button/assets/thumb-n.gif\"></div></div>");
/*
Render the Menu instance into the element specified as the
Button instance's container
*/
oOpacityMenu.render(this.get("container"));
// Align the Menu instance to its corresponding Button
oOpacityMenu.align();
/*
Unsubscribe the listener from the "click" event so that
this code runs only once.
*/
this.unsubscribe("click", onButtonClick);
}
/*
Subscribe to the Button instance's "click" event to render the
Button instance's menu the first time it is made visible.
*/
oButton.on("click", onButtonClick);
</textarea>
<p>
Once the Menu instance is rendered, the Slider markup will be in the page and it
is safe to instantiate the Slider instance.
</p>
<textarea name="code" class="JScript" cols="60" rows="1">
/*
Add a "render" event handler to the Menu instance that
will instantiate the Slider.
*/
oOpacityMenu.subscribe("render", function () {
// Instantiate the Slider
oSlider = YAHOO.widget.Slider.getHorizSlider("slider-bg", "slider-thumb", 0, 200, 1);
// Set the initial value of the Slider instance
oSlider.setValue(200, true);
// Maintain a reference to the Slider instance's root element
var oSliderEl = Dom.get("slider-bg");
// Subscribe to the Slider instance's "change" event
oSlider.subscribe("change", function() {
/*
Divide the pixel offset in half to get a value between
0 and 100 - used to convey the current opacity via the
Button instance's label.
*/
var nValue = (Math.round(oSlider.getValue() * .5)),
/*
Divide by 100 in order to set provide a compatible
value for the CSS "opacity" property.
*/
nOpacity = (nValue * .01);
/*
Update the title attribute of the Slider instance's
root element. This helps assistive technology to
communicate the state change.
*/
oSliderEl.title = "slider value = " + nOpacity;
// Set the opacity of the photo
Dom.setStyle("photo", "opacity", nOpacity);
// Update the text label of the Button instance
oCurrentOpacity.innerHTML = (nValue + "%");
});
function focusSlider() {
if ((YAHOO.env.ua.ie || YAHOO.env.ua.gecko) && oSliderEl) {
window.setTimeout(function () {
oSliderEl.focus();
}, 0);
}
}
// Focus the Slider instance
focusSlider();
// Focus the Slider instance each time it is made visible
oOpacityMenu.subscribe("show", focusSlider);
});
</textarea>
<p>
Lastly, style the <code>&#60;em&#62;</code> 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.
</p>
<textarea name="code" class="CSS" cols="60" rows="1">
#opacitybutton-currentopactiy {
width: 3em;
font-style: normal;
display: block;
text-align: left;
}
</textarea> </div>
<div class="yui-u">
<div id="loggerModule" class="yui-skin-sam">
<h3 class="firstContent">YUI Logger Output:</h3>
<div id="loggerDiv"></div>
<div id="loggerGloss">
<p><strong>Note:</strong> You are viewing this example in debug mode with logging enabled. This can significantly slow performance.</p>
<p class="loggerButton"><span id="loggerLink"><span class="first-child"><a href="btn_example14.html">Reload with logging<br />and debugging disabled.</a></span></span></p>
</div>
</div>
<div id="examples">
<h3>Button Control Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../button/btn_example01.html'>Push Buttons</a></li><li><a href='../button/btn_example02.html'>Link Buttons</a></li><li><a href='../button/btn_example03.html'>Checkbox Buttons</a></li><li><a href='../button/btn_example04.html'>Radio Buttons</a></li><li><a href='../button/btn_example05.html'>Submit Buttons</a></li><li><a href='../button/btn_example06.html'>Reset Buttons</a></li><li><a href='../button/btn_example07.html'>Menu Buttons</a></li><li><a href='../button/btn_example08.html'>Split Buttons</a></li><li><a href='../button/btn_example09.html'>Calendar Menu Button</a></li><li><a href='../button/btn_example10.html'>Calendar Menu Button</a></li><li><a href='../button/btn_example11.html'>Color Picker Button</a></li><li><a href='../button/btn_example12.html'>Fixed Width Menu Button</a></li><li><a href='../button/btn_example13.html'>Glowing Button</a></li><li class='selected'><a href='../button/btn_example14.html'>Slider Button</a></li><li><a href='../datatable/dt_colshowhide.html'>Showing, Hiding, and Reordering Columns. (included with examples for DataTable Control (beta))</a></li><li><a href='../get/get-css-basic.html'>Getting CSS Style Sheets (included with examples for Get Utility)</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager (beta))</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Button Control Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/button/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_button.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/button.pdf">Cheat Sheet PDF</a> (external)</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="selected "><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="item"><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper (beta)</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager (beta)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler (beta)</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer (beta)</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize (beta)</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script src='../../assets/YUIexamples.js'></script>
</body>
</html>
Reference in a new issue View git blame Copy permalink