Slidere cu jQuery UI


Era să scriu „slide-uri cu jQuery UI”, dar slide e una (gândiţi-vă la PowerPoint), slider e alta (e o bară cu un „mâner” de tras, pentru a fixa o valoare). jQuery UI oferă aşa ceva şi este foarte simplu de folosit. În esenţă tot ce ne trebuie este un div cu un ID pe care vom „aplica”, via jQuery UI, sliderul. Doar că, desigur, în această formă foarte simplă (primul slider din codul de mai jos), sliderul nu e foarte util.

La al doilea deja lucrurile prin contur. Putem să îi indicăm o valoare minimă şi o valoare maximă, precum şi valoarea iniţială. Observaţi că am pus pentru range valoarea min: aceasta înseamnă că va evidenţia partea din slider de la început (stânga) la poziţia curentă. Evident că max va evidenţia zona de la poziţia curentă la sfârşit (dreapta). Dar să observăm cum afişăm valoarea: interceptăm mişcarea sliderului şi apelăm o funcţie în care nu facem decât să dăm unui div valoarea curentă a sliderului. Foarte simplu!

Dar uneori sliderele ne sunt utile nu pentru o valoare ci pentru două! Să zicem că avem o webaplicaţie în care utilizatorul caută cadouri între anumite praguri. Observaţi la sliderul al treilea că am folosit la value un şir de două valori. Evident, şi obţinerea valorilor se modifică puţin, dar nu prea mult.

$("#slider1").slider();
$("#slider2").slider({
    min: 1,
    max: 10,
    range: "min",
    value: 2,
    slide: function(event,ui){
        $("#cat").html(ui.value+" borcane");
    }
});
$("#slider3").slider({
    min: 0,
    max: 100,
    range: true,
    values: [20,50],
    step: 5,
    slide: function(event,ui){
        $("#suma").html(ui.values[0]+" lei - "+ui.values[1]+" lei");
    }
});
$("#cat").html($("#slider2").slider("value")+" borcane");
$("#suma").html($("#slider3").slider("values",0)+" lei - "+
                $("#slider3").slider("values",1)+" lei");

Putem vedea codul de mai sus în acţiune aici sau mai jos.

În fine, am mai scris un mic exemplu care foloseşte un plugin jQuery, numit slideControl. Ce a ieşit vedeţi aici sau mai jos. Nu, nu sunt foarte încântat de respectivul plugin… poate că mai sunt şi altele ce permit schimbarea aspectului la slidere dar eu pe moment doar pe acesta îl ştiu.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *