jQuery plugins - Colortip
júl 22

Colortip

Vigyünk színt a buborékokba!

Verzió: 1.0
Kiadás dátuma: nincs adat
Fejlesztő: nincs adat
Liszensz: nincs adat

Bevezető

Már szerepelt nem is olyan rég egy tooltip plugin (TipTip) a jquery-plugins.hu oldalain. Jelenlegi plugin azért érdemli meg a "rivaldafényt", mert igen frappáns, hogy a kinézete könnyedén paraméterezhető és egy oldalon belül akár több, egymástól különböző megjelenésű (színű) tooltip is alkalmazható.

Implementálás

CSS

A plugin-hoz járó CSS file:

            <link rel="stylesheet" type="text/css" href="colortip-1.0-jquery.css"/>
          

A file definiál számunkra pár szín-osztályt: red, blue, green, yellow, white és black. Amikor a link-et létrehozzuk, ezekből az osztályokból választhatunk szín sémát a buboréknak, de természetesen a CSS saját osztályokkal is bővíthető.

Ha szeretnénk saját kezűleg meghatározni a kinézetet, akkor nagy segítség, ha tudjuk, hogy a plugin
3db span blokkból hozza létre a buborékot, amely így néz ki:

            <a class="blue colorTipContainer" href="http://www.link.hu/">Link szövege
              <span class="colorTip" style="margin-left: -60px;">Buborék szövege
                <span class="pointyTipShadow"></span>
                <span class="pointyTip"></span>
              </span>
            </a>
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/colortip-1.0-jquery.js"></script>
          

Deklaráció

            $(document).ready(function() {
              $('[title]').colorTip({color:'yellow'});
            });
          

A deklaráció során adhatjuk meg, hogy mely CSS osztály legyen az alapértelmezett színséma a kívánt elemekhez. A plugin nem csak link-ekre használható, hanem (fenti kód alapján), minden olyan elemre, amelyhez title attribútumot rendeltünk.

Használat

            <a href="http://www.link.hu/" class="blue" title="Buborék szövege">link</a>