jQuery UI esempio - Slider (cursore)
Trascinare la maniglia per selezionare un valore.
Per ulteriori dettagli sul membro cursore, vedere la documentazione API membro cursore (il cursore il Widget) .
La funzione di default
Il cursore di base è orizzontale e ha un unico manico, può essere spostato con il mouse oi tasti freccia.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - La funzione di default </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#slider") .slider ();
});
</ Script>
</ Head>
<Body>
<Div id = "slider"> </ div>
</ Corpo>
</ Html>
color Picker
Una combinazione di tre cursori per creare un semplice selettore di colori RGB.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - Color Picker </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#Red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
altezza: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#Red .ui-cursore-range {background: # ef2929;}
#Red .ui-cursore-handle {border-color: # ef2929;}
#green .ui-cursore-range {background: # 8ae234;}
#green .ui-cursore-handle {border-color: # 8ae234;}
#blue .ui-cursore-range {background: # 729fcf;}
#blue .ui-cursore-handle {border-color: # 729fcf;}
</ Style>
<Script>
funzione hexFromRGB (r, g, b) {
var hex = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ .Ogni (Hex, la funzione (nr, val) {
if (val.length === 1) {
esagonali [nr] = "0" + val;
}
});
tornare hex.join ( "") .toUpperCase ();
}
Funzione refreshSwatch () {
var rosso = $ ( "#Red") .slider ( "valore"),
verde = $ ( "#green") .slider ( "valore"),
blu = $ ( "#blue") .slider ( "valore"),
hex = hexFromRGB (rosso, verde, blu);
$ ( "#swatch") Css ( "background-color", "#" + hex);
}
$ (Function () {
$ ( "#red, #green, #blue") .slider ({
orientamento: "orizzontale",
gamma: "min",
max: 255,
Valore: 127,
scorrere: refreshSwatch,
cambiamento: refreshSwatch
});
$ ( "#red") .slider ( "Valore", 255);
$ ( "#green") .slider ( "Valore", 140);
$ ( "#blue") .slider ( "Valore", 60);
});
</ Script>
</ Head>
<Classe corpo = "ui-widget di-content" style = "border: 0;">
<P class = "ui-stato-default ui-angolo-tutto ui-helper-clearfix" style = "padding: 4px;">
<Class = "ui ui-icon-icon-matita" span style = "float: left; margin: 5px 0 0 -2px;"> </ span>
Semplice color picker </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "campione" class = "ui-widget di contenuto ui-angolo-all"> </ div>
</ Corpo>
</ Html>
Una pluralità di cursori
Una combinazione di dispositivi di scorrimento orizzontali e verticali, ciascuno con la propria opzione, per creare un lettore musicale interfaccia utente.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - cursori </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
arco #eq {
altezza: 120px; float: left; margin: 15px
}
</ Style>
<Script>
$ (Function () {
// Imposta il Master Volume $ ( "#MASTER") .slider ({
Valore: 60,
orientamento: "orizzontale",
gamma: "min",
animare: true
});
// Imposta l'equalizzatore grafico $ ( "#eq> span") .Ogni (function () {
// Legge il valore iniziale dal tag e rimuovere il valore var = parseInt ($ (this) .text (), 10);
$ (This) .empty (). Slider ({
Valore: il valore,
gamma: "min",
animare: vero,
orientamento: "verticale"
});
});
});
</ Script>
</ Head>
<Body>
<P class = "ui-stato-default ui-angolo-tutto ui-helper-clearfix" style = "padding: 4px;">
<Span class = "ui ui-icon-icon-volume-on" style = "float: left; margin: 5px 0 0 -2px;"> </ span>
Master Volume </ p>
<Div id = stile "master" = "width: 260px; margin: 15px;"> </ div>
<P class = "-tutto ui ui-angolo-stato-default" style = "padding: 4px; margin-top: 4em;">
<Span class = "ui ui-icon-icon-segnale" style = "float: left; margin: 5px 0 0 -2px;"> </ span>
Equalizzatore grafico </ p>
<Div id = "eq">
<Span> 88 </ span>
<Span> 77 </ span>
<Span> 55 </ span>
<Span> 33 </ span>
<Span> 40 </ span>
<Span> 45 </ span>
<Span> 70 </ span>
</ Div>
</ Corpo>
</ Html>
gamma Slider
Impostazione range opzione è vero, per ottenere un intervallo di valori con due maniglie di trascinamento. Tra la manopola di comando con un colore di sfondo diverso riempimento per indicare il valore dell'intervallo è facoltativo.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - cursore Intervallo </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Slider-range") .slider ({
gamma: è vero,
min: 0,
max: 500,
valori: [75, 300],
slitta: la funzione (evento, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .VAL ( "$" + $ ( "# Slider-range") ( "valori" .slider, 0) +
"- $" + $ ( "# Slider-range") .slider ( "valori", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "valore"> Fascia di prezzo: </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range"> </ div>
</ Corpo>
</ Html>
Con la gamma massimo fissato
Fissa la portata massima del cursore, l'utente può selezionare il minimo. Impostazione range opzione "max".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - gamma con un massimo fissa </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Slider-gamma-max") .slider ({
gamma: "max",
min: 1,
max: 10,
Valore: 2,
slitta: la funzione (evento, ui) {
$ ( "#amount") .VAL (Ui.value);
}
});
$ ( "#amount") .VAL ($ ( "# Slider-gamma-max") .slider ( "valore"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "valore"> Numero minimo di camere: </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-gamma-max"> </ div>
</ Corpo>
</ Html>
Intervallo con un minimo fisso
Il cursore minimo fissato gamma, l'utente può selezionare il massimo. Impostazione range opzione "min".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - gamma con un minimo fisso </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Slider-gamma-min") .slider ({
gamma: "min",
Valore: 37,
min: 1,
max: 700,
slitta: la funzione (evento, ui) {
$ ( "#amount") .VAL ( "$" + Ui.value);
}
});
$ ( "#amount") .VAL ( "$" + $ ( "# Slider-gamma-min") .slider ( "valore"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "valore"> Prezzo Massimo: </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-gamma-min"> </ div>
</ Corpo>
</ Html>
Bound per selezionare un cursore
Come associare un cursore per selezionare un elemento esistente. Scegli rimane visibile al fine di mostrare i cambiamenti. Quando la selezione cambia, aggiornare il cursore.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - è destinata a selezionare un cursore </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var selezionare = $ ( "#minbeds");
var cursore = $ ( "<div id = 'cursore'> </ div>") .insertAfter (selezionare) .slider ({
min: 1,
max: 6,
gamma: "min",
Valore: selezionare [0] .selectedIndex + 1,
slitta: la funzione (evento, ui) {
selezionare [0] = .selectedIndex ui.value - 1;
}
});
$ ( "#minbeds") .Per Passare (function () {
slider.slider ( "valore", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Body>
<Form id = "prenotazione">
<Label for = ""> minbeds numero minimo di posti letto </ label>
<select name = "minbeds" id = ""> minbeds
<Opzione> 1 </ option>
<Opzione> 2 </ option>
<Opzione> 3 </ option>
<Opzione> 4 </ option>
<Opzione> 5 </ option>
<Opzione> 6 </ option>
</ Select>
</ Form>
</ Corpo>
</ Html>
scorrimento scrollbar
Utilizzare il cursore per operare individuare il contenuto della pagina. In questo caso, è possibile ottenere il valore di una barra di scorrimento.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - far scorrere la barra di scorrimento </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.scroll-riquadro {overflow: auto; width: 99%; float: left;}
.scroll-content {width: 2440px; float: left;}
.scroll-content-item {width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center;}
.scroll bar-wrap {clear: left; padding: 0 0 4px 2px; margin: 0 -1px -1px -1px;}
.scroll bar-wrap .ui-cursore {background: none; border: 0; height: 2em; margin: 0 auto;}
.scroll bar-wrap .ui-handle-helper-parent {position: relative; width: 100%; height: 100%; margin: 0 auto;}
.scroll bar-wrap .ui-cursore-handle {top: .2em; height: 1.5em;}
.scroll bar-wrap .ui-cursore-handle .ui-icona {margin: auto -8px 0; position: relative; top: 50%;}
</ Style>
<Script>
$ (Function () {
// Scorrimento del pannello porzione var ScrollPane = $ ( ".scroll-pane"),
scrollContent = $ ( ".scroll-content");
// Crea un cursore var barra di scorrimento = $ ( ".scroll-bar") .slider ({
slitta: la funzione (evento, ui) {
if (scrollContent.width ()> scrollPane.width ()) {
scrollContent.css ( "margin-left", Math.round (
ui.value / 100 * (scrollPane.width () - scrollContent.width ())
) + "Px");
} Else {
scrollContent.css ( "margin-left", 0);
}
}
});
// Aggiunge l'icona di elaborare var handleHelper = scrollbar.find ( ".ui-cursore-handle")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
.Append ( "<span class = 'ui ui-icon-icon-presa-punteggiato-verticale'> </ span>")
.Wrap ( "<div class = 'ui-handle-helper-parent'> </ div>") .parent ();
// Dal momento che il cursore impugnatura di scorrimento, cambiare per nascondere la parte di overflow scrollPane.css ( "troppo pieno", "nascosto");
// Secondo la distanza di scorrimento è definito dal rapporto tra la dimensione della barra di scorrimento e la funzione maniglia sizeScrollbar () {
var = resto scrollContent.width () - scrollPane.width ();
var = percentuale rimanente / scrollContent.width ();
var = handleSize scrollPane.width () - (percentuale * scrollPane.width ());
scrollbar.find ( ".ui-cursore-handle") css ({
Larghezza: handleSize,
"Margin-left": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Posizione di scorrimento basato sul contenuto, ripristinare il valore della funzione di scorrimento ResetValue () {
var = resto scrollPane.width () - scrollContent.width ();
var = LeftVal scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
var = percentuale Math.round (LeftVal / resto * 100);
scrollbar.slider ( "valore", in percentuale);
}
// Se il cursore è 100%, e gli aumenti della finestra, la funzione di visualizzazione reflowContent () {
var = mostra scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
var gap = scrollPane.width () - che mostra;
if (gap> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + gap);
}
}
// Cambiamento gestire quando la posizione della finestra di zoom $ (window) .resize (function () {
ResetValue ();
sizeScrollbar ();
reflowContent ();
});
// Inizializza il setTimeout dimensione barra di scorrimento (sizeScrollbar, 10); // safari timeout});
</ Script>
</ Head>
<Body>
<Div class = "scroll-riquadro ui-ui-widget di widget di intestazione-ui-angolo-all">
<Div class = "scroll-content">
<Div class = "scroll-content-voce ui-widget di-header"> 1 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 2 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 3 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 4 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 5 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 6 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 7 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 8 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 9 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 10 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 11 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 12 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 13 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 14 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 15 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 16 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 17 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 18 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 19 </ div>
<Div class = "scroll-content-voce ui-widget di-header"> 20 </ div>
</ Div>
<Div class = "scroll-bar-wrap ui-widget di contenuto ui-angolo-bottom">
<Div class = "scroll-bar"> </ div>
</ Div>
</ Div>
</ Corpo>
</ Html>
allineare incremento
Con step opzione è impostata su un cursore intero per impostare il valore di incremento è di solito il dispositivo di scorrimento massima divisore. L'incremento predefinito è 1.
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - allineato incrementale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "#slider") .slider ({
Valore: 100,
min: 0,
max: 500,
passo: 50,
slitta: la funzione (evento, ui) {
$ ( "#amount") .VAL ( "$" + Ui.value);
}
});
$ ( "#amount") .VAL ( "$" + $ ( "#slider") .slider ( "Value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "valore"> importo della donazione ($ 50 incrementi): </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider"> </ div>
</ Corpo>
</ Html>
dispositivo di scorrimento verticale gamma
Cambiare la portata della direzione perpendicolare al cursore. Con .height() assegna un valore di altezza, o impostare l'altezza CSS e impostare orientation delle opzioni per il "verticale".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - dispositivo di scorrimento verticale gamma </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Slider-range") .slider ({
orientamento: "verticale",
gamma: è vero,
valori: [17, 67],
slitta: la funzione (evento, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .VAL ( "$" + $ ( "# Slider-range") ( "valori" .slider, 0) +
"- $" + $ ( "# Slider-range") .slider ( "valori", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = ""> importo obiettivi di vendita (in milioni): </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = stile "slider-range" = "height: 250px;"> </ div>
</ Corpo>
</ Html>
dispositivo di scorrimento verticale
Cambiare la direzione del cursore è verticale. Con .height() assegna un valore di altezza, o impostare l'altezza CSS e impostare orientation delle opzioni per il "verticale".
<! Html Doctype>
<Html lang = "it">
<Head>
<META charset = "utf-8">
<Title> jQuery UI Slider (Slider) - dispositivo di scorrimento verticale </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
<Src = "script // code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
$ ( "# Slider-verticale") .slider ({
orientamento: "verticale",
gamma: "min",
min: 0,
max: 100,
Valore: 60,
slitta: la funzione (evento, ui) {
$ ( "#amount") .VAL (Ui.value);
}
});
$ ( "#amount") .VAL ($ ( "# Slider-verticale") .slider ( "valore"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "valore"> Volume: </ label>
<Input type = "text" id = "quantità" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-verticale" style = "height: 200px;"> </ div>
</ Corpo>
</ Html>