jQuery plugins - HoverAttribute
júl 13

HoverAttribute

Tegyük a linkjeinket igazán látványossá!

Verzió: 1.0.7
Kiadás dátuma: 2010/05/20
Fejlesztő: Alexander Wallin
Liszensz: nincs adat

Bevezető

A HoverAttribute egy összességében nem túl hasznos, de annál inkább látványos plugin. Segítségével a link-ek hover effektjét tudjuk igazán látványossá tenni: a link fölé mozgatva az egeret megmutatja például az adott link hivatkozott URL-jét, vagy a title tag-jét, stb. A plugin az URL-ek kezeléséhez (parzolásához) a Steven Levithan által írt parseUri() függvényt használja.

Implementálás

CSS

A plugin működéséhez hozzátartozik a CSS is, amivel személyre szabhatjuk az egyes link-ek kinézetét.

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

JavaScript

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

Deklaráció

            $(document).ready(function(){
              $('a').hoverAttribute();
            });
          

Természetesen megfelelő szelektor használattal lehetőségünk van a plugin-t csak az oldal bizonyos link-jeire alkalmazni, illetve az egyes link-ekhez más-más deklarációt hozzárendelni.

Teljes paraméterlista

  • attribute: az az attribútum, amelyre a hover effektet alkalmazni szeretnénk. Itt bármely, létező attribútum megadható (alapértelmezett: 'href').
  • animationTime: a hover animáció időtartama másodpercben (alapértelmezett: 0.3).
  • animationEase: az animációhoz használt jQuery easing függvény (swing | linear)
    (alapértelmezett: 'swing').
  • tweenInFrom: az animáció kezdőpozíciója (left | top | right | bottom)
    (alapértelmezett: 'left').
  • parseAsURL: ha true-ra állítjuk, a megadott attribútumot mint URL-t kezeli a plugin (null | false | true)
    (alapértelmezett: false).
  • removeProtocol: ha a megadott attribútum URL, akkor true érték esetén
    levágja a protokollt (pl. 'http(s)://', 'ftp://', 'mailto:') az elejéről (false | true)
    (alapértelmezett: false).
  • removeWWW: ha a megadott attribútum URL, akkor true érték esetén
    levágja az elejéről a 'www.' részt (false | true)
    (alapértelmezett: false).
  • wrapLink: az attribútum-tartalom tördelésének helye (after | none | middle | before)
    (alapértelmezett: 'after').
  • wrapLength: az attribútum tartalmának megjelenítendő, maximum hossza. A levágott rész helyére a '...' sztring kerül. A paraméter értéke lehet egész szám, illetve lehet 'auto' is. Utóbbi esetben a maximum megjeleníthető karakterszám így alakul: (aktuális hossz) - 3
    (egész szám | auto | none)
    (alapértelmezett: 60).
  • highlightURLPart: megadhatjuk, hogy az URL mely része legyen kiemelve
    (host vagy domain | path | query | lastURIPart | none)
    (alapértelmezett: host vagy domain).
  • cssSettings: a kiválasztott elem megjelenésének formázása
    cssSettings.canExpandToFullWidth: annak beállítása, hogy hover esetén a kiválasztott elem megnyúlhat-e a szülő elem 100%-os szélességére (false | true)
    (alapértelmezett: true).