Najlepszy samouczek jQuery UI przykład - Slider (suwak) W 2024 r. W tym samouczku możesz dowiedzieć się Domyślną funkcją,color Picker,Szereg suwaków,zakres Suwak,Z ustalonego maksymalnego zakresu,Zakres z ustalonym minimum,Związany aby wybrać suwak,suwak przewijania,Wyrównaj przyrostu,Zakres pionowy suwak,suwak w pionie,
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) .
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>