jQuery plugins - zAccordion
feb 12

zAccordion

Horizontális accordion plugin

Verzió: 2.0.0
Kiadás dátuma: 2011/09/18
Fejlesztő: Nate Armagost
Liszensz: nincs adat

Bevezető

A zAccordion egy egyszerű horizontális accordion plugin easing.js támogatással. A paraméterek és visszahívó (callback) függvények segítségével elég jól "átgyúrható", ennek bizonyítékaként a letölthető állományban több példa is található.

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/jquery.zaccordion.min.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').zAccordion({
                width: 800,
                height: 400
              });
            });
          

Használat

            <ul id="pelda">
              <li><image src="images/1.jpg" width="600" height="400" alt="" /></li>
              <li><image src="images/2.jpg" width="600" height="400" alt="" /></li>
              <li><image src="images/3.jpg" width="600" height="400" alt="" /></li>
              ...
            </ul>
          

Teljes paraméterlista

  • width: a plugin konténer elemének szélessége
  • height: a plugin konténer elemének magassága
  • slideClass: a slide-ok CSS osztályának előtagja
  • slideWidth: a slide-ok szélessége (üres érték esetén a slide-ok szélessége megegyezik a konténer elem szélességével)
  • tabWidth: az egyes slide-ok interaktív (tab) részének szélessége
  • timeout: váltások közti időtartam milliszekundumban (alapértelmezett: 6000)
  • startingSlide: a kezdő slide sorszáma (a számozás 0-val kezdődik!) (alapértelmezett: 0)
  • easing: a slide-ok közti váltáshoz használt easing animáció
  • speed: slide-ok közti váltás sebessége/ideje milliszekundumban (alapértelmezett: 1200)
  • auto: automatikus lejátszás engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • trigger: esemény hozzárendelése a slide-ok interaktív (tab) részéhez ('click' | 'mouseover' | stb.) (alapértelmezett: 'click')
  • pause: automatikus lejátszás szüneteltetésének engedélyezése/tiltása az egér hover eseményekor (alapértelmezett: true)
  • invert: engedélyezése esetén a legutolsó kép lesz az "alap", fix pozícióval (alapértelmezett: false)
  • animationStart: függvény meghívása a slide-váltások előtt
  • animationComplete: függvény meghívása a slide-váltások után
  • afterBuild: függvény meghívása a plugin élesítését követően

Metódusok

  • start (): automatikus lejátszás indítása
  • stop (): automatikus lejátszás leállítása
  • destroy (): a plugin megszüntetése