Egy egyszerű tooltip támogatásával a html-címkék jquery - Pafnutii blog

Hosszú ideig nem írtam semmit az oldalon, de úgy döntött, hogy ossza meg az embereket, a közelmúltban felfedezett, érdekes plugin jQuery.

1. Először hozzon létre egy mappát a jelenlegi sablon almappa js - csináld a kényelem, nem tévesztendő hol dobja a javascript a jövőben.
Ne felejtsük el, hogy másolja a mappát js .htaccess fájlban példa css mappa vagy DLE nem szállítja a javascript.

2. Egy kényelmes módja csatlakoztatja a jQuery könyvtár:
- JQuery vagy töltse ki a csatolt fájl archívum a js mappát, és írj a main.tpl
- Vagy „beszélni” mozog vele, hogy „tegyenek” a könyvtár googlecode:
írjon a main.tpl

3. Töltse le a beépülő modul tooltip.js a js mappa alatt és a vonalak, ahol a könyvtár regisztrált kapcsolat írható:

Most minden a linkeket, amelyek a sorban, amikor .ttp_link osztályú cím kerül feldolgozásra bővítmény, és egy szép tooltip.

4. Határozza meg egy osztály a mi tooltip:
Mindenesetre CSS-fájl írására:


5. HTML:
Például, hogy ez a darab kód:


Bemutatja népszerű html-címkék méret szöveg és kép. Mint látható, minden helyesen jelenik meg.

Előnye ennek a plugin:
- támogatja a HTML-címkéket.
- egyszerű beállítás.
- újrahasználható ugyanazon az oldalon.
- könnyűszerkezetes plugin.

De van egy szépséghiba:
Ha valaha szeretné használni a tooltip a tartalom hírek - Sietek csalódást okozni, ha hirtelen találkozni a hírekben egy kis másolatot a kép # 91; hüvelykujj # 93;, majd 99,9% -os valószínűséggel az összes sablon úszni fog, úgyhogy hálás lennék annak, aki tud segíteni a döntést a ajtófélfa. Nos, ha nincs kép a hírek, ez biztos, hogy ezt a levelet:

Ez a példa is lehet alkalmazni, hanem a tooltip css megjelenítéséhez hírek 2 oszlop.

Azt hiszem, mindenki maga dönti el, hogyan kell alkalmazni a tooltip a webhelyen.

1. A hibát javít a megjelenése üres tér alján a hely mintegy 20 képpont hozzá az osztály tooltip negatív helyzetét a függőleges (top: -9999px;). Ennek eredményeként, a css kód a következőképpen néz ki:

2. ustranieniya bug egy üres cím linkeken vissza egy kicsit jquery-kódot, adjuk hozzá a következő sort:

Ennek eredményeképpen a szkript fog keresni 2 soros dlinshe, de jobban fog működni:

Kapcsolódó elemek

  • Cinemamir.com 2
    „>
  • Egy kis megosztani az emberekkel
    Úgy döntöttem, most megosztani a tömegek minta állt a blogomban a frissítés előtt. Kinek van szüksége ... „>
  • Vasárnap kivonatok №2
    Ma, az összeállítás egy pár töredék jQuery. Az első megmutatja véletlenszerű elem ... „>
  • Utolsó hozzászólások Module 3.4 jQuery kiadás
    Ezt a bejegyzést úgy döntöttem, hogy egy új szakasz modulok DLE. Azt el fog terjedni, amennyire csak lehetséges ... „>

visszacsatolás