Das beste jQuery UI Beispiel - Slider (Schieberegler)-Tutorial im Jahr 2024. In diesem Tutorial können Sie Die Standardfunktion,Color Picker,Eine Vielzahl von Schiebern,Reichweite Slider,Mit festen maximalen Reichweite,Bereich mit festen Mindest,Bound einen Schieberegler zur Auswahl,Scrollbar Schieber,Richten Zuwachs,Vertikal Bereich Schieber,Vertikal Schieber, lernen
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) .
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>
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 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>
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>
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>
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>
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>
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>
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>
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>
Ä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>