jQuery plugins - BigTarget
jan 04

BigTarget

Mondj viszlátot a "bővebben" linkeknek!

Verzió: 1.0.1
Kiadás dátuma: nincs adat
Fejlesztő: Leevi Graham
Liszensz: nincs adat

Bevezető

Egy cikk rövid bemutatója általában a következő elemekből építkezik: cím, opcionálisan egy kép, egy az érdeklődést felkeltő rövid ismertető, illetve a nélkülözhetetlen "bővebben", vagy "tovább" link. Hogy ezt a blokkot felhasználóbarátabbá tegyük, célszerű a címre és a képre is linket helyezni.

A BigTarget plugin-nal a felhasználói élmény még tovább növelhető: a link kiterjeszthető az egész blokkra, így az egész blokk egyetlen linkké alakítható.

Implementálás

CSS

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

JavaScript

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

Deklaráció

Deklaráció során azt kell megadnunk, hogy a plugin honnan vegye a linket, azaz hova mutasson az új, kiterjesztett link:

            $(document).ready(function(){
              $("#pelda h4 a").bigTarget();
            });
          

Használat

            <ul id="pelda">
              <li>
                <h4><a href="#" title="Cím" rel="external">Cím</a></h4>
                <p>
                  Lorem ipsum...
                  <a href="#" rel="external">Bővebben …</a>
                </p>
              </li>
              <li>
                ...
              </li>
            </ul>
          

Teljes paraméterlista

  • hoverClass: CSS osztály a kiterjesztett link hover eseményéhez (alapértelmezett: 'hover')
  • clickZone: CSS szelektor a klikkelhető blokk meghatározásához (alapértelmezett: 'li:eq(0)')
  • title: Ha a hivatkozott link rendelkezik title tag-gel, akkor a paraméter segítségével ezt hozzárendelhetjük az egész blokkra kiterjesztett linkhez (true | false) (alapértelmezett: true)

Tippek

  • ha a linknél a rel attribútumot az "external" értékkel használjuk, akkor a plugin a hivatkozott oldalt új ablakban nyitja meg