jQuery plugins - Hover Message
szept 21

Hover Message

Lebegő üzenetek

Verzió: 1.0
Kiadás dátuma: 2012
Fejlesztő: Kele Norbert
Liszensz: MIT, GPL v2

Bevezető

A magyar fejlesztésű Hover Message plugin-t a hasonló hangzású Floating Message plugin inspirálta, azonban míg a Floating Message a jQueryUI támogatás miatt sok felesleges kódot is igényel (növelve a betöltendő kód méretét), addig a Hover Message tisztán csak a plugin tényleges működéséhez szükséges kódot tartalmazza.

Implementálás

CSS

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

JavaScript

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

Deklaráció

            $(document).ready(function(){
              $('#pelda').hovermessage();
            });
          

Teljes paraméterlista

  • position: az üzenet pozíciója ('top-left' | 'bottom-left' | 'top-right' | 'bottom-right')
    (alapértelmezett: 'top-left')
  • width: az üzenet szélessége képpontban (alapértelmezett: 260)
  • height: az üzenet magassága képpontban (alapértelmezett: 60)
  • zindex: az üzenet z-index értéke (alapértelmezett: 50)
  • clone: az üzenet DOM-ból való eltávolításának engedélyezése/tiltása (true | false)
    (alapértelmezett: false)
  • close: az üzenet bezárásának módja ('onclick' | 'x-button') (alapértelmezett: 'onclick')
  • autoclose: automatikus bezárásig hátralévő idő milliszekundumban - 0 érték esetén nincs automatikus bezárás (alapértelmezett: 0)
  • margin: az üzenet és a képernyő széle közti távolság képpontban (alapértelmezett: 5)
  • type: az üzenet típusa ('none' | 'error' | 'warning' | 'notice' | 'confirm') (alapértelmezett: 'none')
  • onClose: függvény meghívása az üzenet bezárásakor

Metódusok

  • hide: Üzenet elrejtése
                    $('#pelda').hovermessage('hide', <eltávolítás>, <feladat>);
                  
    <eltávolítás>: az üzenet DOM-ból történő (végleges) törlésének engedélyezése/tiltása (true | false)
    <feladat>: az elrejtés után végrehajtandó feladat (opcionális)
  • show: üzenet megjelenítése
                    $('#pelda').hovermessage('show');
                  
  • update: üzenet felülírása új tartalommal
                    $('#pelda').hovermessage('update', 'Új tartalom');
                  

Tippek

  • Az üzenetek tetszőleges HTML kódokat (formázásokat) is tartalmazhatnak!
                    $('Tetszőleges html üzenet').hovermessage();