jQuery plugins - CountDown
feb 03

CountDown

Visszaszámlálás

Verzió: 1.0
Kiadás dátuma: 2010
Fejlesztő: Vassilis Dourdounis
Liszensz: nincs adat

Bevezető

A CountDown egy egyszerű, de mindeközben látványos visszaszámláló plugin. A visszaszámláláshoz használhatunk abszolút időzítést, azaz amikor egy konkrét, meghatározott időpontot/dátumot adunk meg célként, illetve használhatunk relatív időzítést is, amikor az aktuális dátumhoz viszonyítva adjuk meg a kitűzött időpontot.

Jellemzők

  • könnyű integrálhatóság
  • könnyen testreszabható kinézet
  • abszolút és relatív időzítés
  • publikus metódusok használata
  • onComplete függvény
  • kompatibilitás: Internet Explorer 6+, Firefox 3+, Google Chrome 4+, Safari 4+, Opera 9+

Implementálás

CSS

A plugin-hoz két stílus jár "gyárilag".
Világos:

            <link rel="stylesheet" type="text/css" href="css/main.css" />
          

Sötét:

            <link rel="stylesheet" type="text/css" href="css/dark.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
          

Deklaráció

1. Relatív visszaszámlálás:

            $(document).ready(function(){
              $('#pelda').countDown({
                targetOffset: {
                  day: 0,
                  month: 0,
                  year: 0,
                  hour: 0,
                  min: 0,
                  sec: 0
                }
              });
            });
          

2. Abszolút visszaszámlálás:

            $(document).ready(function(){
              $('#pelda').countDown({
                targetDate: {
                  day: 0,
                  month: 0,
                  year: 0,
                  hour: 0,
                  min: 0,
                  sec: 0
                }
              });
            });
          

Használat

A HTML kódnak a következőképp kell festenie, ahol az egyes div-ek osztályaival definiálhatjuk, hogy mely adatot kívánjuk benne megjeleníteni. Természetesen bármely blokk (pl. a .dash weeks_dash - hét) szabadon elhagyható, nem okoz működési/megjelenítési problémát.

            <div id="pelda">
              <div class="dash weeks_dash">
                <span class="dash_title">Hét</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
              </div>
              <div class="dash days_dash">
                <span class="dash_title">Nap</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
              </div>
              <div class="dash hours_dash">
                <span class="dash_title">Óra</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
              </div>
              <div class="dash minutes_dash">
                <span class="dash_title">Perc</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
              </div>
              <div class="dash seconds_dash">
                <span class="dash_title">Másodperc</span>
                <div class="digit">0</div>
                <div class="digit">0</div>
              </div>
            </div>
          

Teljes paraméterlista

  • targetOffset: relatív visszaszámlálási mód
  • targetDate: abszolút visszaszámlálási mód
  • year: év
  • month: hónap
  • day: nap
  • hour: óra
  • min: másodperc
  • sec: milliszekundum
  • utc: egyezményes koordinált világidő engedélyezése/tiltása (true | false) (alapértelmezett: false) (bővebben az UTC-ről: wikipédia)

Metódusok:

  • stopCountDown(): visszaszámláló leállítása
  • setCountDown(): visszaszámláló paramétereinek beállítása
  • startCountDown(): visszaszámláló elindítása
  • onComplete: függvény meghívása a célidőpont elérésekor