script.aculo.us - Crea cursori
I cursori sono tracce sottili con una o più maniglie su di esse che l'utente può trascinare lungo la traccia.
L'obiettivo di uno slider è fornire un metodo di input alternativo per definire un valore numerico; il cursore rappresenta un intervallo e lo scorrimento di una maniglia lungo la traccia definisce un valore all'interno di questo intervallo.
I cursori possono essere con orientamento orizzontale o verticale. Quando è orizzontale, l'estremità sinistra della traccia di solito rappresenta il valore più basso, mentre in un orientamento verticale, la parte inferiore della diapositiva è solitamente il valore più basso.
Per utilizzare le funzionalità di scorrimento di script.aculo.us, è necessario caricare il modulo slider.js insieme al modulo prototype.js. Quindi il tuo caricamento minimo per script.aculo.us sarà simile a questo -
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load=slider">< /script>Creazione di un controllo Slider
La creazione di uno slider è, come al solito, una questione di costruire un oggetto personalizzato su alcuni elementi esistenti nel DOM della tua pagina. Avrai bisogno di due elementi qui, uno per la maniglia e uno per la traccia come segue:
new Control.Slider(handle, track [ , options ] );L'elemento track è solitamente un <div> e l'elemento handle è un <div> o <span> all'interno dell'elemento track. Entrambi possono essere passati dal loro id = o da riferimenti DOM diretti, come al solito.
Opzioni cursori
Puoi utilizzare una o più delle seguenti opzioni durante la creazione dell'oggetto Slider.
| Suor n | Opzione e descrizione |
|---|---|
| 1 | Axis Definisce l'orientamento del controllo come orizzontale o verticale . L'orientamento predefinito è orizzontale . |
| 2 | Range Definisce l'intervallo dei valori del dispositivo di scorrimento come istanza di un'istanza di Prototype ObjectRange. Il valore predefinito è da 0 a 1. |
| 3 | Values Definisce il set discreto di valori che il dispositivo di scorrimento può acquisire. Se omesso, è possibile impostare tutti i valori all'interno dell'intervallo. |
| 4 | sliderValue Imposta il valore iniziale del cursore. Se omesso, il valore rappresentato dal bordo più a sinistra (o più in alto) del cursore è il valore iniziale. |
| 5 | Disabled Se è vero, crea una diapositiva inizialmente disabilitata. Ovviamente il valore predefinito è false. |
| 6 | setValue Aggiornerà il valore del dispositivo di scorrimento e quindi sposterà la maniglia del dispositivo di scorrimento nella posizione appropriata. |
| 7 | setDisabled Imposta il dispositivo di scorrimento sullo stato disabilitato (disabilitato = vero). |
| 8 | setEnabled Imposta il dispositivo di scorrimento sullo stato abilitato (disabilitato = falso). |
È possibile fornire i seguenti callback nel parametro delle opzioni:
| Suor n | Opzione e descrizione |
|---|---|
| 1 | onSlide Chiamato ogni volta che lo Slider viene spostato trascinando. La funzione chiamata ottiene il valore dello slider come parametro. |
| 2 | onChange Chiamato ogni volta che lo Slider ha terminato lo spostamento o ha avuto il suo valore modificato tramite la funzione setSlider Value. La funzione chiamata ottiene il valore dello slider come parametro. |
Esempio di cursori
<html>
<head>
<title>Sliders Example</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/scriptaculous.js?load = slider" ></script>
<script type = "text/javascript">
window.onload = function() {
new Control.Slider('handle1' , 'track1',{
range: $R(1,100), values: [1,25,50,75,100], sliderValue: 1, onChange: function(v){ $('changed').innerHTML = 'Changed Value : '+v;
},
onSlide: function(v) {
$('sliding').innerHTML = 'Sliding Value: '+v; } }); new Control.Slider('handle2' , 'track2', { range: $R(1,100),
axis:'vertical',
sliderValue: 1,
onChange: function(v){
$('changed').innerHTML = 'Changed Value : '+v; } onSlide: function(v) { $('sliding').innerHTML = 'Sliding Value: '+v;
}
});
}
</script>
<style type = "text/css">
h1{ font-size: 1.5em; }
.track {
background-color: #aaa;
position: relative;
height: 0.5em; width: 10em;
cursor: pointer; z-index: 0;
}
.handle {
background-color: red;
position: absolute;
height: 1em; width: 0.25em; top: -0.25em;
cursor: move; z-index: 2;
}
.track.vertical {
width: 0.5em; height: 10em;
}
.track.vertical .handle {
width: 1em; height: 0.25em; top: 0; left: -0.25em;
}
</style>
</head>
<body>
<h1>Simple sliders</h1>
<div id = "track1" class = "track" style = "width: 20em;" >
<div id = "handle1" class = "handle" style = "width: 0.5em;" ></div>
</div>
<p id = "sliding" ></p>
<p id = "changed" ></p>
<div id = "track2" class = "track vertical" style = "position: absolute; left: 25em; top: 3em;" >
<div id = "handle2" class = "handle" style = "height: 0.5em;" ></div>
</div>
</body>
</html>Punti da notare:
Puoi cambiare l'immagine del cursore di qualsiasi cursore usando CSS. Usa le proprietà CSS background-image: url (track.gif) e background-repeat: no-repeat per impostare l'immagine del cursore.
Il valore dell'intervallo può essere specificato utilizzando $R(minValue, MaxValue). For example, $R (1, 100).
Il valore dell'intervallo può essere specificato in termini di valori specifici. Ad esempio i valori: [1,25,50,75,100]. In questo caso, il dispositivo di scorrimento raggiungerebbe solo i valori discreti elencati quando la maniglia è stata spostata.
In qualsiasi momento, il valore dello slider può essere impostato sotto il controllo del programma chiamando il metodo setValue () dell'istanza dello slider, come in: sliderInstance.setValue (50);
Questo produrrà il seguente risultato: