jQuery plugins - Expandable Sticky Bar
nov 23

Expandable Sticky Bar

Előugró, fix sáv

Verzió: nincs adat
Kiadás dátuma: 2010/11/01
Fejlesztő: Dynamic Drive
Liszensz: nincs adat

Bevezető

A plugin segítségével egy, az egérmutató hatására előugró sávot hozhatunk létre a képernyő alján, vagy tetején. Ennek tartalmát beágyazhatjuk magába az oldalba, de akár egy külső file-ban is elhelyezhetjük azt.

Implementálás

CSS

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

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/expstickybar.js"></script>
          

Deklaráció

A deklaráció nem a megszokott formában történik, ugyanis itt a .js file legaljára kell ellátogatnunk és az ott található paraméterek segítségével tudjuk a plugin-t igényeinknek megfelelő formára hozni:

            var mystickybar = new expstickybar({
              id: 'stickybar',
              position: 'bottom',
              revealtype: 'mouseover',
              peekamount: 35,
              externalcontent: 'stickybarcontent.htm',
              speed: 200
            })
          

Használat

A sáv tartalmát a "deklarációban" megadott blokkban kell elhelyeznünk. Ez a blokk (mint azt a bevezetőben említettem) lehet az oldal szerves része, de akár egy tetszőleges, külső file-ban is szerepelhet. Hogy a blokk felépítése milyen struktúrát kell, hogy kövessen, arra példa a bemutató oldalon található.

Teljes paraméterlista

  • id: a sáv tartalmának azonosítója (alapértelmezett: 'stickybar')
  • position: a sáv pozíciója ('bottom' | 'top') (alapértelmezett: 'bottom')
  • revealtype: a sáv interakciójának típusa ('mouseover' | 'manual') (alapértelmezett: 'mouseover')
  • peekamount: inaktív állapotban a sáv látható részének magassága pixel-ben (alapértelmezett: 35)
  • externalcontent: a külső file útvonala, üresen hagyott tartalom esetén oldalon belüli tartalmat jelent (alapértelmezett: 'stickybarcontent.htm')
  • speed: a sáv animációjának időtartama milliszekundumban (alapértelmezett: 200)

Tippek

  • Sajnos a plugin nem böngészőfüggetlen, nálam Chrome (v7.0.5) és Opera (v10.63) alatt nem működött.
  • A plugin a jQuery 1.4.2-es verziójával működik, azonban pl. az 1.6.1-es verzióval már nem, vagy nem megfelelően!