jQuery plugins - UItoTop
aug 30

UItoTop

Animált "to Top" plugin

Verzió: 1.1
Kiadás dátuma: 2010/04/03
Fejlesztő: Matt Varone
Liszensz: nincs adat
  • 2382
  • 11711
  • 0
  • -

Bevezető

Mára egy egyszerű, apró plugin jutott... egyszerű, de hasznos!

Hívják ezt többféleképpen is: back to top, scroll to top, top link, stb. A lényegen nem változtat: nagyobb tartalmak esetén kifejezetten ajánlott az ilyen link(ek) használata. Ennek is van többféle megvalósítása, az egészen egyszerűtől az összetett, animáltig.

Az UItoTop plugin a böngészőablak jobb alsó sarkában helyez el egy linket, amely csak akkor jelenik meg, ha az oldal tartalmát már elkezdtük görgetni. Röviden fogalmazva: helytakarékos, felhasználóbarát, ötletes, jól néz ki, stb.

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="ui.totop.css" media="screen" />
          

JavaScript

A plugin működéséhez szükséges az easing.js plugin is, amely az animációk tárházát sorakoztatja fel számunkra:

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/easing.js"></script>
            <script type="text/javascript" src="js/jquery.ui.totop.js"></script>
          

Deklaráció

Az animáció típusát a deklarációnál kell megadnunk:

            $(document).ready(function() {
              $().UItoTop({ easingType: 'easeOutQuart' });
            });
          

Fenti kód szerintem a legjobb megoldást használja, de ha valaki más animációt szeretne alkalmazni, az bármit használhat, amelyet az easing.js plugin megenged.

Tippek

  • Ha valaki úgy dönt, hogy az easing plugin weboldaláról egy másik effektet használ az animációhoz, az nem árt, ha tisztában van azzal, hogy a letölthető plugin az easing.js 1.1-es verzióját használja - így ha bizonyos funkciók nem akarnak működni, akkor célszerű azt a legfrissebb kiadásra lecserélni!
  • A plugin CSS-ből könnyedén, tetszés szerint módosítható.