Un script simplu slider-slider pentru a schimba aspectul

Un script simplu slider-slider pentru a schimba aspectul

In acest articol vom discuta despre modul de a crea un plugin simplu pentru jQuery. care va schimba aspectul slider cu un cursor, astfel încât să puteți să-l întrebați propriul design.

Pentru a începe în acest articol ne vom uita la plugin-ul în sine, să descrie proprietățile stabilite, și apoi a da un exemplu de utilizare.

Pentru a scrie un plugin pentru jQuery necesită unele cunoștințe în acest domeniu, dacă nu le ai, atunci va fi foarte greu de înțeles.

Aici plugin cod:

Script-ul funcționează pe următorul principiu - luat caseta text, înfășurat în jurul blocului (Are clasa .wrap_slideri), care va servi ca o bară de progres (pe care va conduce cursorul), așa cum este creată în interiorul blocului propriu-zis al cursorului (Are clasa .slider). Fiecare dintre ele a seta clasele corespunzătoare. Exact același domeniu, ascuns de la vedere, astfel încât să nu interfereze (în stiluri este prescris pentru câmpul în înfășurare a cursorului).

Prin mutarea cursorului, care corespunde valorii calculate și poziția curentă este stocată ca valoare (valoarea) în câmpul de text (de intrare).

plug-in sine sprijină stabilirea valorii maxime și minime a cursorului, ca urmare a acestei puteți specifica valori diferite, cum ar fi 50-150, 0-400, etc.

În mod implicit, minim - 0 și maxim - 100.

Pentru a utiliza acest plugin, trebuie să conectați biblioteca jQuery. după care conectați fișierul de plugin. Cel mai bine este să se conecteze la priză înainte de închidere . în caz contrar nu se poate lucra.

După ce dopul conectat trebuie să apelați initializare pentru selectorul corespunzător. De exemplu, puteți specifica câmpurile necesare ale unei clase unice, și să-l utilizați pentru a provoca o schimbare în acest domeniu pe cursorul cu un cursor.

Dacă trebuie să specificați alte valori maxime și minime, apoi utilizați următoarea structură:

Exemplu de mufa inputSlider

Am stabilit aspectul paginii noastre:

Noi cerem stiluri pentru apariția glisoarele și glisoarele:

Rezultatul se poate vedea pe pagina demo:

Un script simplu slider-slider pentru a schimba aspectul

Sau descărcați exemplul complet: