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.
Deslizadores deshabilitados deshabilitados
Sintaxis:
{ disabled: boolean }
Valores:
- booleano: este es un valor booleano que especifica si el control deslizante está deshabilitado o no.
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 disabled</h2>
<p>
The slider can be disabled or enabled
using the "disabled" option.
</p>
<div class="pad">
<div id="track-hor" class="track">
<div id="handle-hor" class="handle">
</div>
</div>
</div>
<div class="pad">
<div id="track2-hor" class="track">
<div id="handle2-hor" class="handle">
</div>
</div>
</div>
<script type="text/javascript">
new Control.Slider('handle-hor',
'track-hor', {
range: $R(1, 10),
sliderValue: 5,
// This will disable the Slider
// and it will be locked
disabled: true
});
new Control.Slider('handle2-hor',
'track2-hor', {
range: $R(1, 10),
sliderValue: 5,
// This will enable the Slider
// to be used
disabled: false
});
</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