JqueryUI - Posizione
In questo capitolo vedremo uno dei metodi di utilità di jqueryUi, il metodo position () . Il metodo position () consente di posizionare un elemento rispetto a un altro elemento o evento del mouse.
jQuery UI estende il metodo .position () da jQuery core in un modo che ti consente di descrivere come vuoi posizionare un elemento nello stesso modo in cui lo descriveresti naturalmente a un'altra persona. Invece di lavorare con i numeri e la matematica, lavori con parole significative (come sinistra e destra) e relazioni.
Sintassi
Quanto segue è la sintassi del metodo position () :
.position( options )Where options è di tipo Object e fornisce le informazioni che specificano come devono essere posizionati gli elementi dell'insieme avvolto. La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:
| Sr.No. | Opzione e descrizione |
|---|---|
| 1 | mio Questa opzione specifica la posizione degli elementi avvolti (quelli che vengono riposizionati) per allinearsi con l'elemento o la posizione di destinazione. Per impostazione predefinita, il suo valore ècenter. Option - my Questa opzione specifica la posizione degli elementi avvolti (quelli che vengono riposizionati) per allinearsi con l'elemento o la posizione di destinazione. Per impostazione predefinita, il suo valore ècenter. Due di questi valori vengono utilizzati per specificare la posizione: in alto, a sinistra, in basso, a destra e al centro , separati da uno spazio, dove il primo valore è ilhorizontal value, e il secondo il vertical. Se viene considerato il valore singolo specificatohorizontal o verticaldipende dal valore utilizzato (ad esempio, la parte superiore è considerata verticale, mentre la destra è orizzontale). Example |
| 2 | a Questa opzione è di tipo String e specifica la posizione dell'elemento di destinazione rispetto al quale allineare gli elementi riposizionati. Accetta gli stessi valori dell'opzione my . Per impostazione predefinita, il suo valore ècenter. Option - at Questa opzione è di tipo String e specifica la posizione dell'elemento di destinazione rispetto al quale allineare gli elementi riposizionati. Accetta gli stessi valori dell'opzione my . Per impostazione predefinita, il suo valore ècenter. Example |
| 3 | di È di tipo Selector o Element, jQuery o Event. Identifica l'elemento di destinazione rispetto al quale devono essere riposizionati gli elementi avvolti o un'istanza di Event contenente le coordinate del mouse da utilizzare come posizione di destinazione. Per impostazione predefinita, il suo valore ènull. Option - of È di tipo Selector o Element, jQuery o Event. Identifica l'elemento di destinazione rispetto al quale devono essere riposizionati gli elementi avvolti o un'istanza di Event contenente le coordinate del mouse da utilizzare come posizione di destinazione. Per impostazione predefinita, il suo valore ènull. Example |
| 4 | collisione Questa opzione è di tipo String e specifica le regole da applicare quando l'elemento posizionato si estende oltre la finestra in qualsiasi direzione. Per impostazione predefinita, il suo valore èflip. Option - collision Questa opzione è di tipo String e specifica le regole da applicare quando l'elemento posizionato si estende oltre la finestra in qualsiasi direzione. Per impostazione predefinita, il suo valore èflip. Accetta due (orizzontale seguito da verticale) dei seguenti:
Se viene specificato un singolo valore, si applica a entrambe le direzioni. Example |
| 5 | utilizzando Questa opzione è una funzione che sostituisce la funzione interna che cambia la posizione dell'elemento. Chiamato per ogni elemento avvolto con un singolo argomento costituito da un hash di oggetto con le proprietà left e top impostate sulla posizione di destinazione calcolata e l'elemento impostato come contesto della funzione. Per impostazione predefinita, il suo valore ènull. Option - using Questa opzione è una funzione che sostituisce la funzione interna che cambia la posizione dell'elemento. Chiamato per ogni elemento avvolto con un singolo argomento costituito da un hash di oggetto con le proprietà left e top impostate sulla posizione di destinazione calcolata e l'elemento impostato come contesto della funzione. Per impostazione predefinita, il suo valore ènull. Example |
| 6 | entro Questa opzione è un selettore, un elemento o un elemento jQuery e consente di specificare quale elemento utilizzare come riquadro di delimitazione per il rilevamento delle collisioni. Questo può tornare utile se devi contenere l'elemento posizionato all'interno di una sezione specifica della tua pagina. Per impostazione predefinita, il suo valore èwindow. Option - within Questa opzione è un selettore, un elemento o un elemento jQuery e consente di specificare quale elemento utilizzare come riquadro di delimitazione per il rilevamento delle collisioni. Questo può tornare utile se devi contenere l'elemento posizionato all'interno di una sezione specifica della tua pagina. Per impostazione predefinita, il suo valore èwindow. |
Esempio
Il seguente esempio dimostra l'uso del metodo position .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI position method Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement {
width: 300px;
height: 500px;
padding-top:50px;
}
</style>
<script>
$(function() {
// Position the dialog offscreen to the left, but centered vertically
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right-10 top+10",
at: "right top",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<div id = "targetElement">
<div class = "positionDiv" id = "position1">Box 1</div>
<div class = "positionDiv" id = "position2">Box 2</div>
<div class = "positionDiv" id = "position3">Box 3</div>
<div class = "positionDiv" id = "position4">Box 4</div>
</div>
</body>
</html>Salviamo il codice sopra in un file HTML positionmethodexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:
In questo esempio vediamo che:
Scatola 1 è allineato al centro (orizzontale e verticale) della dell'elemento div.
Scatola 2 è allineata in alto a sinistra (orizzontale e verticale) della dell'elemento div.
La casella 3 viene visualizzata nell'angolo in alto a destra della finestra, ma lascia un po 'di spaziatura interna in modo che il messaggio risalti di più. Questo viene fatto usando i valori orizzontali e verticali di my o at .
Per il riquadro 4 , il valore of è impostato come oggetto evento. Questo è un evento associato a un puntatore e si sposta con l'evento del mouse.