Yui: различия между версиями
Содержимое удалено Содержимое добавлено
Moriline (обсуждение | вклад) Нет описания правки |
Moriline (обсуждение | вклад) Нет описания правки |
||
Строка 1212:
<h3><span>Slider (Ползунок)</span></h3>
'''Движение обьекта по траектории:'''
<source lang="javascript">
<!-- 1 -->
<link rel="stylesheet" type="text/css" href="yui/build/fonts/fonts-min.css" />
<script type="text/javascript" src="yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="yui/build/slider/slider.js"></script>
<!-- 1 -->
<!-- 2 -->
<style type="text/css">
#slider-bg {
position: relative;
background:url(yui/examples/slider/assets/bg-v.gif) 12px 0 no-repeat;
height:228px;
width:48px;
}
#slider-thumb {
cursor:default;
position: absolute;
}
</style>
<div id="slider-bg" tabindex="-1" title="Slider">
<div id="slider-thumb"><img src="yui/examples/slider/assets/thumb-bar.gif"></div>
</div>
<p>Pixel value: <span id="slider-value">0</span></p>
<p>Converted value:
<input autocomplete="off" id="slider-converted-value" type="text" value="0" size="4" maxlength="4" />
</p>
<script type="text/javascript">
(function() {
var Event = YAHOO.util.Event,
Dom = YAHOO.util.Dom,
lang = YAHOO.lang,
slider,
bg="slider-bg", thumb="slider-thumb",
valuearea="slider-value", textfield="slider-converted-value"
var topConstraint = 0;
var bottomConstraint = 200;
var scaleFactor = 1.5;
var keyIncrement = 20;
Event.onDOMReady(function() {
slider = YAHOO.widget.Slider.getVertSlider(bg,
thumb, topConstraint, bottomConstraint);
slider.getRealValue = function() {
return Math.round(this.getValue() * scaleFactor);
}
slider.subscribe("change", function(offsetFromStart) {
var valnode = Dom.get(valuearea);
var fld = Dom.get(textfield);
valnode.innerHTML = offsetFromStart;
var actualValue = slider.getRealValue();
fld.value = actualValue;
Dom.get(bg).title = "slider value = " + actualValue;
});
slider.subscribe("slideStart", function() {
YAHOO.log("slideStart fired", "warn");
});
slider.subscribe("slideEnd", function() {
YAHOO.log("slideEnd fired", "warn");
});
slider.setValue(20);
Event.on(textfield, "keydown", function(e) {
if (Event.getCharCode(e) === 13) {
var v = parseFloat(this.value, 10);
v = (lang.isNumber(v)) ? v : 0;
slider.setValue(Math.round(v/scaleFactor));
}
});
Event.on("putval", "click", function(e) {
slider.setValue(100, false);
});
Event.on("getval", "click", function(e) {
YAHOO.log("Current value: " + slider.getValue() + "\n" +
"Converted value: " + slider.getRealValue(), "info", "example");
});
});
})();
</script>
<!-- 2 -->
</source>
| |||