jQuery pageSlide plugin

A jQuery pageSlide plugin segítségével az eredeti tartalom elcsúsztatásával másodlagos tartalom jeleníthető meg, pár sornyi Javascript segítségével.
Ha ezt a módszert egy anchor tag-gel kombináljuk, akkor a pageSlide becsomagolja az eredeti tartalmat egy wrapper-be és létrehoz egy további elemet a másodlagos ablaknak. Az effekt kattintásra lép működésbe.



A Lightbox-hoz hasonlóan, a pageSlide is két előnyös tulajdonsággal rendelkezik:

1. Az elsődleges ablak a tartalomnak van fenntartva; a másodlagos interakcióknak nem kell helyet biztosítani az oldalon — a számukra szükséges hely igény szerint létrehozható és eltávolítható.
2. Mivel a felhasználó látja a kiinduló ablakot, jobban képes koncentrálni, és könnyebben visszatérhet az előző feladathoz.

A jQuery pageSlide plugin alkalmazása:

Az oldalad header részébe illeszd be a jQuery-t, és a pageSlide plugint:

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

Javascript

A plugin aktiválása során definiálható, hogy melyik elem aktiválja a működést, illetve itt állítható be a másodlagos tartalom szélessége is.

1
2
3
4
5
6
7

    <script type="text/javascript">
  $(document).ready(function() {
      $('a').pageSlide({
          width: "350px"
      });
  });
  </script>

HTML

A másodlagos tartalmat egy külön html fájlban tárold (a demóban secondary_page.html), de csak magát a tartalmat, mivel a plugin működése lépésekor az itt elhelyezett kód a fő oldal szerves részeként jelenik meg.

A html kódban egy hivatkozásra lesz szükség, amelyre kattintva működésbe lép a plugin:

<a href="secondary_page.html" rel="pageslide">Kattintásra megjelenik a másodlagos ablak</a>

A másodlagos ablak eltűnik, ha a felhasználó az eredeti oldalon bárhol kattint.

Az eredeti cikk a Halobrite.com oldalon érhető el, szerzője Scott Robbin.

Mire vársz? Töltsd le vagy nézd meg a demót !