script.aculo.us amplía Prototype JavaScript Framework al agregar más funciones de accesibilidad a su página web. Estas características se dividen en varios módulos.
1. Módulo de efectos: el módulo de efectos viene con cinco efectos principales: Opacidad, Escala, MoveBy, Resaltado y Paralelo. A través de la combinación de estos efectos principales, hay más de 16 efectos adicionales, por ejemplo: efecto.Aparecer, efecto.Alternar, etc.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
function ShowElement(element) {
new Effect.Opacity(element,
{ duration: 1, from: 0, to: 1.0 });
}
function HideElement(element) {
new Effect.Opacity(element,
{ duration: 1, from: 1.0, to: 0 });
}
</script>
</head>
<body>
<div onclick="ShowElement('element')">
<Button>Show Content</Button>
</div>
<br />
<div onclick="HideElement('element')">
<Button>Hide Content</Button>
</div>
<br />
<img id="element" src="./gfg.png">
</body>
</html>
Producción:
2. Arrastrar y colocar: se puede usar para hacer que cualquier elemento se pueda arrastrar, convertirlo en una zona de colocación o incluso hacer que una serie completa de elementos se pueda ordenar para que pueda reorganizarlos arrastrándolos y soltándolos.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load=effects,dragdrop">
</script>
<script type="text/javascript">
var dragables = ['element'];
window.onload = function () {
dragables.each(function (item)
{ new Draggable(item, {}); });
}
</script>
</head>
<body>
<img id="element" src="./gfg.png">
</body>
</html>
Producción:
3. Controles deslizantes: 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 script.aculo.us, puede crear dichos controles deslizantes con mucho control.
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:
4. Autocompletar: Autocompletar permite campos de entrada de texto de autocompletado local y alimentado por servidor. Hace que el autocompletado sea muy fácil.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js?load = effects,controls">
</script>
<script type="text/javascript">
window.onload = function () {
new Autocompleter.Local(
'searchBox',
'Result',
['effect', 'drag', 'drop',
'auto', 'complete',
'slider', 'sound'],
);
}
</script>
</head>
<body>
<div>
<label>Search :</label>
<input type="text" id="searchBox" />
<div id="Result"></div>
</div>
</body>
</html>
Producción:
5. Edición en el lugar: permite hacer que cualquier texto o colección de elementos en la base de datos se pueda editar en el lugar simplemente haciendo clic en él. Puede convertir el contenido estático en una forma editable usando este módulo.
6. Builder: Builder permite crear elementos DOM de forma dinámica. Esta herramienta facilita la creación de DOM.
7. Sonido: este módulo se introdujo por primera vez en la versión 1.7.1 del script. Le permite reproducir sonidos fácilmente, ponerlos en cola, usar múltiples pistas, etc. < Ayuda a administrar fácilmente las pistas de sonido.
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA