webgui/www/extras/yui/tests/slider/move_setval.html
JT Smith 20f8df1291 upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00

86 lines
2.8 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<link type="text/css" rel="stylesheet" href="/assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css">
<link type="text/css" rel="stylesheet" href="../../build/slider/assets/skins/sam/slider.css">
<style type="text/css">
.markup {
position: relative;
padding: 100px;
}
#move {
height: 200px;
width: 300px;
padding: 20px;
position: relative;
top: 20px;
left: 20px;
border: 10px solid #ccc;
}
#t {
left: 100px;
}
</style>
</head>
<body class="yui-skin-sam">
<div id="log"></div>
<div class="markup">
<div id="move">
<div id="bg" class="yui-h-slider" tabindex="-1">
<div id="t" class="yui-slider-thumb">
<img src="../../build/slider/assets/thumb-n.gif" alt="slider thumb">
</div>
</div>
<input type="text" size="3" id="v" value="">
</div>
<input type="button" id="m" name="m" value="move">
</div>
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="../../build/slider/slider.js"></script>
<script type="text/javascript" src="../../build/animation/animation.js"></script>
<script type="text/javascript" src="../../build/logger/logger.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function () {
var log = new YAHOO.widget.LogReader('log',{ newestOnTop: false }),
container = document.getElementById('move'),
s1,
startCount = 1,
endCount = 1;
var s1 = YAHOO.widget.Slider.getHorizSlider('bg','t',100,100,20);
s1.subscribe('slideStart', function () {
YAHOO.log('slideStart: ' + (startCount++) + ": VALUE: " + this.getValue());
});
s1.subscribe('slideEnd', function () {
YAHOO.log('slideEnd: ' + (endCount++) + ": VALUE: " + this.getValue());
});
YAHOO.util.Event.on('m','click',function () {
container.style.top =
container.style.left = "200px";
});
YAHOO.util.Event.on('v','keyup', function (e) {
if (e.keyCode === 13) {
var v = parseInt(this.value,10);
if (isFinite(v)) {
s1.setValue(v);
}
}
});
});
</script>
<script type="text/javascript" src="/assets/dpSyntaxHighlighter.js" ></script>
<script type="text/javascript" src="/assets/dpSyntaxHighlightExample.js"></script>
</body>
</html>