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.
Conjunto de controles deslizantes Habilitado
Sintaxis:
setEnabled()
Parámetros: Esta función no tiene parámetros.
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: gray;
height: 5px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
top: -2px;
}
.pad {
padding: 25px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders setEnabled</h2>
<p>
A disabled slider can be enabled
by using the setEnabled() method
as shown below.
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<p>Current Slider 1 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>
<button onclick="enableSlider()">
Enable Second Slider
</button>
<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),
disabled: true,
onSlide: (val) => {
document.querySelector("#out")
.textContent = val;
}
});
let slider2 = new Control.Slider('handle-hor2',
'track-hor2', {
// Define the range
range: $R(1, 100),
disabled: true,
onSlide: (val) => {
document.querySelector("#out2")
.textContent = val;
});
function enableSlider() {
// Set the value of the slider
// to the given value
slider2.setEnabled();
}
</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