348 lines
12 KiB
HTML
348 lines
12 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:x2="http://www.w3.org/TR/xhtml2"
|
|
xmlns:role="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
|
|
xmlns:state="http://www.w3.org/2005/07/aaa">
|
|
<head>
|
|
<title>Yahoo! UI Library - Slider Widget</title>
|
|
<link rel="stylesheet" type="text/css" href="css/screen.css" ></link>
|
|
|
|
<!-- Nav and logger start -->
|
|
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.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/dragdrop/dragdrop-min.js" ></script>
|
|
<script type="text/javascript" src="../../build/logger/logger-min.js" ></script>
|
|
<script type="text/javascript" src="../../build/animation/animation.js" ></script>
|
|
<script type="text/javascript" src="js/color.js" ></script>
|
|
<script type="text/javascript" src="js/key.js" ></script>
|
|
|
|
<script type="text/javascript" src="../../build/slider/slider-debug.js" ></script></head>
|
|
<body>
|
|
<div id="pageTitle"><h3>Slider Widget</h3></div>
|
|
|
|
<div id="container">
|
|
<div id="containerTop">
|
|
<div id="header"><img id="ylogo" src="img/logo.gif" /></div>
|
|
<div id="main">
|
|
|
|
<!-- Nav and logger start -->
|
|
|
|
<style type="text/css">
|
|
#logButtonHeader input { font-size: 80% }
|
|
|
|
/* logger default styles */
|
|
/* font size is controlled here: default 77% */
|
|
#yui-log {position:absolute;top:1em;right:1em;font-size:77%;text-align:left;}
|
|
/* width is controlled here: default 31em */
|
|
.yui-log {background-color:#AAA;border:1px solid black;font-family:monospace;z-index:9000;}
|
|
.yui-log p {margin:1px;padding:.1em;}
|
|
.yui-log button {font-family:monospace;}
|
|
.yui-log .yui-log-hd {padding:.5em;background-color:#575757;color:#FFF;}
|
|
/* height is controlled here: default 20em*/
|
|
.yui-log .yui-log-bd {width:100%;height:20em;background-color:#FFF;border:1px solid gray;overflow:auto;}
|
|
.yui-log .yui-log-ft {margin-top:.5em;margin-bottom:1em;}
|
|
.yui-log .yui-log-ft .yui-log-categoryfilters {}
|
|
.yui-log .yui-log-ft .yui-log-sourcefilters {width:100%;border-top:1px solid #575757;margin-top:.75em;padding-top:.75em;}
|
|
.yui-log .yui-log-btns {position:relative;float:right;bottom:.25em;}
|
|
.yui-log .yui-log-filtergrp {margin-right:.5em;}
|
|
.yui-log .info {background-color:#A7CC25;} /* A7CC25 green */
|
|
.yui-log .warn {background-color:#F58516;} /* F58516 orange */
|
|
.yui-log .error {background-color:#E32F0B;} /* E32F0B red */
|
|
.yui-log .time {background-color:#A6C9D7;} /* A6C9D7 blue */
|
|
.yui-log .window {background-color:#F2E886;} /* F2E886 tan */
|
|
|
|
|
|
</style>
|
|
|
|
<div id="rightbar">
|
|
<div id="rightBarPad">
|
|
<h3>Links</h3>
|
|
<div id="linkage">
|
|
<ul>
|
|
<li><a href="index.html?mode=dist">Basic Sliders</a></li>
|
|
<li><a href="basic.html?mode=dist">Scale Factor</a></li>
|
|
<li><a href="rgb.html?mode=dist">RGB Slider</a></li>
|
|
<li><a href="rgb2.html?mode=dist">Color Picker</a></li>
|
|
<!--
|
|
<li><a href="slider.html?mode=dist">All on one page</a></li>
|
|
-->
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
//<![CDATA[
|
|
YAHOO.example.logApp = function() {
|
|
return {
|
|
init: function() {
|
|
if (YAHOO.widget.Logger) {
|
|
var reader = new YAHOO.widget.LogReader( "logDiv",
|
|
{ newestOnTop: true, height: "400px" } );
|
|
|
|
reader._onClickPauseBtn(null, reader);
|
|
}
|
|
}
|
|
};
|
|
} ();
|
|
|
|
YAHOO.util.Event.on(window, "load", YAHOO.example.logApp.init);
|
|
//]]>
|
|
</script>
|
|
|
|
<div id="logDiv"></div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Nav and logger end -->
|
|
|
|
|
|
<div id="content">
|
|
<div class="newsItem">
|
|
<h3>Sliders</h3>
|
|
<p>
|
|
The slider widget is an implementation of YAHOO.util.DragDrop
|
|
It also will use YAHOO.util.Animation if available to
|
|
animate the movement of the thumb when you click the
|
|
slider background.
|
|
|
|
The only difference between the two sliders aside from
|
|
the fact that one is vertical and one horizontal is that
|
|
the horizontal slider implements the "tick mark" feature
|
|
of drag and drop; it will "snap" to the tick marks spaced
|
|
25 pixels apart.
|
|
</p>
|
|
<strong>The logger is paused for performance reasons. Click "Resume" to re-enable it.</strong>
|
|
|
|
<div id="vertWrapper">
|
|
<div id="vertBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="0" state:valuemax="200" title="Vertical Slider" >
|
|
<div id="vertHandleDiv"><img alt="" src="img/vertSlider.png" /></div>
|
|
</div>
|
|
|
|
<div id="vertValueDiv">
|
|
<form name="formV" onsubmit="return YAHOO.example.Sliders.updateVert()">
|
|
<input autocomplete="off" name="vertVal" id="vertVal" type="text" value="0" size="4" maxlength="4" />
|
|
<input type="button" value="Update" onclick="YAHOO.example.Sliders.updateVert()" />
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="horizWrapper">
|
|
<div id="horizBGDiv" tabindex="0" x2:role="role:slider" state:valuenow="0" state:valuemin="-100" state:valuemax="100" title="Horizontal Slider" >
|
|
<div id="horizHandleDiv" ><img alt="" src="img/horizSlider.png" /></div>
|
|
</div>
|
|
|
|
<div id="horizValueDiv">
|
|
<form name="formH" onsubmit="return YAHOO.example.Sliders.updateHoriz()">
|
|
<input autocomplete="off" name="horizVal" id="horizVal" type="text" value="0" size="4" maxlength="4" />
|
|
<input type="button" value="Update" onclick="YAHOO.example.Sliders.updateHoriz()" />
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript">
|
|
//<![CDATA[
|
|
|
|
YAHOO.example.Sliders = function() {
|
|
|
|
var Dom = YAHOO.util.Dom;
|
|
var Event = YAHOO.util.Event;
|
|
|
|
var yslider, xslider;
|
|
|
|
function handleHorizSliderKey(e) {
|
|
YAHOO.log("horizontal slider keypress");
|
|
|
|
var valueNow = xslider.getValue();
|
|
var valueMin = xslider.thumb.rightConstraint;
|
|
var valueMax = xslider.thumb.leftConstraint;
|
|
var delta = 0;
|
|
var kc = Event.getCharCode(e);
|
|
|
|
YAHOO.log("keycode: " + kc);
|
|
|
|
if (kc == YAHOO.util.Key.DOM_VK_LEFT) {
|
|
delta = -25;
|
|
} else if (kc == YAHOO.util.Key.DOM_VK_RIGHT) {
|
|
delta = 25;
|
|
} else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
|
|
delta = -( valueNow - valueMin );
|
|
} else if (kc == YAHOO.util.Key.DOM_VK_END) {
|
|
delta = valueMax - valueNow;
|
|
} else {
|
|
return true;
|
|
}
|
|
|
|
valueNow += delta;
|
|
|
|
var sliderBg = Dom.get("horizBGDiv");
|
|
if (sliderBg.setAttributeNS) {
|
|
sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
|
"valuenow", valueNow);
|
|
}
|
|
|
|
Event.stopEvent(e);
|
|
return false;
|
|
}
|
|
|
|
function handleVertSliderKey(e) {
|
|
YAHOO.log("vertical slider keypress");
|
|
var valueNow = yslider.getValue();
|
|
var valueMin = yslider.thumb.topConstraint;
|
|
var valueMax = yslider.thumb.bottomConstraint;
|
|
|
|
var delta = 0;
|
|
var kc = Event.getCharCode(e);
|
|
if (kc == YAHOO.util.Key.DOM_VK_UP) {
|
|
delta = -20;
|
|
}
|
|
else if (kc == YAHOO.util.Key.DOM_VK_DOWN) {
|
|
delta = 20;
|
|
}
|
|
else if (kc == YAHOO.util.Key.DOM_VK_HOME) {
|
|
delta = -( valueNow - valueMin );
|
|
}
|
|
else if (kc == YAHOO.util.Key.DOM_VK_END) {
|
|
delta = valueMax - valueNow;
|
|
}
|
|
else {
|
|
return true;
|
|
}
|
|
|
|
valueNow += delta;
|
|
if (valueNow < valueMin) {
|
|
valueNow = valueMin;
|
|
}
|
|
|
|
if (valueNow > valueMax) {
|
|
valueNow = valueMax;
|
|
}
|
|
|
|
var sliderBg = Dom.get("vertBGDiv");
|
|
if (sliderBg.setAttributeNS) {
|
|
sliderBg.setAttributeNS("http://www.w3.org/2005/07/aaa",
|
|
"valuenow", valueNow);
|
|
}
|
|
|
|
Event.stopEvent(e);
|
|
return false;
|
|
}
|
|
|
|
var initVert = function() {
|
|
|
|
var bg="vertBGDiv",thumb="vertHandleDiv",valFld="vertVal";
|
|
|
|
yslider = YAHOO.widget.Slider.getVertSlider(bg,
|
|
thumb, 0, 200);
|
|
|
|
yslider.subscribe("change", function(offsetFromStart) {
|
|
if (this.moveComplete) {
|
|
//alert("moveComplete");
|
|
}
|
|
Dom.get(valFld).value = offsetFromStart;
|
|
Dom.get(bg).title = "Vert Slider, value = " + offsetFromStart;
|
|
});
|
|
|
|
yslider.subscribe("slideStart", function() {
|
|
YAHOO.log("VERT slidestart", "warn");
|
|
});
|
|
|
|
yslider.subscribe("slideEnd", function() {
|
|
// If you are only interested in the end value (when the
|
|
// animation completes, or the user stops dragging the
|
|
// slider handle), you can use this event rather than the
|
|
// change event
|
|
|
|
YAHOO.log("VERT slideend", "warn");
|
|
// var val = this.getValue();
|
|
// Dom.get(valFld).value = val;
|
|
// Dom.get(bg).title = "Vert Slider, value = " + val;
|
|
});
|
|
|
|
Dom.get(valFld).title = "Type in slider value between 0 and 200.";
|
|
|
|
Event.on(bg, "keydown", handleVertSliderKey);
|
|
Event.on(bg, "keypress", Event.preventDefault);
|
|
|
|
};
|
|
|
|
var initHoriz = function() {
|
|
|
|
var bg="horizBGDiv",thumb="horizHandleDiv",valFld="horizVal";
|
|
|
|
xslider = YAHOO.widget.Slider.getHorizSlider(bg,
|
|
thumb, 100, 100, 25);
|
|
|
|
xslider.subscribe("change", function(offsetFromStart) {
|
|
Dom.get(valFld).value = offsetFromStart;
|
|
Dom.get(bg).title = "Horiz Slider, value = " + offsetFromStart;
|
|
});
|
|
|
|
xslider.subscribe("slideStart", function() {
|
|
YAHOO.log("HORIZ slidestart", "warn");
|
|
});
|
|
|
|
xslider.subscribe("slideEnd", function() {
|
|
// If you are only interested in the end value (when the
|
|
// animation completes, or the user stops dragging the
|
|
// slider handle), you can use this event rather than the
|
|
// change event
|
|
|
|
YAHOO.log("HORIZ slideend", "warn");
|
|
// var val = this.getValue();
|
|
// Dom.get(valFld).value = val;
|
|
// Dom.get(bg).title = "Vert Slider, value = " + val;
|
|
});
|
|
|
|
|
|
Dom.get(valFld).title = "Type in slider value between -100 " +
|
|
"and 100. Values will be rounded to a number divisable by 25."
|
|
|
|
Event.on(bg, "keydown", handleHorizSliderKey);
|
|
Event.on(bg, "keypress", Event.preventDefault);
|
|
};
|
|
|
|
return {
|
|
|
|
init: function() {
|
|
initVert(); initHoriz();
|
|
},
|
|
|
|
updateVert: function() {
|
|
var v = parseFloat(document.forms['formV']['vertVal'].value, 10);
|
|
if ( isNaN(v) ) v = 0;
|
|
yslider.setValue(Math.round(v));
|
|
return false;
|
|
},
|
|
|
|
updateHoriz:function() {
|
|
var fld = document.forms["formH"]["horizVal"];
|
|
var v = parseFloat(fld.value, 10);
|
|
if ( isNaN(v) ) v = 0;
|
|
xslider.setValue(Math.round(v));
|
|
var newVal = xslider.getValue();
|
|
if (v != newVal) {
|
|
fld.value = newVal;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
}
|
|
}();
|
|
|
|
YAHOO.util.Event.on(window, "load", YAHOO.example.Sliders.init);
|
|
//]]>
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|