I rezultat korištenja klizača u kodu:
Za rad s klizačem uvedeni su sljedeći atributi:
- max — najveća vrijednost elementa (odgovara krajnjem desnom položaju klizača). Broj.
- min — minimalna vrijednost elementa (odgovara krajnjem lijevom položaju klizača). Broj.
- korak — korak klizača. Broj.
Primjer korištenja atributa prikazan je u nastavku.
|
Osim toga, kao i kod bilo kojeg HTML elementa, vrsta unosa="range" možete primijeniti CSS stiliziranje.
Kako raditi s klizačem u JS-uBudući da je klizač ulazni element, možete koristiti svojstvo value za čitanje njegove vrijednosti. U sljedećem primjeru očitat ćemo vrijednost klizača i ispisati je u odlomak.
funkcija fun1() ( var rng=document.getElementById("r1"); //rng je ulaz var p=document.getElementById("one"); // p - paragraf p.innerHTML=rng.value; )
funkcija fun1() ( var rng = dokument. getElementById('r1"); //rng je ulaz var p = dokument. getElementById (& #x27;one"); // p - paragraf str. unutarnjiHTML = rng. vrijednost ; |
Primijetite novi oninput događaj. OnInput događaj - pokreće se kada dođe do bilo kakve promjene u elementu obrasca, na primjer kada se unese novi znak ili kada se klizač pomakne za 1px. Za razliku od događaja OnChange, koji se pokreće samo kada element izgubi fokus, oninput se pokreće kada postoji bilo kakva promjena u elementu. Ovaj događaj klizaču dodaje interaktivnost.
Događaj onchange također je koristan kada se koristi s odabranim elementom.
Praktičan zadatakZadatak 1. Zamijenite događaj OnInput u prikazanom primjeru događajem onchange. Proučite kako se promijenilo ponašanje elemenata. Kada se ažurira značenje u odlomku?
Zadatak 2. Postavite klizač na minimalnu vrijednost od 50 i maksimalnu vrijednost od 150. Proučite koje su minimalne i maksimalne vrijednosti prikazane u odlomku?
Zadatak 3. Postavite korak klizača na 10. Kako se vrijednosti mijenjaju u paragrafu?
Zadatak 4. Postavite korak promjene vrijednosti na 7. Kako promijeniti maksimalnu i minimalnu vrijednost?
Nastavljamo raditi s klizačem rasponaPažnja! Vrijednosti očitane iz svojstva value su niz. Ne zaboravite ih pretvoriti u brojeve pomoću funkcije parseInt(vaš niz).
Riješimo jednostavan problem: prikaži vrijednost klizača u unosu. Da biste to učinili, trebate prenijeti vrijednost svojstva slider.value u svojstvo input.value. Primjer je prikazan u nastavku:
funkcija fun1() ( var rng=document.getElementById("r1"); //rng je klizač var i1=document.getElementById("i1"); // i1 - unos i1.value=rng.value; )
Praktičan zadatakZadatak 5. Proučite rad gornjeg primjera. Dodajte događaj oninput="fun2()" u input type="text". Za funkciju fun2 program inverzni problem— one vrijednosti koje se unose automatski se dodjeljuju klizaču.
Kako bismo ga osigurali, učinimo još jedan zadatak: pomoću klizača promijenimo veličinu div blok. Izgled zadatka prikazan je u nastavku:
Klizač je dizajniran za unos brojeva navedeni raspon, ali za razliku od polja ima drugačije sučelje i koristi se u slučajevima kada nije posebno važno za označavanje točna vrijednost. Na sl. 1 prikazuje izgled klizača u različitim preglednicima.
Riža. 1. Prikaz klizača u preglednicima
Sintaksa za stvaranje klizača je sljedeća.
Ovdje je min najmanji broj u rasponu (zadano 0), max je maksimalni broj (zadano 100), korak je korak promjene brojeva (zadano 1), vrijednost je trenutna vrijednost. Prema zadanim postavkama, vrijednost se izračunava pomoću formule:
Ako je vrijednost max manja od vrijednosti min, tada je vrijednost jednaka min.
Atributi su izborni, mogu se izostaviti, u kojem slučaju preuzimaju zadane vrijednosti.
Bez obzira na minimum i najveći brojŠirina klizača ostaje ista.
Sami klizači rijetko se koriste u svom "čistom" obliku, jer ne pružaju potrebno povratna informacija s korisnikom, ali u kombinaciji s JavaScriptom postaje moćan i praktičan element sučelja. U primjeru 1, klizač se koristi za promjenu veličine slike;
Primjer 1: Korištenje klizača
HTML5 IE 10 Cr Op Sa Fx
Funkcija klizača sizePic() ( veličina = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Veličina uzorka:
U u ovom primjeru Kada se upravlja klizačem, pokreće se oninput događaj koji poziva funkciju sizePic. Ova funkcija mijenja veličinu slike ovisno o instaliran korisnik vrijednosti klizača. Dakle, širina slike, po želji, smanjuje se ili, obrnuto, povećava. Rezultat primjera pri ekstremnoj vrijednosti klizača u Chrome preglednik prikazano na sl. 2.
Riža. 2. Kontrolirajte širinu slike pomoću klizača
Starije verzije preglednika koje ne podržavaju raspon za atribut tipa, prikažite polje obrasca kao tekstualno polje.
Pozdrav svima, odlučila sam napisati članak o tome kako stilizirati html element 5 unosa s vrstom raspona, neka vrsta klizača, praktičan i moderan, također ću vam pokazati kako raditi s njim putem JavaScripta JQuery primjer. Želim odmah reći da praktički nema problema sa stiliziranjem, ali ako s njim trebate izvršiti i neke radnje, postoje zamke o kojima ću govoriti u nastavku. Postoje neka rješenja, ali čim budu osnovna rješenja, svakako ću dodati članak Idemo.
raspon vrste unosa htmlZa početak, samo da napišemo html kod, dodat ću dva ulaza s vrstom raspona, jedan će biti prikazan kao izvorni prikaz u pregledniku, a drugi ćemo promijeniti i odmah mu dati klasu raspona:
Već sam napravio datoteku za pisanje JS koda, datoteku sa stilskim listovima i povezao jQuery biblioteka Oba ulaza imaju iste maksimalne i minimalne vrijednosti, a također postavljaju početnu vrijednost na 25
Otvorite datoteku sa stilovima i odmah postavite stilove za html, tijelo i blok s wrp klasom:
Postavimo stilove za normalni preglednici poput kroma, ovdje naravno ovisi o svima. Postavimo stilove za klasu.range:.
Dakle, čini se da smo poništili standardne stilove i možete sigurno napisati svoje vlastite stilove za samu liniju staze.
Nema tu ničeg nadnaravnog, pa svatko pravi svoju vrstu staze kako želi. Postavimo sada stilove za klizač, ono što povlačimo ili pomičemo kao u playeru. Da biste postavili stilove za klizač, trebate dodati pseudoelement ::-webkit-slider-thumb i također resetirati stilove. a zatim učinimo kako trebamo
Sve je također jasno i jednostavno, jedino tko možda ne zna za ovo drugo prijelazno svojstvo, ovo je postavljanje animiranog prijelaza između stanja, to jest, imat ću pseudo-klasu :hover , i tako da postoji gladak prijelaz Dodao sam ovo svojstvo. Dodajmo:hover, ali i:active
Sve je također jednostavno i glatko. Ako ga otvorimo u Chromeu ili Yandex pregledniku, na primjer, onda sve izgleda kako treba. Za druge preglednike, na svim mjestima zajedno dodajemo webkit koji nam je potreban, to jest:
- za Mozilla moz,
- za operu o,
- za IE ms, ali o InternetExploreru ćemo kasnije. Imajte na umu da će se stilovi za svaki preglednik morati ponoviti, inače ako kombinirate i pišete pseudoelemente odvojene zarezima, neće raditi. U nastavku ću pokazati koji je pseudoelement za koga
Iskreno, ne znam kako se točno zove, ali ovo je traka koja prati naš klizač kada ga povlačimo ili pomičemo, može biti traka učitavanja, traka procesa, traka napretka, ne znam neka vrsta indikator općenito, ali mislim da razumijete o čemu pričamo, jer smo na istoj valnoj duljini, ako je na slici ispod plavo: D Dakle, da biste ga napravili trebate pozadinsko svojstvo ili background-image tko to radi
Za Firefox preglednik Koristimo moz umjesto webkita. Označio sam podebljano ona mjesta gdje mijenjamo vrijednosti tako da se traka pomiče zajedno s vrijednošću samog unosa. Ako se sada pomaknemo, traka se neće pomaknuti, o tome ćemo kasnije
Kao što sam obećao, pišem popis stilova koji su prikladni za koji preglednik
Ovo je prikladno za Chrome, Yandex, Operu i Safari:
Mozilla, malo je drugačiji, ali još uvijek jednostavan
Ovdje je potpuno drugačije, poludjet ćete s ovim preglednicima općenito, IE dijeli naš unos na tri dijela, pa evo pravila:
Osobno ga nisam testirao na IE-u, jer mi se nakon instaliranja srušio Windows i nisam to ponovio, ispravit ću to ovdje kad naučim nešto novo =)
ulazni raspon JQueryOvo sam već napisao gore, to je ono što mi koristimo
Shema je sljedeća: ako instaliramo rukovatelj događajem “change” i koristimo ga za primanje vrijednosti unosa, a zatim promijenimo css svojstva, radit će ovako: pomaknite klizač i otpustite tipku miša, tada će se linija pomaknuti.
I to je logično, ali ne baš lijepo, pa predlažem drugo rješenje
Otvorite datoteku script.js ili upišite u sam html, nije bitno, i napišite ovu funkciju:
Sve je jednostavno, radimo istu stvar tijekom događaja promjene, dobivamo vrijednost i mijenjamo stilove na pravim mjestima, samo imajte na umu da bi vrijednosti trebale biti u postocima, budući da moj unos varira od 0 do 100 , ništa ne računam, ali da je npr. od 0 do 120, tada bih dobivenu vrijednost propustio kroz formulu (val*100)/120, odnosno dobio bih postotak broja . Mislim da je ovo jasno, da bi ovo konačno radilo, morate to naznačiti u oninput događaju elementa input this funkcija:
To je sve, sada će uspjeti
E, sad bubrežni kamenac o kojem sam govorio na početku
Ono što danas znam je da ova značajka neće raditi u Mozilli. Zašto neće?
Odgovor je jednostavan i leži na površini, budući da za Mozillu možemo mijenjati stilove samo pomoću pseudo-elementa, ali za JavaScript pseudo-elementi ne postoje u DOM-u, tako da ne možemo raditi s njim. Ako je postojao jednokratni zadatak, na primjer samo mijenjanje boje, mogli bismo jednostavno upotrijebiti drugu klasu, ali u u ovom slučaju Dečki, još nisam ništa pronašao niti smislio, ako netko zna, napišite =)
Zaključak U principu, to je sve, ali čim stigne kočija s dodatnom porcijom, sigurno ću je dodati u članak. Hvala svima, bok =)
Kada dizajnirate trgovinu, često se morate nositi sa zadatkom implementacije izbora prilagođenih korisniku. raspon cijena. To bi moglo izgledati ovako, na primjer:
Ideja je, nadam se, jasna. Povlačimo klizače, vrijednosti polja se mijenjaju sinkrono. Pokušajmo ovo implementirati.
ZadatakPronaći cross-browser rješenje u js za sučelje odabira raspona. Zahtjevi:
- ulazi i klizači su povezani (promjene vrijednosti jednog odmah se odražavaju na druge);
- fleksibilnost stila (sve bi trebalo izgledati kao dizajn).
Koristit ćemo se jQuery dodatak UI klizač. Sam po sebi jednostavno stvara klizač, ali uparivanje s ulazima nije teško.
Testirano u:
- IE 6-8
- Firefox 4
- Opera 11
- Safari
- Krom
Dakle, prvo zamislimo da nema unosa i pogledajmo kako sam dodatak radi.
Što preuzeti?- (24.33 Kb) Jezgra korisničkog sučelja + sam klizač.
Povezivanje knjižnica:
Inicijaliziramo klizač skriptom:
jQuery("#slider").slider(( min: 0, max: 1000, vrijednosti:, raspon: istina));
A sada detaljnijeDodatak je prilično fleksibilan. Omogućuje stvaranje okomitih ili vodoravnih staza po kojima se mogu kretati jedan ili dva klizača. Opcija s dva klizača idealna je za naš zadatak - odabir raspona.
Kada pomaknete klizač ili ga zaustavite, možete izvršiti neku funkciju, zahvaljujući kojoj se klizač može koristiti kao kontrolni element (promijeniti vrijednosti ulaza, odabrati ili, na primjer, prebaciti kartice - postoji takav demo primjer na službenoj web stranici dodatka).
postavkePrilikom pokretanja dodatka možete postaviti njegove parametre:
| Onemogućuje (true) ili omogućuje (false) klizač. | Booleov | lažno |
| Određuje hoće li se klizač glatko pomaknuti do točke kada korisnik klikne na točku na traci. Također može uzeti niz vrijednosti koji predstavlja jednu od tri brzine koje možete izabrati ("sporo", "normalno" ili "brzo") ili broj milisekundi koji definira trajanje animacije (na primjer, 1000). | booleov, niz, int | lažno |
| Maksimalna vrijednost klizač. | Broj | 100 |
| Minimalna vrijednost klizač. | Broj | 0 |
| Određuje orijentaciju ljestvice: slijeva nadesno ili odozdo prema gore. Moguće vrijednosti: "horizontalno", "vertikalno". | Niz | horizontalna |
| Ako se postavi na true, klizač će imati dva klizača i raspon između njih koji se može stilizirati. Druge dvije vrijednosti su "min" i "max". Vrijednost "min" stvara raspon od minimuma ljestvice do klizača. Vrijednost "max" stvara raspon od klizača do maksimuma ljestvice. | booleov, niz | lažno |
| Definira korak klizača. Cijeli asortiman Ljestvica (max − min) treba ravnomjerno podijeliti na korak. | Broj | 1 |
| Određuje vrijednost klizača ako postoji samo jedan klizač. Ako postoji više od jednog klizača, određuje vrijednost prvog klizača. | Broj | 0 |
| Ova se opcija može koristiti za određivanje više klizača. Ako je raspon istinit, trebale bi postojati 2 vrijednosti "vrijednosti". | Niz | ništavan |
Događaji su funkcije koje će se izvršiti u određene trenutke klizačev život. Možete ih postaviti tijekom inicijalizacije. Na primjer:
JQuery("#slider").slider(( stop: function(event, ui) ( alert("Klizač se pomaknuo na novi položaj!"); ) ));
Popis događaja:
| Događaj se događa kada se kreira klizač |
| Događaj se događa kada korisnik počne pomicati klizač. |
| Događaj se događa kad god se miš pomakne tijekom pomicanja. Koristite ui.value (klizači s jednim klizačem) za dobivanje trenutne vrijednosti klizača, $(..).slider("vrijednost", indeks) za dobivanje vrijednosti klizača za klizače s više klizača. |
| Događaj se događa kada se pomicanje zaustavi ili ako se promijeni vrijednost programski(putem metode vrijednosti). Uzima argumente događaja i korisničkog sučelja. Koristite event.orginalEvent da odredite je li vrijednost promijenjena mišem, tipkovnicom ili programski. Koristite ui.value (klizači s jednim klizačem) za dobivanje trenutne vrijednosti klizača, $(this).slider("vrijednosti", indeks) za dobivanje vrijednosti klizača za klizače s više klizača. |
| Događaj se događa kada korisnik završi s pomicanjem klizača. |
Pozivanje ovih funkcija omogućuje vam da utječete na rad klizača promjenom njegovih parametara u hodu. To se radi pomoću konstrukcije .slider(), na primjer ovako:
JQuery("#slider").klizač("vrijednosti",0, 100);
Popis metoda:
| Uklanja funkcionalnost klizača, vraćajući element u izvorno stanje. |
| Onemogućuje klizač. |
| Uključuje klizač. |
| Dobiva ili postavlja bilo koju opciju klizača. Ako vrijednost nije navedena, djelovat će kao primatelj. Sintaksa: .slider("opcija", nazivopcije, ) |
| Postavlja više opcija klizača odjednom pružajući opcije objekta. Sintaksa: .slider("opcija", opcije) |
| Vraća element .ui-slider. |
| Postavlja ili vraća vrijednost klizača. Za klizače s jednim klizačem. |
| Postavlja ili vraća vrijednost klizača. Za klizače s više klizača ili s rasponom. |
Zapravo stilizacija jQuery elementi UI (jedno od njih je ovaj klizač) pojavljuje se odabirom teme koja vam se sviđa i preuzimanjem gotovog CSS-a sa službene web stranice. Osobno nisam nimalo zadovoljan ovakvim pristupom. Pa sam odabrao samo njihov (vrlo suvišan ako koristite samo klizač) CSS potreban kod, koju ovdje predstavljam s komentarima.
/* Širina klizača */ #slider ( width: 200px; ) /* Spremnik klizača */ .ui-slider ( pozicija: relativna; ) /* Klizač */ .ui-slider .ui-slider-handle ( pozicija: apsolutna; z-index: 2; /* Postavite željenu širinu */ visinu: /* i visinu: url(../img/slider.png) /* slika koja prikazuje Ili ga možete ispuniti bojom, postaviti obrub i ispune */ kursor: pokazivač ) .ui-klizač .ui-klizač-raspon ( položaj: apsolutni; z-indeks: 1; veličina fonta: .7em; prikaz : block; border: 0 ; overflow: hidden; ) /* horizontalni klizač (sama traka po kojoj se kreće klizač) */ .ui-slider-horizontal ( visina: 3px; /* postavite visinu prema dizajnu */ ) /* namjestite klizače */ .ui-slider -horizontal .ui-slider-handle ( top: -5px; margin-left: -6px; ) .ui-slider-horizontal .ui-slider-range ( top: 0 ; visina: 100%; .ui-slider- horizontal .ui-slider-range-min ( lijevo: 0; ) .ui-slider-range-max ( desno: 0; ) /* dizajn trake duž koje se pomiče klizač */ .ui-widget- content ( border: 1px solid #D4D4D4;
pozadina: #fff; ) /* dizajn aktivnog područja (između dva klizača) */ .ui-widget-header ( border: 1px solid #D4D4D4; background: #f00; ) /* zaokruživanje za traku klizača */ .ui-corner-all ( -moz -border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px)
Neka od ovih pravila mogu se kombinirati, budući da dodatak velikodušno nagrađuje elemente s više klasa. Na primjer, moj original
pretvara u
No radije sam ostavio stilove kakvi jesu radi veće svestranosti. Mislim da će mi biti zahvalan onaj tko bude stilizirao okomiti klizač pomoću ovog predloška.Dodavanje povezanih ulaza
Sada dolazi zabavni dio. Dodajmo dva ulaza u kojima ćemo prikazati vrijednosti odabrane na klizaču.
Prilikom inicijalizacije klizača koristimo se događajima zaustavljanja i klizanja - prvi će dati ispravnu vrijednost kada se klizač zaustavi, a drugi će dodati interaktivnost (ulazna vrijednost će se mijenjati u stvarnom vremenu, sinkrono s kretanjem klizača).
JQuery("#slider").slider(( min: 0, max: 1000, values: , range: true, stop: function(event, ui) ( jQuery("input#minCost").val(jQuery("# klizač").klizač("vrijednosti",0)); jQuery("input#maxCost").val(jQuery("#klizač").klizač("vrijednosti",1)); ), slajd: funkcija(događaj , ui)( jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider" ).klizač("vrijednosti",1));
Ostaje samo organizirati povratne informacije. Učimo klizač da se pomiče ako korisnik unese vrijednost u unos. Ovdje možemo koristiti događaj pritiska tipke tako da klizač reagira na svaku pritisnutu tipku ili događaj promjene ako želimo da promjena stupi na snagu nakon završetka unosa i napuštanja polja. Stvar ukusa.
Istovremeno sam ubacio provjeru da je gornja vrijednost izvan raspona (kod mene je 1000) i provjeru da donji klizač ne dobije vrijednost veću od gornje:
JQuery("input#minCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if( parseInt (vrijednost1) > parseInt(vrijednost2))( vrijednost1 = vrijednost2; jQuery("input#minCost").val(value1); ) jQuery("#slider").klizač("vrijednosti",0,vrijednost1 )) ; jQuery("input#maxCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if ( vrijednost2 > 1000) ( vrijednost2 = 1000; jQuery("input#maxCost").val(1000)) if(parseInt(value1) > parseInt(value2))( value2 = value1; jQuery("input#maxCost").val (vrijednost2) jQuery("#klizač").klizač("vrijednosti",1,vrijednost2 ));
Zadnji detalj je osigurati da korisnik ne može pokvariti dodatak unošenjem slova ili netočnih slova u unose numeričke vrijednosti. Ovu točku neću detaljno razmatrati jer se izravno ne odnosi na temu članka. Upućujem znatiželjnike gdje se to, naravno, provodi.
U jednoj od sljedećih publikacija zakomplicirat ćemo zadatak. Pokazat ću kako na temelju ovog rješenja možete odabrati vrijednost s neravnomjernim korakom i različite ljestvice. Odnosno, kada je potrebno da npr. prva polovica klizača ima raspon vrijednosti od 0 do 100, a druga od 100 do 1000.
Takve se opcije često nalaze u internetskim trgovinama - to je prikladno, jer je za male količine važnija prilagodba, a pogodnost korisnika, kao što znate, na prvom je mjestu.
