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 onChange se usa para especificar una función de devolución de llamada que se invocaría cada vez que cambie el valor del control deslizante, ya sea cuando el control deslizante haya terminado de moverse o usando el método setValue() para establecer un nuevo valor. 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 haya terminado de moverse o se haya cambiado usando el método setValue().
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 onChange Option</h2>
<p>
The onChange callback function
gets invoked whenever the value
changes. The value of the slider
can be set using the setValue method.
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<input type="text" id="val">
<button onclick="setVal()">
Set Value
</button>
<p>Current Slider Value:
<span id="out">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),
onChange: function (currValue) {
document.querySelector("#out")
.textContent = currValue;
}
});
function setVal() {
// Get the value form the input box
let val =
document.querySelector("#val")
.value;
// Set the value of the slider
// to the given value
slider.setValue(val);
}
</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