jQuery plugins - Stylesheet Switcher
aug 04

Stylesheet Switcher

Dinamikus CSS betöltés

Verzió: nincs adat
Kiadás dátuma: 2009/07/31
Fejlesztő: Kelvin Luck
Liszensz: Creative Commons Attribution 2

Bevezető

Biztos nem újkeletű dolog senkinek sem, hogy egy oldalhoz több stílus (skin) is rendelhető és a felhasználó választhatja ki a számára tetszőt. Ez a stíluslapok közti váltás a legtöbb esetben nem dinamikusan történik, azaz az oldal újratöltését igényli.

A Stylesheet Switcher-rel mindez dinamikusan valósul meg, ráadásul a plugin könnyedén implementálható bármely oldalba.

Implementálás

CSS

A hagyományostól kicsit eltérő módon kell beágyazni az összes, használni kívánt stíluslapot:
mindegyiket egy title attribútummal egészítjük ki (az itt megadott címmel fogjuk a későbbiekben azonosítani őket), illetve az alternatív (a nem alapértelmezett) stíluslapoknál a rel attribútum a "stylesheet" helyett "alternate stylesheet"-re módosul.

            <link type="text/css" rel="stylesheet" href="style1.css" title="style1" media="screen" />
            <link type="text/css" rel="alternate stylesheet" href="style2.css" title="style2" media="screen" />
            <link type="text/css" rel="alternate stylesheet" href="style3.css" title="style3" media="screen" />
          

JavaScript

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

Deklaráció

Először inicializáljuk a plugin-t, majd a .styleswitch osztályú elemekhez (jelen példában a click eseményhez) rendeljük hozzá:

            $(document).ready(function(){
              $.stylesheetInit();

              $('.styleswitch').bind(
                'click',
                function(e)
                {
                  $.stylesheetSwitch(this.getAttribute('rel'));
                  return false;
                }
              );
            });
          

Használat

A linkeknél két fontos dologra kell figyelnünk:
a deklarációban megadott CSS osztály (.styleswitch) használatára, illetve a stíluslapok beágyazásakor megadott címekre, amelyekre a linkek rel attribútumával hivatkozunk.

            <ul>
              <li><a href="#" rel="style1" class="styleswitch">Eredeti stílus</a></li>
              <li><a href="#" rel="style2" class="styleswitch">Második stílus</a></li>
              <li><a href="#" rel="style3" class="styleswitch">Harmadik stílus</a></li>
            </ul>