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 Eje dependiendo
Sintaxis:
{ axis : horizontal | vertical }
Valores: esta opción tiene dos valores, como se mencionó anteriormente y se describe a continuación:
- horizontal: Esto definiría la dirección del control deslizante para que sea horizontal. Es el valor predeterminado.
- vertical: Esto definiría la dirección del control deslizante para que sea vertical.
Ejemplo 1:
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 axis</h2>
<p>
The slider is on the
horizontal axis.
</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>
<script type="text/javascript">
new Control.Slider('handle-hor',
'track-hor', {
range: $R(1, 100),
// Set the axis of the slider
// to be horizontal
axis: 'horizontal',
onSlide: (val) => {
document.querySelector("#out")
.textContent = val;
}
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
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: 5px;
background-color: gray;
height: 150px;
position: relative;
}
.track .handle {
width: 20px;
height: 10px;
background-color: green;
cursor: move;
position: absolute;
left: -8px;
}
.pad {
padding: 25px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h2>Sliders axis</h2>
<p>The slider is on the vertical axis.</p>
<div class="pad">
<div id="track-vert" class="track">
<div id="handle-vert" class="handle">
</div>
</div>
</div>
<p>Current Slider Value:
<span id="out">0</span>
</p>
<script type="text/javascript">
new Control.Slider('handle-vert',
'track-vert', {
range: $R(1, 100),
// Set the axis of the slider
// to be vertical
axis: 'vertical',
onSlide: (val) => {
document.querySelector("#out")
.textContent = 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