jQuery plugins - pageSlide
szept 06

pageSlide

Slider, de egy kicsit másképp

Verzió: 0.2
Kiadás dátuma: 2009/01/07
Fejlesztő: Scott Robbin
Liszensz: MIT, GPL

Bevezető

A pageSlider a nevéből is adódóan egy slider plugin, azonban nem a megszokott formában: a plugin az oldal tartalmi része mellé (jobb oldalra) egy alaphelyzetben nem látható, második tartalmat hoz létre egy általunk megadott külső file-ból (ezt a részt a plugin fejlesztője "másodlagos ablaknak" hívja, így a későbbiekben én is ezt a kifejezést használom).

A másodlagos ablak megjelenítése a slider technikával történik: az egész oldal (a másodlagos ablakkal együtt) elcsúszik balra. A slider megvalósításnak köszönhetően csak akkor látható a tartalma, ha arra tényleg szükség van, így értékes helyet takaríthatunk meg.

A plugin alkalmas bannerek, hirdetések, beléptető- ill. regisztrációs űrlapok, szavazások, stb. megjelenítéséhez.

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="jquery.pageslide.css" media="screen" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.pageslide-0.2.js"></script>
          

Deklaráció

A deklaráció során a plugin-t egy link-hez rendeljük, amellyel majd a másodlagos ablakot aktiválhatjuk. A másodlagos ablak kinézetét CSS-ből személyre szabhatjuk, de az ablak szélességét a deklaráció során kell definiálnunk:

            $(document).ready(function() {
              $('a.example').pageSlide({
                width: '350px'
              });
            });
          

Használat

A link a külső file-ra hivatkozik, amely a másodlagos ablak tartalmát szolgáltatja:

            <a class="example" href="pageslide-content.html" >Másodlagos ablak</a>
          

A külső file felépítése mindössze a megjeleníteni kívánt tartalomra korlátozódik (nincs szükség meta tag-ekre, head-re, stb.), amelyet a testreszabhatóság érdekében célszerű egy konténer blokkba helyezni:

            <div id="secondary">
              <h2>Cím</h2>
              <p>bekezdés...</p>
            </div>
          

Teljes paraméterlista

  • width: másodlagos ablak szélessége (alapértelmezett: '300px')
  • duration: az animáció sebessége (fast | normal | érték milliszekundumban)
    (alapértelmezett: 'normal')
  • start: függvény meghívása az animáció kezdetekor
  • stop: függvény meghívása az animáció befejezésekor
  • loaded: függvény meghívása a másodlagos ablak tartalmának betöltődését követően

Tippek

  • 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!