mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-17 15:03:25 +00:00
195 lines
6.8 KiB
HTML
195 lines
6.8 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Horizontal Slider with Tick Marks</title>
|
|
|
|
<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;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/slider/assets/skins/sam/slider.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
|
|
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css">
|
|
#slider-bg {
|
|
background:url(../slider/assets/bg-fader.gif) 5px 0 no-repeat;
|
|
}
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Horizontal Slider with Tick Marks</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p>This example uses the <a href="http://developer.yahoo.com/yui/slider/">YUI Slider Control</a> to implement a basic horizontal slider with tick marks & that is, with predefined intervals at which the slider thumb will stop as it's dragged. (By default, a slider thumb can be dragged one pixel at a time.)</p>
|
|
|
|
<p>Here are some important characteristics of this implementation:</p>
|
|
|
|
<ul>
|
|
<li>The slider range is 200 pixels.</li>
|
|
<li>The slider movement is restricted to 20 pixel increments.</li>
|
|
<li>Custom logic is applied to convert the current pixel value
|
|
(from 0 to 200) to a "real" value. In this case the "real"
|
|
range is 0 to 300.</li>
|
|
<li>Once the slider has focus, the left and right keys will move
|
|
the thumb 20 pixels (changing the "real" value by 30).</li>
|
|
<li>When the slider value changes, the UI is updated. The title
|
|
attribute of the slider background is updated with the current
|
|
value, and the text field is updated with the current "real"
|
|
value. These techniques can help inform assistive technologies
|
|
(like screen reader software) about the slider's current state.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<!--
|
|
You supply your own markup for the slider:
|
|
- The thumb element should be a child of the slider background
|
|
- The tabindex attribute lets this element receive focus in most browsers.
|
|
- If the slider background can receive focus, the arrow keys can be used to change
|
|
this slider's value.
|
|
- We use an img element rather than a css background for the thumb to get around
|
|
a performance bottleneck when animating the thumb in IE
|
|
- Both elements should have a position style: relative or absolute
|
|
- Don't apply a css border to the slider background
|
|
-->
|
|
|
|
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
|
|
<div id="slider-thumb" class="yui-slider-thumb"><img src="assets/thumb-n.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>
|
|
|
|
<!--We'll use these to trigger interactions with the Slider API -->
|
|
<button id="putval">Change slider value to 100 (converted value 150)</button>
|
|
<button id="getval">Write current value to the Logger</button>
|
|
|
|
<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"
|
|
|
|
// The slider can move 0 pixels up
|
|
var topConstraint = 0;
|
|
|
|
// The slider can move 200 pixels down
|
|
var bottomConstraint = 200;
|
|
|
|
// Custom scale factor for converting the pixel offset into a real value
|
|
var scaleFactor = 1.5;
|
|
|
|
// The amount the slider moves when the value is changed with the arrow
|
|
// keys
|
|
var keyIncrement = 20;
|
|
|
|
var tickSize = 20;
|
|
|
|
Event.onDOMReady(function() {
|
|
|
|
slider = YAHOO.widget.Slider.getHorizSlider(bg,
|
|
thumb, topConstraint, bottomConstraint, 20);
|
|
|
|
// Sliders with ticks can be animated without YAHOO.util.Anim
|
|
slider.animate = true;
|
|
|
|
slider.getRealValue = function() {
|
|
return Math.round(this.getValue() * scaleFactor);
|
|
}
|
|
|
|
slider.subscribe("change", function(offsetFromStart) {
|
|
|
|
var valnode = Dom.get(valuearea);
|
|
var fld = Dom.get(textfield);
|
|
|
|
// Display the pixel value of the control
|
|
valnode.innerHTML = offsetFromStart;
|
|
|
|
// use the scale factor to convert the pixel offset into a real
|
|
// value
|
|
var actualValue = slider.getRealValue();
|
|
|
|
// update the text box with the actual value
|
|
fld.value = actualValue;
|
|
|
|
// Update the title attribute on the background. This helps assistive
|
|
// technology to communicate the state change
|
|
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");
|
|
});
|
|
|
|
// Listen for keystrokes on the form field that displays the
|
|
// control's value. While not provided by default, having a
|
|
// form field with the slider is a good way to help keep your
|
|
// application accessible.
|
|
Event.on(textfield, "keydown", function(e) {
|
|
|
|
// set the value when the 'return' key is detected
|
|
if (Event.getCharCode(e) === 13) {
|
|
var v = parseFloat(this.value, 10);
|
|
v = (lang.isNumber(v)) ? v : 0;
|
|
|
|
// convert the real value into a pixel offset
|
|
slider.setValue(Math.round(v/scaleFactor));
|
|
}
|
|
});
|
|
|
|
// Use setValue to reset the value to white:
|
|
Event.on("putval", "click", function(e) {
|
|
slider.setValue(100, false); //false here means to animate if possible
|
|
});
|
|
|
|
// Use the "get" method to get the current offset from the slider's start
|
|
// position in pixels. By applying the scale factor, we can translate this
|
|
// into a "real value
|
|
Event.on("getval", "click", function(e) {
|
|
YAHOO.log("Current value: " + slider.getValue() + "\n" +
|
|
"Converted value: " + slider.getRealValue(), "info", "example");
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|