jQuery UI przykład - Slider (suwak)
Przeciągnij uchwyt, aby wybrać wartość.
Aby uzyskać więcej informacji na temat członka suwaka można znaleźć w dokumentacji API element przesuwny (suwak widżet) .
Domyślną funkcją
Podstawowym suwak jest pozioma i posiada pojedynczy uchwyt, mogą być przenoszone z myszy lub klawiszy strzałek.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - Domyślna funkcja </ 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 = "Suwak"> </ div>
</ Body>
</ Html>
color Picker
Kombinacja trzech suwaków stworzyć prosty próbnik kolorów RGB.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - 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 {
Szerokość: 120 pikseli;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range {background: # ef2929;}
#red .ui-slider-handle {border-color: # ef2929;}
#green .ui-slider-range {background: # 8ae234;}
#green .ui-slider-handle {border-color: # 8ae234;}
#blue .ui-slider-range {background: # 729fcf;}
#blue .ui-slider-handle {border-color: # 729fcf;}
</ Style>
<Script>
Funkcja hexFromRGB (r, g, b) {
var hex = [
r.toString (16)
g.toString (16)
b.toString (16)
];
$ .each (Hex, function (nr, val) {
if (val.length === 1) {
hex [nr] = "0" + val;
}
});
powrót hex.join ( "") .toUpperCase ();
}
Funkcja refreshSwatch () {
var czerwony = $ ( "#red") .slider ( "value"),
zielony = $ ( "#green") .slider ( "value"),
niebieski = $ ( "#blue") .slider ( "value"),
hex = hexFromRGB (czerwony, zielony, niebieski);
$ ( "#swatch") .css ( "Background-color", "#" + hex);
}
$ (Function () {
$ ( "#red, #green, #blue") .slider ({
Orientacja: "poziomy",
Zakres: "min",
max: 255,
wartość: 127,
przesuń: refreshSwatch,
Zmiana: refreshSwatch
});
$ ( "#red") .slider ( "Value", 255);
$ ( "#green") .slider ( "Value", 140);
$ ( "#blue") .slider ( "Value", 60);
});
</ Script>
</ Head>
<Class ciała = "ui-widget-content" style = "border: 0;">
<P class = "ui-state-default ui-corner-all ui wspomagających clearfix" style = "padding: 4px;">
<Span class = "icon-ui ui-icon-ołówek" style = "pływać: left; margin: 5px 0 -2px 0;"> </ span>
Proste wyboru koloru </ p>
<Div id = "red"> </ div>
<Div id = "green"> </ div>
<Div id = "blue"> </ div>
<Div id = "swatch" class = "widget-ui ui-content-corner-all"> </ div>
</ Body>
</ Html>
Szereg suwaków
Kombinacja suwaków poziomych i pionowych, każdy z własną opcję, aby utworzyć interfejs odtwarzacza muzyki.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - suwaki </ 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 rozpiętość {
Wysokość: 120 pikseli; pływaka: left; margin: 15px
}
</ Style>
<Script>
$ (Function () {
// Ustaw $ Master Volume ( "#master") .slider ({
Wartość: 60,
Orientacja: "poziomy",
Zakres: "min",
animowanie: true
});
// Ustawienie korektora graficznego $ ( "#eq> rozpiętość") .each (function () {
// Odczytuje wartość początkową od znacznika, usuwając wartość var = parseInt ($ (this) .text (), 10);
$ (This) .empty (). Suwak ({
wartość: wartość,
Zakres: "min",
animowanie: prawda,
orientacji "pionowej"
});
});
});
</ Script>
</ Head>
<Body>
<P class = "ui-state-default ui-corner-all ui wspomagających clearfix" style = "padding: 4px;">
<Span class = "icon-ui ui-icon-volume-on" style = "float: left; margin: 5px 0 -2px 0;"> </ span>
Master Volume </ p>
<Div id = "master" style = "width: 260px; margin: 15px;"> </ div>
<P class = "ui-state-default ui-corner-all" style = "padding: 4px; margin-top: 4em;">
<Span class = "icon-ui ui-ikona sygnału" style = "pływać: left; margin: 5px 0 -2px 0;"> </ span>
Korektor graficzny </ 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>
zakres Suwak
Ustawienie range opcja jest prawdą, aby uzyskać zakres wartości z dwoma uchwytami przeciągania. Między manetki z innym kolorem tła wypełnić, aby wskazać wartość interwału jest opcjonalne.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - Zakres Suwak </ 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 ({
Zakres: prawda,
min: 0,
max: 500,
wartości: [75, 300]
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "-" $ + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "wartości", 0) +
"- $" + $ ( "# Slider-range") .slider ( "wartości", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> Przedział cenowy: </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range"> </ div>
</ Body>
</ Html>
Z ustalonego maksymalnego zakresu
Ustalające maksymalny zakres suwaka, użytkownik może wybrać minimum. Ustawianie range opcję "max".
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - zakres o ustalonej maksymalnej </ 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 ({
Zakres: "max",
min: 1
max: 10,
Wartość: 2,
slide: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Slider-range-max") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> Minimalna ilość pokoi: </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-max"> </ div>
</ Body>
</ Html>
Zakres z ustalonym minimum
Minimalny zakres ustalony suwak, użytkownik może wybrać maksymalnie. Ustawienie range opcja "min".
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - oferta z ustalonym minimum </ 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 ({
Zakres: "min",
Wartość: 37,
min: 1
max: 700,
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range-min") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> Maksymalna cena: </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range-min"> </ div>
</ Body>
</ Html>
Związany aby wybrać suwak
Jak powiązać suwak, aby wybrać istniejący element. Wybierz pozostaje widoczna w celu wykazania zmian. Kiedy wybór zmienia, zaktualizuj suwak.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - wiąże się wybrać suwak </ 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");
Suwak var = $ ( "<div id = 'slider'> </ div>") .insertAfter (select) .slider ({
min: 1
max: 6,
Zakres: "min",
wartość: wybierz [0] .selectedIndex + 1,
slide: function (event, ui) {
wybierz [0] .selectedIndex = ui.value - 1;
}
});
$ ( "#minbeds") .change (Function () {
slider.slider ( "wartość", this.selectedIndex + 1);
});
});
</ Script>
</ Head>
<Body>
<Form id = "rezerwacja">
<Label for = ""> minbeds minimalnej liczby łóżek </ 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>
suwak przewijania
Za pomocą suwaka można pracować zlokalizować zawartość strony. W tym przypadku, to jest w stanie uzyskać wartość paska przewijania.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - przesuń suwak </ 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-pane {overflow: auto; width: 99%; pływaka: left;}
.scroll-content {width: 2440px; pływaka: left;}
.scroll-content-item {width: 100px; height: 100px; pływaka: left; margin: 10px; font-size: 3em; line-height: x 96 pikseli; 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; height: 2em; margin: 0 auto;}
.scroll-bar-wrap .ui-handle-pomocnika-parent {position: relative; width: 100%; height: 100%; margin: 0 auto;}
.scroll-bar-wrap .ui-slider-handle {top: .2em; height: 1.5em;}
.scroll-bar-wrap .ui-slider-uchwyt .ui-ikona {margin: 0 auto -8px; position: relative; top: 50%;}
</ Style>
<Script>
$ (Function () {
// Przewiń panel Część var ScrollPane = $ ( ".scroll-okienko"),
scrollContent = $ ( ".scroll-content");
// Utworzenie suwak przewijania var = $ ( ".scroll-bar") .slider ({
slide: function (event, 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);
}
}
});
// Dołącz ikonę na przetwarzanie var handleHelper = scrollbar.find ( ".ui-suwak obsłudze")
.mousedown (function () {
scrollbar.width (handleHelper.width ());
})
.mouseup (function () {
scrollbar.width ( "100%");
})
.append ( "<span class = 'ui ui-icon-icon-grip-kropka-pionowe"> </ span> ")
.wrap ( "<div class = 'ui-handle-pomocnika-parent'> </ div>") .parent ();
// Od uchwyt suwaka przewijania, zmienić, aby ukryć część przelewową scrollPane.css ( "overflow", "hidden");
// W zależności od odległości przewijania jest określona przez stosunek wielkości paska przewijania i sizeScrollbar funkcji uchwytu () {
var reszta = scrollContent.width () - scrollPane.width ();
var = Pozostała część / scrollContent.width ();
var handleSize = scrollPane.width () - (proporcja * scrollPane.width ());
scrollbar.find ( "rękojeść .ui-slider") .css ({
Szerokość: handleSize,
"Margin-left": -handleSize / 2
});
handleHelper.width ( "") .width (scrollbar.width () - handleSize);
}
// Content-oparty pozycji przewijania zresetować wartość resetValue funkcji suwak () {
var reszta = scrollPane.width () - scrollContent.width ();
var leftVal = scrollContent.css ( "margin-left") === "auto" 0 ?:
parseInt (scrollContent.css ( "margin-left"));
var procentowa = Math.round (leftVal / Pozostała * 100);
scrollbar.slider ( "wartość", w procentach);
}
// Jeśli suwak jest w 100%, a wzrost okno, reflowContent function display () {
var seans = scrollContent.width () + parseInt (scrollContent.css ( "margin-left"), 10);
Szczelina var = scrollPane.width () - pokazuje;
if (odstęp> 0) {
scrollContent.css ( "margin-left", parseInt (scrollContent.css ( "margin-left"), 10) + GAP);
}
}
// Zmiana uchwytu gdy $ położenia okna powiększenia (okno) .resize (function () {
resetValue ();
sizeScrollbar ();
reflowContent ();
});
// Inicjalizacja setTimeout rozmiar przewijania (sizeScrollbar, 10); // safari Timeout});
</ Script>
</ Head>
<Body>
<Div class = "scroll-panel-ui ui widget widget-header-ui-corner-all">
<Div class = "scroll-content">
<Div class = "przewijania treści elementu UI-widget-header"> 1 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 2 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 3 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 4 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 5 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 6 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 7 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 8 </ div>
<Div class = "przewijania treści elementu UI-widget-header"> 9 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 10 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 11 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 12 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 13 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 14 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 15 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 16 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 17 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 18 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 19 </ div>
<Div class = "scroll-content-elementu UI-widget-header"> 20 </ div>
</ Div>
<Div class = "scroll-bar-wrap-ui ui widget-content-corner-bottom">
<Div class = "scroll bar"> </ div>
</ Div>
</ Div>
</ Body>
</ Html>
Wyrównaj przyrostu
Przez step opcja jest ustawiona na całkowitą suwaka, aby ustawić wartość przyrostu jest zwykle maksymalna suwak dzielnik. Domyślną wartością jest 1.
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - wyrównany przyrostowe </ 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 ({
wartość: 100,
min: 0,
max: 500,
krok: 50,
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.value);
}
});
$ ( "#amount") .val ( "$" + $ ( "#slider") .slider ( "Value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> Kwota darowizny (50 $ przyrosty): </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "Suwak"> </ div>
</ Body>
</ Html>
Zakres pionowy suwak
Zmiany zakresu kierunku prostopadłym do suwaka. Przez .height() przypisać wartość wysokości lub ustawić wysokość przez CSS i określonych orientation opcje dla "pionowej".
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - pionowy suwak Zakres </ 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 ({
orientacji "pionowej"
Zakres: prawda,
wartości: [17, 67]
slide: function (event, ui) {
$ ( "#amount") .val ( "$" + Ui.values [0] + "-" $ + ui.values [1]);
}
});
$ ( "#amount") .val ( "$" + $ ( "# Slider-range") .slider ( "wartości", 0) +
"- $" + $ ( "# Slider-range") .slider ( "wartości", 1));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> cele sprzedaży (w mln): </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-range" style = "height: 250px;"> </ div>
</ Body>
</ Html>
suwak w pionie
Zmień kierunek suwaka jest pionowa. Przez .height() przypisać wartość wysokości lub ustawić wysokość przez CSS i określonych orientation opcje dla "pionowej".
<! DOCTYPE html>
<Html lang = "pl">
<Head>
<Meta charset = "utf-8">
<Title> jQuery UI Slider (suwak) - suwak Vertical </ 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 () {
$ ( "# Suwak-pionowe") .slider ({
orientacji "pionowej"
Zakres: "min",
min: 0,
max: 100,
Wartość: 60,
slide: function (event, ui) {
$ ( "#amount") .val (Ui.value);
}
});
$ ( "#amount") .val ($ ( "# Suwak-pionowe") .slider ( "value"));
});
</ Script>
</ Head>
<Body>
<P>
<Label for = "ilość"> Głośność: </ label>
<Input type = "text" id = "ilość" style = "border: 0; color: # f6931f; font-weight: bold;">
</ P>
<Div id = "slider-pionowe" style = "height: 200px;"> </ div>
</ Body>
</ Html>