La biblioteca script.aculo.us es una biblioteca multinavegador que tiene como objetivo mejorar la interfaz de usuario de un sitio web. Los controles deslizantes son pistas delgadas que permiten al usuario ingresar valores. Se realiza definiendo un rango de valores que el usuario puede seleccionar arrastrando el controlador al valor apropiado.
La opción onSlide se usa para especificar una función de devolución de llamada que se invocaría cada vez que se mueva el control deslizante arrastrándolo. El valor actual del control deslizante se pasaría como parámetro a la función.
Sintaxis:
{ onChange: function }
Parámetros: esta opción tiene un solo valor como se mencionó anteriormente y se describe a continuación:
- función: esta es una función de devolución de llamada que se invocaría cada vez que el control deslizante se mueva arrastrando.
El siguiente ejemplo ilustra el uso de esta opción.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Include the required scripts -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = slider">
</script>
<!-- Style the Sliders so that they
are properly visible -->
<style type="text/css">
.track {
width: 250px;
background-color: orange;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px 15px;
}
</style>
</head>
<body>
<p>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders onSlide Option</h2>
<p>
The onSlide callback function
gets invoked whenever the slider
is dragged.
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<p>Current Slider Value:
<span id="out">0</span>
</p>
<div class="pad">
<div id="track-hor2" class="track">
<div id="handle-hor2" class="handle">
</div>
</div>
</div>
<p>Current Slider 2 Value:
<span id="out2">0</span>
</p>
<script type="text/javascript">
// Initialize the slider
let slider = new Control.Slider('handle-hor',
'track-hor', {
// Define the range
range: $R(1, 100),
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out")
.textContent = currValue;
}
});
// Initialize the slider
let slider2 = new Control.Slider('handle-hor2',
'track-hor2', {
// Define the range
range: $R(1, 100),
values: [1, 5, 10, 50, 80, 100],
// Define the callback function to be
// invoked when the slider is being
// dragged
onSlide: function (currValue) {
document.querySelector("#out2")
.textContent = currValue;
}
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA