jQuery plugins - slimScroll
máj 17

slimScroll

Facebook stílusú scrollbar

Verzió: 0.5.0
Kiadás dátuma: 2011/10/16
Fejlesztő: Piotr Rochala
Liszensz: MIT, GPL

Bevezető

A slimScroll segítségével a Facebook-ról ismerős görgetősávot tudjuk egy tetszőleges div elemhez hozzárendelni. Használata egyszerű, pár paraméter segítségével további módosításokat eszközölhetünk a görgetősávunk kinézetén.

Implementálás

JavaScript

A plugin használatához szükség van a jQuery UI 'Dragabble' csomagjára is:

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery-ui.custom.min.js"></script>
            <script type="text/javascript" src="js/slimScroll.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').slimScroll();
            });
          

Teljes paraméterlista

  • wheelStep: a görgetés mértéke (alapértelmezett: 20)
  • width: a látható szövegterület szélessége képpontban (alapértelmezett: 'auto')
  • height: a látható szövegterület magassága képpontban (alapértelmezett: '250px')
  • size: a görgetősáv szélessége képpontban (alapértelmezett: '7px')
  • color: a scroll hexadecimális színkódja (alapértelmezett: '#000')
  • position: a görgetősáv pozíciója ('left' | 'right') (alapértelmezett: 'right')
  • distance: a görgetősáv és a szövegterület széle közti távolság képpontban (alapértelmezett: '1px')
  • start: a scroll kezdeti pozíciója. Értékként szelektort is megadhatunk, így akár a szöveg egy tetszőleges pontjához is pozícionálhatjuk a scroll-t. ('top' | 'bottom' | $(szelektor))
    (alapértelmezett: 'top')
  • opacity: a scroll áttetszősége ([0..1]) (alapértelmezett: .4)
  • alwaysVisible: a görgetősáv folyamatos láthatóságának engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • railVisible: a görgetősáv hátterének engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • railColor: a görgetősáv hátterének hexadecimális színkódja (alapértelmezett: '#333')
  • railOpacity: a görgetősáv hátterének áttetszősége ([0..1]) (alapértelmezett: '0.2')
  • railClass: a görgetősáv hátterének CSS osztálya (alapértelmezett: 'slimScrollRail')
  • barClass: a görgetősáv CSS osztálya (alapértelmezett: 'slimScrollBar')
  • wrapperClass: a scroll-ozható területhez rendelt konténerelem CSS osztálya
    (alapértelmezett: 'slimScrollDiv')
  • allowPageScroll: ha az egérrel a szöveg elejére/végére scroll-ozunk, akkor onnantól a további scroll-ozással magát az egész oldalt görgetjük. A paraméter segítségével engedélyezhetjük/tilthatjuk a jelenséget. (true | false) (alapértelmezett: false)
  • scroll: egy slimScroll-os szövegterület görgetése külsőleg (alapértelmezett: 0)