jQuery UI Beispiel - Slider (Schieberegler)
Ziehen Sie den Griff um einen Wert auszuwählen.
Für weitere Informationen über Schieber finden Sie in der API - Dokumentation Schiebers (das Slider das Widget) .
Die Standardfunktion
Der Grund Schieber ist horizontal und hat einen einzigen Handgriff, kann mit der Maus oder den Pfeiltasten bewegt werden.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Die Standardfunktion </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 = "Schieber"> </ div>
</ Body>
</ Html>
Color Picker
Eine Kombination aus drei Schieberegler eine einfache RGB Farbauswahl zu erstellen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Color Picker </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 {
Breite: 120px;
Höhe: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#RED .ui-Slider-Bereich {background: # ef2929;}
#RED .ui-Slider-Griff {border-color: # ef2929;}
#green .ui-Slider-Bereich {background: # 8ae234;}
#green .ui-Slider-Griff {border-color: # 8ae234;}
#blue .ui-Slider-Bereich {background: # 729fcf;}
#blue .ui-Slider-Griff {border-color: # 729fcf;}
</ Style>
<Script>
Funktion hexFromRGB (r, g, b) {
var hex = [
r.toString (16),
g.toString (16),
b.toString (16)
];
$ .each (Hex, Funktion (nr, val) {
if (val.length === 1) {
hex [nr] = "0" + val;
}
});
Rückkehr hex.join ( "") .toUpperCase ();
}
Funktion refreshSwatch () {
var rot = $ ( "#RED") .slider ( "value"),
grün = $ ( "#green") .slider ( "value"),
$ Blau = ( "#blue") .slider ( "value"),
hex = hexFromRGB (rot, grün, blau);
$ ( "#swatch") CSS- ( "background-color", "#" + hex);
}
$ (Function () {
$ ( "#red, #green, #blue") .slider ({
Orientierung: "horizontal",
Bereich: "min",
max: 255,
Wert: 127,
Stössel: refreshSwatch,
Änderung: refreshSwatch
});
$ ( "#red") .slider ( "Value", 255);
$ ( "#green") .slider ( "Value", 140);
$ ( "#blue") .slider ( "Value", 60);
});
</ Script>
</ Head>
<Body class = "ui-Widget-content" style = "border: 0;">
<P class = "ui-State-default ui-Ecke alle ui-Helfer-clearfix" style = "padding: 4px;">
<Span class = "ui-Symbol ui-icon-Bleistift" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Einfache Farbauswahl </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "Swatch" class = "ui-Widget-Inhalt ui-Ecke-all"> </ div>
</ Body>
</ Html>
Eine Vielzahl von Schiebern
Eine Kombination von horizontalen und vertikalen Schieberegler, die jeweils mit einer eigenen Option, ein Musik-Player-Benutzeroberfläche zu erstellen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Schieber </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
#eq Spanne {
Höhe: 120px; float: left; margin: 15px
}
</ Style>
<Script>
$ (Function () {
// Stellen Sie den Master Volume $ ( "#master") .slider ({
Wert: 60,
Orientierung: "horizontal",
Bereich: "min",
animieren: true
});
// Stellen Sie den Grafik-Equalizer $ ( "#eq> span") .each (function () {
// Liest den Anfangswert aus dem Tag und entfernen Sie den var value = parseInt ($ (this) .text (), 10);
$ (Diese) .empty (). Slider ({
Wert: Wert,
Bereich: "min",
animieren: true,
Orientierung: "vertikal"
});
});
});
</ Script>
</ Head>
<Body>
<P class = "ui-State-default ui-Ecke alle ui-Helfer-clearfix" style = "padding: 4px;">
<Span class = "ui-ui-Symbol-Symbol-Volumen-on" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Master Volume </ p>
<Div id = "Master" style = "width: 260px; margin: 15px;"> </ div>
<P class = "ui-State-default ui-Ecke-all" style = "padding: 4px; margin-top: 4em;">
<Span class = "ui-ui-Symbol-Symbol-Signal" style = "float: left; margin: 5px -2px 0 0;"> </ span>
Graphic Equalizer </ 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>
</ Body>
</ Html>
Reichweite Slider
Einstellung range Option gilt, eine Reihe von Werten mit zwei Ziehpunkte zu erhalten. Zwischen dem Steuergriff mit einer anderen Hintergrundfarbe zu füllen der Wert des Intervalls ist optional anzuzeigen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Reichweite Slider </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
Bereich: true,
min: 0,
max: 500,
Werte: [75, 300],
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "Werte", 0) +
"- $" + $ ( "# Slider-range") .slider ( "Werte", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Preisspanne: </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Slider-Bereich"> </ div>
</ Body>
</ Html>
Mit festen maximalen Reichweite
die maximale Reichweite des Schiebers Befestigung kann der Benutzer die Mindest auswählen. Einstellen range Option auf "max".
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Bereich mit einer festen maximalen </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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-max") .slider ({
Bereich: "max",
min: 1,
max: 10,
Wert: 2,
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-Range-max") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Mindestanzahl der Zimmer: </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Slider-range-max"> </ div>
</ Body>
</ Html>
Bereich mit festen Mindest
Die festen Mindestbereichsschieberegler kann der Benutzer die maximale auswählen. Einstellung range Option "min".
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Bereich mit einem festen Mindest </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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-min") .slider ({
Bereich: "min",
Wert: 37,
min: 1,
max: 700,
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-Range-min") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Maximaler Preis: </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Slider-range-min"> </ div>
</ Body>
</ Html>
Bound einen Schieberegler zur Auswahl
Wie man einen Schieber zu binden, ein vorhandenes Element zu wählen. Wählen Sie bleibt sichtbar, um Änderungen zu zeigen. Wenn die Auswahl ändert, aktualisieren Sie den Schieberegler.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - gebunden ist, einen Schieberegler, um </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 select = $ ( "#minbeds");
var Schieber = $ ( "<div id =" Schieber "> </ div>") .insertAfter (Auswahl) .slider ({
min: 1,
max: 6,
Bereich: "min",
Wert: Wählen Sie [0] .selectedIndex + 1,
Slide-Funktion (Ereignis, ui) {
Wählen Sie [0] .selectedIndex = ui.value - 1;
}
});
$ ( "#minbeds") .change (Function () {
slider.slider ( "value", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Body>
<Form id = "Reservierung">
<Label for = "minbeds"> Mindestzahl an Betten </ label>
<Select name = "minbeds" id = "minbeds">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
<Option> 5 </ option>
<Option> 6 </ option>
</ Select>
</ Form>
</ Body>
</ Html>
Scrollbar Schieber
Mit dem Schieberegler betätigen, um den Seiteninhalt finden. In diesem Fall ist es in der Lage, den Wert eines Bildlaufleiste zu bekommen.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - schieben Sie die Bildlaufleiste </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.scroll Scheibe {overflow: auto; width: 99%; float: left;}
.scroll-Inhalt {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 4px 0 2px; margin: 0 -1px -1px -1px;}
.scroll-Bar-wrap .ui-Slider {background: none; border: 0; Höhe: 2em; margin: 0 auto;}
.scroll-Bar-wrap .ui-Griff-Helfer-parent {position: relative; Breite: 100%; height: 100%; margin: 0 auto;}
.scroll-Bar-wrap .ui-Slider-Griff {top: .2em; height: 1.5em;}
.scroll-Bar-wrap .ui-Slider-Griff .ui-Symbol {margin: -8px auto 0; position: relative; top: 50%;}
</ Style>
<Script>
$ (Function () {
// Scroll Plattenabschnitt var scrollPane = $ ( ".scroll-Scheibe"),
scrollContent = $ ( ".scroll-content");
// Erstellen Sie einen Schieberegler var Scrollbar = $ ( ".scroll-Bar") .slider ({
Slide-Funktion (Ereignis, 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);
}
}
});
// Anhängen Symbol var handleHelper = scrollbar.find ( ".ui-Slider-Griff") zu verarbeiten
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
.append ( "<span class = 'ui-ui-Symbol-Symbol-Griff-punktierte vertikale"> </ span> ")
.wrap ( "<div class =" ui-Griff-Helfer-Eltern "> </ div>") .parent ();
// Da der Schiebergriff blättern, ändern Sie den Überlaufabschnitt scrollPane.css ( "Überlauf", "versteckt") zu verbergen;
// Nach der Bildlauf Abstand von dem Verhältnis der Größe der Bildlaufleiste und der Grifffunktion sizeScrollbar () definiert ist, {
var Rest = scrollContent.width () - scrollPane.width ();
var Anteil = Rest / scrollContent.width ();
var handleSize = scrollPane.width () - (Anteil * scrollPane.width ());
scrollbar.find ( ".ui-Slider-Griff") CSS- ({
Breite: handleSize,
"Margin-left": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Inhaltsbasierte Bildlaufposition, setzen Sie den Wert der Slider-Funktion Resetvalue () {
var Rest = scrollPane.width () - scrollContent.width ();
var LeftVal = scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
var Prozentsatz = Math.round (LeftVal / Rest * 100);
scrollbar.slider ( "value", in Prozent);
}
// Wenn der Schieber 100%, und die Fenster zu, die Anzeigefunktion reflowContent () {
var zeigt = scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
var gap = scrollPane.width () - zeigt;
if (gap> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + Spalt);
}
}
// Handle ändern, wenn der Zoomfensterposition $ (Fenster) .resize (function () {
Resetvalue ();
sizeScrollbar ();
reflowContent ();
});
// Initialisieren der Scrollbar Größe setTimeout (sizeScrollbar, 10); // Safari Timeout});
</ Script>
</ Head>
<Body>
<Div class = "scroll-pane ui-Widget ui-Widget-Header ui-Ecke-all">
<Div class = "scroll-content">
<Div class = "scroll-content-Element ui-Widget-header"> 1 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 2 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 3 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 4 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 5 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 6 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 7 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 8 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 9 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 10 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 11 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 12 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 13 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 14 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 15 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 16 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 17 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 18 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 19 </ div>
<Div class = "scroll-content-Element ui-Widget-header"> 20 </ div>
</ Div>
<Div class = "scroll-Bar-Wrap-ui-Widget-Inhalt ui-Ecke-bottom">
<Div class = "Bildlaufleiste"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
Richten Zuwachs
Mit dem step Option auf eine ganze Zahl Schieber eingestellt wird , um den Erhöhungswert zu setzen , ist in der Regel die maximale Divisor Schieber. Der Standardschritt ist 1.
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - ausgerichtet inkrementelle </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
Wert: 100,
min: 0,
max: 500,
Schritt: 50,
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Spendenbetrag (50 $ Schritten): </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Schieber"> </ div>
</ Body>
</ Html>
Vertikal Bereich Schieber
Verändern den Umfang der Richtung senkrecht zu dem Schieber. Durch .height() einen Höhenwert zuweisen oder die Höhe , die durch CSS festgelegt und setzen orientation Optionen für die "vertikale".
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - vertikale Bereichsschieberegler </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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 ({
Orientierung: "vertikal",
Bereich: true,
Werte: [17, 67],
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "- $" + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "Werte", 0) +
"- $" + $ ( "# Slider-range") .slider ( "Werte", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Verkaufsziele (in Millionen): </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Slider-range" style = "height: 250px;"> </ div>
</ Body>
</ Html>
Vertikal Schieber
Ändern sich die Richtung des Schiebers senkrecht ist. Durch .height() einen Höhenwert zuweisen oder die Höhe , die durch CSS festgelegt und setzen orientation Optionen für die "vertikale".
<! DOCTYPE html>
<Html lang = "de">
<Head>
<Meta charset = "UTF-8">
<Titel> jQuery UI Slider (Schieberegler) - Vertikale Slider </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// 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-vertical") .slider ({
Orientierung: "vertikal",
Bereich: "min",
min: 0,
max: 100,
Wert: 60,
Slide-Funktion (Ereignis, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-vertikal") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "Menge"> Volumen: </ label>
<Input type = "text" id = "Menge" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Slider-vertikale" style = "height: 200px;"> </ div>
</ Body>
</ Html>