Slider jQuery UI - cursorul pentru a selecta banda

În cazul în care structura unui magazin sunt de multe ori se confruntă cu sarcina de a pune în aplicare o alegere user-friendly din gama de preț. Se poate arăta în felul următor:

Ideea, sper, este clar. cursoare strangeti prea tare, valorile câmpului de intrare sunt modificate sincron. Să încercăm să-l pună în aplicare.

Pentru a găsi o soluție la .js cross-browser pentru interfața de selecție gamă. cerinţe:

• INPUT și cursoarele sunt conectate (modificarea valorii unuia imediat reflectate în cealaltă);
• styling flexibilitate (aceasta ar trebui să apară pe design).

Vom folosi plug-in jQuery UI Slider. Prin ea însăși, se creează pur și simplu un slider, dar face prieteni, cu intrare sa nu este dificil.

Deci, mai întâi să presupunem că nu există nici o intrare, și a vedea cum funcționează pluginul.

Ce piatră?

Pornire rapidă

In HTML, crea elementul care va înlocui fișa de pe cursorul, și atribuiți-l id:

Inițializați un script slider:

Și acum mai mult

Plugin-ul este destul de flexibil. Acesta vă permite să creați piese verticale sau orizontale, care pot merge una sau două cursoare. Opțiunea două cursoare perfect pentru problema noastră - intervalul de selecție.

La momentul deplasarea cursorului sau de oprire poate îndeplini orice funcție, prin care cursorul poate fi folosit ca un control (schimba valoarea INPUT, Select sau, de exemplu, pentru a comuta file - pe site-ul oficial plugin-ul există, de asemenea, un exemplu demo).

parametrii săi pot fi setate când inițializarea plugin:

Setează sau returnează cursorul. Pentru glisoarele cu mai multe cursoare sau cu o bandă.

Setarea stiluri

Nekotoye acestor reguli pot fi combinate ca un plug răsplătește cu generozitate elemente set de clase. De exemplu, inițial mea

Dar eu prefer să lase stiluri în această formă pentru o mai mare versatilitate. Cred că cel care va avea acest model stylize glisor vertical, spune-mi mulțumesc.

Adăugarea INPUT legate

Acum, partea distractivă. Adăugați două INPUT, care va afișa valorile selectate pe cursor.

Când inițializarea eveniment de oprire folosind slider si slide - asigura mai întâi valoarea corectă la momentul opririi glisorului, în timp ce al doilea va oferi interactivitate (valoarea de intrare se va modifica în timp real, mișcarea sincronă a cursorului).

Codul pentru ambele evenimente este același lucru - vom lua valoarea curentă cu ajutorul metodei .slider ( „valori“, X) și puneți-l în intrare dorit:

Rămâne de a oferi un feedback. Aflați pentru a muta cursorul, în cazul în care utilizatorul introduce o valoare în intrare. Aici puteți utiliza evenimentul keypress pentru a răspunde la fiecare apăsare de tastă cursorul sau un eveniment de schimbare, dacă vrem să schimbăm intră în vigoare după intrarea și ieșirea de pe teren. O chestiune de gust.

În același timp, am pus mare valoare de test de ieșire a intervalului (a mea este 1000) și verificați dacă cursorul de jos nu a primit o valoare mai mare decât cea superioară:

Ultimul detaliu - necesitatea de a se asigura că utilizatorul nu poate rupe plugin-ul, prin tastarea literelor în intrare sau nekorrektrye valori numerice. Acest punct nu este luat în considerare în detaliu, deoarece nu abordează în mod direct articolele tematice. Indiscrete se referă la demo exemplu. în cazul în care acesta este, desigur, pus în aplicare.

Intr-un articol viitor vom complica sarcina. Voi arăta cum pe baza acestei decizii, puteți selecta valori cu pas neregulate și diferite scări. Adică, atunci când este necesar, de exemplu, prima jumătate a cursorului reprezentat interval de valori de la 0 la 100, iar al doilea la 100 la 1000.

Aceste opțiuni sunt destul de frecvente în magazinele online - este convenabil, deoarece sumele mici delalizatsiya mai importante, și comoditatea utilizatorului, așa cum este cunoscut, în primul rând.