Glisor vertical în html. Și acum mai detaliat
Glisorul este conceput pentru a introduce numere într-un interval specificat, dar, spre deosebire de câmp, are o interfață diferită și este utilizat în cazurile în care nu este deosebit de important să indicați valoarea exacta. Browserele afișează aspectul glisorului în felul lor, ca în Fig. Figura 1 demonstrează vizualizarea glisorului în Chrome.
Orez. 1. Vizualizare slider
Sintaxa pentru crearea unui glisor este următoarea.
Aici min este numărul minim din interval (implicit 0), max este numărul maxim (implicit 100), pasul este pasul de schimbare a numerelor (implicit 1), valoarea este valoarea curentă. În mod implicit, valoarea este calculată folosind formula:
Dacă valoarea lui max este mai mică decât valoarea lui min, atunci valoarea este egală cu min.
Atributele sunt optionale, pot fi omise, caz in care iau valori implicite. Indiferent de cifrele minime și maxime, lățimea glisorului rămâne aceeași.
Glisoarele în sine sunt rareori folosite în forma lor „pură”, deoarece nu oferă necesarul feedback cu utilizatorul, dar în combinație cu JavaScript devine un element de interfață puternic și convenabil. În exemplul 1, glisorul modifică dimensiunea imaginii, această caracteristică este adesea folosită în diferite galerii foto.
Exemplul 1: Utilizarea unui glisor
Funcția slider sizePic() ( dimensiune = document.getElementById("dimensiune").value; img = document.getElementById("pic"); img.width = 60 + 20*size; )
Dimensiunea modelului:
ÎN în acest exemplu când este controlat de glisor, funcționează eveniment la schimbare care apelează funcția sizePic. Această funcție redimensionează imaginea în funcție de instalat de utilizator valorile cursorului. Astfel, lățimea imaginii, dacă se dorește, scade sau, dimpotrivă, crește. Rezultatul exemplului din browserul IE este prezentat în Fig. 2.
În prezent lucrez la primul meu proiect plătit. Printre altele, acest proiect îmi cere să stil și să scriu scripturi pentru glisoare. Sunt mai multe momente interesante pe care aș dori să vă aduc în atenție, cum ar fi problemele de afișare în IE, Android WebKit și utilizarea corectă introducerea și modificarea evenimentelor. Și de asemenea scurtă prezentare generală sintaxă.
Iată exemplul meu. În acest caz particular, utilizatorilor olandezi li se cere să folosească glisoare pentru a împărți 100 de milioane de euro din fonduri bugetare între mai multe departamente. În acest caz, valoarea totală a tuturor glisoarelor nu trebuie să depășească 100 (milioane), ceea ce necesită scrierea unui script mic.
Slider, track și sliderIată glisorul. Din punct de vedere tehnic, este cunoscut ca și nu este acceptat de IE9 și de mai jos.
Iată codul HTML:
Un glisor constă dintr-o cale de-a lungul căreia utilizatorul trage glisorul. Puteți aplica stiluri pistei și glisorului, dar nu și scripturilor.
Bazele stiluluiStilizarea glisoarelor nu este atât de dificilă. Glisorul și pista pot fi stilate, deși pseudo-elementele necesare variază în funcție de browser:
Pentru glisor, utilizați -webkit-slider-thumb , -moz-range-thumb sau -ms-thumb .
Piesa poate fi „accesată” folosind -webkit-slider-runnable-track , -moz-range-track sau -ms-track .
Nu puteți combina acești selectori într-o singură regulă, deși este mai corect să folosiți aceleași stiluri pentru toate browserele (cu excepția indentării pentru glisor). Dacă browserul găsește un selector pe care nu îl recunoaște, îi ignoră pe toate celelalte. Deci, va trebui să repetați sau să utilizați un generator CSS pe partea de server.
IE și MS Edge necesită culoare transparentă și culoarea marginilor pe pistă, sau vor afișa stilurile implicite ale pistelor. De asemenea, necesită o umplutură diferită pentru glisor față de alte browsere.
În exemplul meu, înălțimea glisorului este de aproximativ 40 de pixeli. Se dovedește că stilurile de glisare principale au overflow: set de proprietăți ascunse, care ascunde cea mai mare parte a glisorului în Edge și IE. Pentru a remedia acest lucru, a trebuit să setez în mod explicit înălțimea glisorului.
În IE, dar nu în Edge, glisorul este indentat. Așa că întreabă căptușeală:0 si scuteste-te de o durere de cap.
Am citit de mai multe ori că MS Edge ar trebui să accepte proprietățile -webkit-. Dar, în practică, s-a dovedit că este imposibil să lucrați cu un set de stiluri atât pentru Edge, cât și pentru WebKit/Blink. Recomand să folosiți stiluri -ms- separate, fie și doar pentru că sunt necesare pentru IE10 și IE11. Cel mai bine este să definiți stilurile -ms- după -webkit-: în acest fel stilurile -ms- vor fi executate exact în Edge.
În browserele construite pe motoarele WebKit și Blink, glisorul este implicit la box-sizing: border-box , în timp ce în toate celelalte browsere, valoarea acestei proprietăți este content-box . Este mai bine să setați în mod explicit dimensiunea casetei pentru glisor.
WebKit și Blink necesită, de asemenea, -webkit-appearance: none , dar cu o singură excepție. Vezi mai jos.
șablon CSSToate aceste probleme minore au ca rezultat următorul șablon CSS:
input ( -webkit-appearance: niciunul; înălțime: 35px; /* setați-vă înălțimea */ padding: 0; /* stilează glisorul dvs. */ ) input::-webkit-slider-thumb ( -webkit-appearance: niciunul; casetă -sizing: content-box /* stilează cursorul dvs. */ ) input::-moz-range-thumb ( /* stilează din nou cursorul dvs. */ ) input::-ms-thumb ( /* ar trebui să vină după -webkit-; */ /* stilează din nou glisorul dvs. */ /* poate avea nevoie de o umplutură diferită */ ) input::-webkit-slider-runnable-track ( /* vă stilează melodia */ ) input::-moz-range-track ( / * stilează din nou melodia */ ) input::-ms-track ( /* ar trebui să vină după -webkit- */ border-color: transparent; culoare: transparent; /* stilează din nou melodia */ )
proprietatea aspectului și Eroare Android WebKitUn alt dezavantaj al browserelor bazate pe WebKit și Blink este că trebuie să setați proprietatea -webkit-appearance: none atât pe glisor, cât și pe glisor (dar nu și pe pistă). Acest lucru este arătat în șablon CSS dat mai sus.
Adevărata problemă este că Android WebKit vă cere să nu utilizați această declarație. Dacă adăugați -webkit-appearance: none , Android WebKit nu va reda corect stilurile dvs. Eliminarea acestui cod remediază eroarea, dar stilurile de glisare nu vor fi redate în Safari, Chrome și alte browsere. Să rezolvăm împreună această problemă.
Am stabilit -webkit-appearance: niciunul în CSS, aceasta este singura soluție care are viitor. În Android WebKit dorim să schimbăm valoarea la glisor-orizontal. Dar de unde știm că suntem în Android WebKit?
Recunoaștere browser? Acest lucru nu este obișnuit în cercurile noastre - ceea ce este cel mai bine: nu ar funcționa în Xiaomi Chromium 34 (sau 35), care se bazează pe Chromium și, prin urmare, necesită valoarea none, dar în același timp „mascarade” ca Android.
Planul meu inițial a fost să accesez stilurile de glisare și să văd dacă se potriveau cu ale mele. Dacă nu se potrivesc, atunci folosim slider-horizontal :
window.getComputedStyle(slider,"::-webkit-slider-thumb").height;
Se pare că această abordare generează întotdeauna stilurile implicite, nu CSS-ul tău. Vorbind în schiță generală, scripturile care încearcă să facă ceva cu o pistă sau un glisor tind să nu funcționeze.
Apoi am văzut că această utilizare a getComputedStyle() nu este acceptată în Android WebKit. Nu sunt returnate stiluri, nici măcar stiluri implicite.
Așa că am scris un truc clasic care folosește un bug pentru a scăpa de altul fără legătură. Din fericire, acesta este un truc sigur, deoarece ambele erori pot apărea numai în Android WebKit, iar acel browser nu mai este în dezvoltare:
var testAndWK = window.getComputedStyle(slider,"::-webkit-slider-thumb").height; dacă (!testAndWK) ( slider.style.WebkitAppearance = „slider-orizontal”; )
Puteți rula testul o dată și puteți utiliza rezultatele pentru fiecare glisor. Indiferent de proprietatea CSS pe care o testați, verificați dacă există cu adevărat. Dacă nu este returnată nicio valoare, atunci setați -webkit-appearance: slider-horizontal pentru fiecare glisor. Problema rezolvata. Și mai bine, alte browsere ne ignoră în timp ce folosim -webkit- .
Umplerea barei de progresÎn exemplul meu, pista din stânga glisorului ar trebui să aibă o culoare de fundal diferită de cea din dreapta. IE/Edge și Firefox sugerează utilizarea pseudo-elementelor pentru aceasta, WebKit și Blink nu. Acest cod rezolvă problema în toate versiunile de IE, Firefox și Edge:
input::-ms-fill-lower ( culoare de fundal: #5082e0; ) input::-moz-range-progress (culoare de fundal: #5082e0; )
În ceea ce privește browserele bazate pe WebKit și Blink, este nevoie de o soluție cu JavaScript. Pe al meu l-am împrumutat din exemplele Ana Tudor. Această soluție folosește gradient liniar cu o culoare de oprire calculată din valoarea glisorului curent. Priviți scriptul, în special codul funcției handleSlider().
Sfaturi instrumenteAna Tudor a arătat, de asemenea, cum pseudo-elementul :before poate fi folosit ca un tooltip cu stil care conține valoarea curentă. Din păcate, se dovedește că IE/Edge și Firefox nu acceptă :before sau :after în acest caz. IE/Edge are un tooltip încorporat (vezi mai jos), dar Firefox nu poate afișa tooltips.
Am încercat un element în mișcare care reacționează la mișcarea glisorului, dar scrierea scripturilor nu funcționează și este imposibil să obții coordonatele curente ale glisorului. De asemenea, am încercat să folosesc valoarea glisorului curent în loc de coordonate, dar încercarea a eșuat. În cele din urmă, am decis să folosim un tooltip static (care de fapt nu arată ca un tooltip).
IE/Edge are un tooltip încorporat care, în cea mai mare parte, nu poate fi stilizat. Din fericire, o poți ascunde:
input::-ms-tooltip (afișare: niciunul; )
Introducerea și modificarea evenimentelorPe măsură ce utilizatorul mișcă glisorul de-a lungul pistei, glisorul poate declanșa evenimente de intrare sau modifica. Unele browsere „produc” continuu evenimente în timpul mișcării, altele numai după ce mișcarea s-a oprit.
Când urmăriți acțiunile utilizatorului cu un glisor, interceptați intrarea și modificați evenimentele. Apoi apelați handlerul de evenimente când utilizatorul încetează să miște glisorul. Acest lucru oferă rezultate stabile în toate browserele.
Atunci când proiectați un magazin, de multe ori trebuie să vă confruntați cu sarcina de a implementa o alegere ușor de utilizat a intervalului de preț. Ar putea arăta astfel, de exemplu:
Ideea, sper, este clară. Tragem glisoarele, valorile câmpului se schimbă sincron. Să încercăm să punem în aplicare acest lucru.
SarcinăGăsiți o soluție js între browsere pentru interfața de selecție a gamei. Cerințe:
- intrările și glisoarele sunt conectate (modificările valorii unuia se reflectă imediat în altele);
- flexibilitatea stilului (totul ar trebui să arate ca designul).
Vom folosi plugin jQuery Slider UI. În sine, pur și simplu creează un glisor, dar asocierea acestuia cu intrări nu este dificilă.
Testat în:
- IE 6-8
- Firefox 4
- Opera 11
- Safari
- Chrome
Deci, mai întâi să ne imaginăm că nu există intrări și să vedem cum funcționează pluginul în sine.
Ce să descărcați?- (24,33 Kb) UI core + slider în sine.
Conectarea bibliotecilor:
Inițializam glisorul cu un script:
jQuery("#slider").slider(( min: 0, max: 1000, valori: , interval: true ));
Și acum mai detaliatPlugin-ul este destul de flexibil. Vă permite să creați piste verticale sau orizontale de-a lungul cărora se pot mișca unul sau două glisoare. Opțiunea cu două glisoare este ideală pentru sarcina noastră - alegerea unei game.
Când mutați glisorul sau îl opriți, puteți efectua o funcție, datorită căreia glisorul poate fi folosit ca element de control (schimbați valorile intrărilor, selectărilor sau, de exemplu, comutați filele - există o astfel de exemplu demo pe site-ul oficial al pluginului).
SetăriCând inițializați pluginul, puteți seta parametrii acestuia:
| Dezactivează (adevărat) sau activează (fals) glisorul. | boolean | fals |
| Stabilește dacă glisorul se va deplasa fără probleme la un punct atunci când utilizatorul face clic pe un punct de pe bandă. De asemenea, poate lua șirul de valori care reprezintă una dintre cele trei viteze din care să aleagă ("lent", "normal" sau "rapid") sau un număr de milisecunde care definește durata animației (de exemplu, 1000). | boolean, șir, int | fals |
| Valoarea maximă a glisorului. | Număr | 100 |
| Valoarea glisorului minim. | Număr | 0 |
| Determină orientarea scalei: de la stânga la dreapta sau de jos în sus. Valori posibile: „orizontal”, „vertical”. | Şir | orizontală |
| Dacă este setat la adevărat, glisorul va avea două glisoare și un interval între ele care poate fi stilat. Celelalte două valori sunt „min” și „max”. Valoarea „min” creează un interval de la minimul scalei la glisor. Valoarea „max” creează un interval de la glisor la maximul scalei. | boolean, șir | fals |
| Definește pasul cursorului. Gama completă (max - min) trebuie împărțită uniform în trepte. | Număr | 1 |
| Determină valoarea glisorului dacă există un singur glisor. Dacă există mai mult de un glisor, determină valoarea primului glisor. | Număr | 0 |
| Această opțiune poate fi utilizată pentru a specifica mai multe glisoare. Dacă intervalul este adevărat, ar trebui să existe 2 valori „valori”. | Matrice | nul |
Evenimentele sunt funcții care vor fi executate în anumite momente din viața glisorului. Le puteți seta în timpul inițializării. De exemplu:
JQuery("#slider").slider(( stop: function(event, ui) ( alert("Sliderul sa mutat intr-o noua pozitie!"); ) ));
Lista evenimentelor:
| Evenimentul are loc atunci când glisorul este creat |
| Evenimentul are loc atunci când utilizatorul începe să miște cursorul. |
| Evenimentul are loc ori de câte ori mouse-ul este mutat în timpul derulării. Folosiți ui.value (glisoare cu un singur glisor) pentru a obține valoarea curentă a glisoarelor, $(..).slider(„valoare”, index) pentru a obține valoarea glisoarelor pentru glisoarele cu mai multe glisare. |
| Evenimentul are loc atunci când defilarea se oprește sau dacă valoarea se modifică în mod programatic(prin metoda valorii). Preia argumente eveniment și ui. Utilizați event.orginalEvent pentru a determina dacă valoarea a fost modificată de mouse, tastatură sau programatic. Folosiți ui.value (glisori cu un glisor) pentru a obține valoarea curentă a glisorului, $(this).slider ("valori", index) pentru a obține valoarea glisorului pentru glisoare cu mai multe glisoare. |
| Evenimentul are loc când utilizatorul a terminat de mișcat cursorul. |
Apelarea acestor funcții vă permite să influențați funcționarea glisorului prin modificarea parametrilor acestuia din mers. Acest lucru se face folosind constructia .slider(), de exemplu astfel:
JQuery("#slider").slider("valori",0, 100);
Lista metodelor:
| Elimină funcționalitatea glisorului, readucerea elementului la starea inițială. |
| Dezactivează glisorul. |
| Include un glisor. |
| Obține sau setează orice opțiune de glisare. Dacă nu este specificată nicio valoare, va acționa ca destinatar. Sintaxă: .slider(„opțiune”, opțiuneNume, ) |
| Setează mai multe opțiuni de glisare simultan, oferind opțiuni pentru obiect. Sintaxă: .slider(„opțiune”, opțiuni) |
| Returnează elementul .ui-slider. |
| Setează sau returnează valoarea glisorului. Pentru glisoare cu un singur cursor. |
| Setează sau returnează valoarea glisorului. Pentru glisoare cu glisoare multiple sau cu un interval. |
De fapt stilizare elemente jQuery Interfața de utilizare (dintre care unul este acest glisor) are loc prin selectarea temei care vă place și descărcarea CSS gata făcută de pe site-ul oficial. Personal, nu sunt deloc mulțumit de această abordare. Așa că am ales dintre CSS-ul lor (foarte redundant dacă utilizați doar glisorul). codul necesar, pe care o prezint aici cu comentarii.
/* Slider width */ #slider ( width: 200px; ) /* Slider container */ .ui-slider ( poziție: relativ; ) /* Slider */ .ui-slider .ui-slider-handle ( poziția: absolut; z-index: 2; lățime: 13px /* Setați lățimea dorită */ înălțimea */ background: url(../img/slider.png) no-repeat; glisor. Sau îl puteți umple cu culoare, setați un chenar și file */ cursor: pointer ) .ui-slider .ui-slider-range (poziție: absolut; z-index: 1; dimensiunea fontului: .7em; afișare : blocare: 0 ; glisor orizontal(banda însăși de-a lungul căreia trece glisorul) */ .ui-slider-horizontal ( înălțime: 3px; /* setați înălțimea conform designului */ ) /* poziționați glisoarele */ .ui-slider-horizontal .ui -slider-handle (sus: -5px; margin-left: -6px; ) .ui-slider-horizontal .ui-slider-range (sus: 0; înălțime: 100%; ) .ui-slider-horizontal .ui- slider-range-min ( stânga: 0; ) .ui-slider-horizontal .ui-slider-range-max ( dreapta: 0; ) /* designul benzii de-a lungul căreia se deplasează glisorul */ .ui-widget-content ( chenar: 1px solid #D4D4D4; fundal: #fff; ) /* designul zonei active (între două glisoare) */ .ui-widget-header ( chenar: 1px solid #D4D4D4; fundal: #f00; ) /* rotunjire pentru bara de glisare */ .ui-corner- all ( -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; )
Unele dintre aceste reguli pot fi combinate, deoarece pluginul recompensează cu generozitate elementele cu mai multe clase. De exemplu, originalul meu
se transformă în
Dar am preferat să las stilurile așa cum sunt pentru o mai mare versatilitate. Cred că oricine trebuie să stileze un glisor vertical folosind acest șablon îmi va mulțumi.
Adăugarea intrărilor aferenteAcum vine partea distractivă. Să adăugăm două intrări în care vom afișa valorile selectate pe glisor.
La inițializarea cursorului, folosim evenimentele stop și slide - primul va furniza valoarea corectă când glisorul se oprește, iar al doilea va adăuga interactivitate (valoarea de intrare se va schimba în timp real, sincron cu mișcarea glisorului).
Codul pentru ambele evenimente este același - luăm valoarea curentă folosind metoda .slider("valori",X) și o plasăm în intrarea dorită:
JQuery("#slider").slider(( min: 0, max: 1000, valori: , interval: true, stop: function(event, ui) ( jQuery("input#minCost").val(jQuery("# slider").slider("valori",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("valori",1)); ), slide: function(eveniment) , ui)( jQuery("input#minCost").val(jQuery("#slider").slider("valori",0)); jQuery("input#maxCost").val(jQuery("#slider" ).slider(„valori”,1));
Tot ce rămâne este să organizăm feedback-ul. Învățăm cursorul să se miște dacă utilizatorul introduce o valoare în intrare. Aici putem folosi evenimentul de apăsare a tastei astfel încât glisorul să reacționeze la fiecare tastă apăsată sau evenimentul de modificare dacă dorim ca modificarea să aibă efect după finalizarea introducerii și părăsirea câmpului. O chestiune de gust.
Totodată, am introdus o verificare că valoarea superioară este în afara intervalului (pentru mine este 1000) și o verificare că glisorul inferior nu primește o valoare mai mare decât cea superioară:
JQuery("input#minCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if( parseInt (value1) > parseInt(value2))( value1 = value2; jQuery("input#minCost").val(value1); ) jQuery("#slider").slider("valori",0,value1 )) ; jQuery("input#maxCost").change(function())( var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); dacă ( valoare2 > 1000) ( valoare2 = 1000; jQuery("input#maxCost").val(1000)) if(parseInt(value1) > parseInt(value2))( value2 = value1; jQuery("input#maxCost").val ( valoare2); jQuery("#slider").slider("valori",1,valoare2));
Ultimul detaliu este de a se asigura că utilizatorul nu poate sparge pluginul introducând litere sau incorecte în intrări valori numerice. Nu voi lua în considerare acest punct în detaliu, deoarece nu are legătură directă cu subiectul articolului. Mă refer pe curioși unde este, desigur, implementat acest lucru.
Într-una dintre următoarele publicații vom complica sarcina. Voi arăta cum, pe baza acestei soluții, puteți face o selecție de valoare cu un pas neuniform și scale diferite. Adică, atunci când este necesar ca, de exemplu, prima jumătate a glisorului să aibă un interval de valori de la 0 la 100, iar a doua de la 100 la 1000.
Astfel de opțiuni se găsesc destul de des în magazinele online - acest lucru este convenabil, deoarece pentru cantități mici, personalizarea este mai importantă, iar confortul utilizatorului, după cum știți, este pe primul loc.
Și rezultatul utilizării cursorului în cod:
Următoarele atribute au fost introduse pentru a lucra cu glisorul:
- max — valoarea maximă a elementului (corespunde poziției din dreapta a cursorului). Număr.
- min — valoarea minimă a elementului (corespunde poziției din stânga a cursorului). Număr.
- pas — pas glisor. Număr.
Un exemplu de utilizare a atributelor este prezentat mai jos.
|
În plus, ca și în cazul oricărui element HTML, puteți aplica stilul CSS la tipul de intrare = "interval".
Cum se lucrează cu un glisor în JSDeoarece glisorul este un element de intrare, puteți utiliza proprietatea value pentru a-i citi valoarea. În exemplul următor, vom citi valoarea unui glisor și o vom trimite într-un paragraf.
funcția fun1() ( var rng=document.getElementById("r1"); //rng este Input var p=document.getElementById("unul"); // p - paragraf p.innerHTML=rng.value; )
funcția fun1() ( var rng = document . getElementById('r1"); //rng este intrare var p = document . getElementById (& #x27;one"); // p - paragraf p. innerHTML = rng . valoare; |
Observați noul eveniment oninput. Eveniment OnInput - declanșat atunci când există vreo modificare a elementului de formular, de exemplu când este introdus un nou caracter sau când glisorul este mutat cu 1px. Spre deosebire de evenimentul OnChange, care este declanșat doar atunci când elementul își pierde focalizarea, oninput este declanșat atunci când există vreo modificare a elementului. Acest eveniment adaugă interactivitate la glisor.
Evenimentul onchange este util și atunci când este utilizat cu un element select.
Sarcina practicăSarcina 1. Înlocuiți evenimentul OnInput din exemplul prezentat cu evenimentul onchange. Studiați cum s-a schimbat comportamentul elementelor. Când se actualizează sensul unui paragraf?
Sarcina 2. Setați glisorul la o valoare minimă de 50 și o valoare maximă de 150. Studiați ce valori minime și maxime sunt afișate într-un paragraf?
Sarcina 3. Setați pasul glisor la 10. Cum se schimbă valorile într-un paragraf?
Sarcina 4. Setați pasul de modificare a valorii la 7. Cum se modifică valorile maxime și minime?
Continuăm să lucrăm cu glisorul de intervalAtenţie! Valorile citite din proprietatea value sunt un șir. Nu uitați să le convertiți în numere folosind funcția parseInt(șirul dvs.).
Să decidem sarcină simplă: scoateți valoarea glisorului de intrare. Pentru a face acest lucru, trebuie să transferați valoarea proprietății slider.value la proprietatea input.value. Un exemplu este prezentat mai jos:
funcția fun1() ( var rng=document.getElementById("r1"); //rng este un cursor var i1=document.getElementById("i1"); // i1 - introducere i1.value=rng.value; )
Sarcina practicăSarcina 5. Studiați munca exemplului de mai sus. Adăugați evenimentul oninput="fun2()" la tipul de intrare="text". Pentru funcția fun2, programați sarcina inversă - acele valori care sunt introduse în intrare sunt atribuite automat glisorului.
Pentru a-l securiza, haideți să mai facem o sarcină: folosiți glisorul pentru a schimba dimensiunea bloc div. Aspectul sarcinii este prezentat mai jos:
Salutare tuturor, am decis să scriu un articol despre cum să stil element html 5 intrare cu tipul de interval, un fel de glisor, convenabil și modern, vă voi arăta și cum să lucrați cu el prin JavaScript, activat Exemplu JQuery. Vreau să spun imediat că practic nu există probleme cu stilul, dar dacă trebuie să efectuați și unele acțiuni cu el, există capcanele despre care voi vorbi mai jos. Există câteva soluții, dar de îndată ce vor exista soluții de bază, cu siguranță voi adăuga la articol Hai să mergem =)
tip de intrare interval htmlPentru început, să scriem cod html, voi adăuga două intrări cu tipul de interval, una va fi afișată ca vizualizare originală în browser și o vom schimba pe cealaltă și imediat îi vom da clasa de interval:
Am creat deja un fișier pentru scrierea codului JS, un fișier cu foi de stil și conectat biblioteca jQuery Ambele intrări au același maxim și valori minimeși setați, de asemenea, valoarea inițială la 25
Deschideți fișierul cu stiluri și setați imediat stilurile pentru html, body și bloc cu clasa wrp:
Să setăm stiluri pentru browsere normale, cum ar fi Chrome, aici, desigur, să setăm stiluri pentru class.range:
Astfel, se pare că resetăm stilurile standard și puteți scrie în siguranță propriile stiluri pentru linia piesei în sine.
Nu există nimic supranatural aici, așa că fiecare își face propriul tip de linie de pistă după cum vrea. Acum să setăm stilurile pentru glisor, acel lucru pe care îl tragem sau îl mutăm ca în player. Pentru a seta stilurile pentru glisor, trebuie să adăugați pseudo-elementul ::-webkit-slider-thumb și, de asemenea, să resetați stilurile. și apoi facem ce avem nevoie
Totul este, de asemenea, clar și simplu, singurul care poate nu știe despre ultima proprietate de tranziție este să seteze o tranziție animată între stări, adică voi avea o pseudo-clasă :hover , și astfel încât să existe tranziție lină Am adăugat această proprietate Let's add:hover, dar și:active
Totul este, de asemenea, simplu și neted. Dacă îl deschidem în Chrome sau într-un browser Yandex, de exemplu, atunci totul arată așa cum ar trebui. Pentru alte browsere, în toate locurile împreună adăugăm webkit-ul de care avem nevoie, adică:
- pentru Mozilla moz,
- pentru operă,
- pentru IE ms, dar despre Internet Explorer vom vorbi mai târziu. Rețineți că stilurile pentru fiecare browser vor trebui repetate, altfel dacă combinați și scrieți pseudo-elemente separate prin virgule, nu va funcționa. Mai jos voi arăta care pseudo-element este pentru cine
Sincer, nu știu cum se numește corect, dar aceasta este bara care urmează cursorul nostru când îl tragem sau îl mutăm, ar putea fi o bară de încărcare, o bară de proces, o bară de progres, nu știu un fel de indicator în general, dar cred că înțelegi despre ce vorbim, pentru că suntem pe aceeași lungime de undă, dacă în poza de mai jos este albastru: D Deci, pentru a-l face ai nevoie de proprietatea background-image de fundal, cine face ea
Pentru browser Firefox Folosim moz în loc de webkit. Am evidențiat cu aldine acele locuri în care schimbăm valorile astfel încât bara să se miște împreună cu valoarea intrării în sine. Dacă ne mutăm acum, banda nu se va mișca, despre asta vom vorbi mai târziu
După cum am promis, scriu o listă cu stilurile potrivite pentru ce browser
Acesta este potrivit pentru Chrome, Yandex, Opera și Safari:
Mozilla, este puțin diferit, dar totuși simplu
Este complet diferit aici, veți înnebuni cu aceste browsere. În general, IE împarte intr-un fel intrarea noastră în trei părți, așa că iată regulile:
Personal, nu l-am testat pe IE, deoarece după ce l-am instalat Windows-ul meu s-a prăbușit și nu am mai făcut-o, o voi corecta aici pe măsură ce învăț ceva nou =)
intervalul de intrare JQueryAm scris deja asta mai sus, asta este ceea ce folosim
Schema este următoarea: dacă instalăm un handler de evenimente „modificare” și îl folosim pentru a primi valoarea intrării, apoi schimbăm proprietăți css, va funcționa astfel: mutați glisorul și eliberați butonul mouse-ului, apoi linia se va muta.
Și acest lucru este logic, dar nu în întregime frumos, așa că vă propun o altă soluție
Deschideți fișierul script.js sau scrieți în html în sine, nu contează și scrieți această funcție:
Totul este simplu, facem același lucru în timpul evenimentului de schimbare, obținem valoarea și schimbăm stilurile în locurile potrivite, doar rețineți că valorile ar trebui să fie în procente, deoarece intrarea mea variază de la 0 la 100 , nu calculez nimic, dar daca de exemplu ar fi de la 0 la 120, atunci as trece valoarea rezultata prin formula (val*100)/120, adica as primi un procent din numarul . Cred că acest lucru este clar. În continuare, pentru ca acest lucru să funcționeze, trebuie să îl indicați în evenimentul de intrare al elementului:
Asta e tot, acum va funcționa
Ei bine, acum pietrele la rinichi despre care am vorbit la început
Piesa pe care o știu astăzi este că această caracteristică nu va funcționa în Mozilla.
Răspunsul este simplu și se află la suprafață, deoarece pentru Mozilla putem schimba stilurile doar folosind un pseudo-element, dar pentru JavaScript pseudo-elementele nu există în DOM, așa că nu putem lucra cu el. Dacă ar exista o sarcină unică, de exemplu doar schimbarea culorii, am putea folosi doar a doua clasă, dar în în acest caz, Băieți, încă nu am găsit și nu am venit cu nimic, dacă știe cineva, scrie =)
Concluzie În principiu, asta este tot, dar de îndată ce sosește o trăsură cu o porție suplimentară, cu siguranță o voi adăuga la articol. Mulțumesc tuturor, pa =)
