Un control deslizante es una especie de pista pequeña, a lo largo de la cual puede deslizar un asa. Se traduce en un valor numérico. Con el módulo de control deslizante de script.aculo.us, puede crear controles deslizantes con mucho control.
Sintaxis:
new Control.Slider( handle, track, {options} );
Opciones del control deslizante:
|
Opciones |
Descripción |
| Se puede utilizar para establecer el eje del control deslizante, es decir, horizontal o vertical. El valor predeterminado es horizontal. | |
| Se puede utilizar para establecer el rango del control deslizante. | |
| Se puede utilizar para establecer la posición inicial del control deslizante. La ubicación predeterminada es el valor inicial del rango. | |
| Se puede usar para establecer los valores discretos que el control deslizante puede tomar en su rango. | |
| Se puede usar para crear una diapositiva que inicialmente está deshabilitada. | |
| Se puede utilizar para establecer el valor y la posición del control deslizante. | |
| Se puede utilizar para desactivar un control deslizante. | |
| Se puede utilizar para habilitar un control deslizante. |
Opciones de devolución de llamada:
|
Opciones |
Descripción |
| Se activa cada vez que se arrastra el control deslizante. La función obtiene el valor del control deslizante como su parámetro. | |
| Se activa cada vez que se cambia el valor del control deslizante. La función obtiene el valor del control deslizante como su parámetro. |
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = slider">
</script>
<script>
window.onload = function () {
new Control.Slider('handle', 'track', {
range: $R(1, 100),
values: [1, 10, 20, 30, 40,
50, 60, 70, 80, 90, 100],
sliderValue: 1,
onSlide: function (value) {
$('sliderValue').innerHTML
= 'Slider Position: ' + value;
}
});
}
</script>
<style>
.track {
background-color: rgb(0, 0, 0);
position: relative;
height: 10px;
width: 200px;
cursor: pointer;
}
.handle {
background-color: #13e421;
height: 20px;
width: 4.25px;
top: -4.25px;
cursor: move;
}
</style>
</head>
<body>
<div id="track" class="track ">
<div id="handle" class="handle"
style="width: 10px;">
</div>
</div>
<p id="sliderValue"></p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA