2017 október 18, szerda
Home » Sitebuild » JQuery fogások » jQuery qTip

jQuery qTip

A qTip egy Jquery-ben íródott tooltip script, amellyel lehetőségünk van a képekhez, linkekhez tartozó tooltip-jeink szebb külsőben való megjelentetésére. Ezen kívül még számos más dologra jó, hiszen lehetőségünk van vele linkek, youtube videók megnyitására is. Tekintsd meg az általam összerakott bemutató oldalt. Rengeteg helyet takaríthatunk meg a használatával, gondoljunk bele, hogy akár a keresőt, vagy a feliratkozó formunkat is tálalhatjuk ebben a formában.

Craig's qTip

Vágjunk bele

A scriptet Craig Thompson írja, és fejleszti, ebből fakadóan nem sűrűn jönnek ki hozzá a frissítések. Az 1.3-as, vagy a fölötti verziójú jquery könyvtárat ajánlja hozzá a jelentős gyorsaságnövekedés miatt, azonban az 1.2.6 fölötti verziókkal is működik.

Telepítése

A folyamata viszonylag egyszerűnek mondható, először is meg kell hívnunk a <head> tag-ben a jquery javascript fájlját.

1
<script src="/projects/qtip/js/jquery.1.3.2.min.js" type="text/javascript"></script>

Az oldal ajánlása alapján az include-okat célszerű a tartalom után, a </body> lezáró tag előtt megejteni. Én a jquery meghívást mégis a head tag-be tettem, viszont a qTip fájl behívást mindenképpen a body tag végén kell megtenni. Ha nem így csináljuk, akkor nem fog működni a script.

1
 <script src="/projects/qtip/js/jquery.qtip-1.0.0.min.js" type="text/javascript"></script>

A linkek title tagjainak qTip-ben való megjelentetéséhez használjuk a következő kódot, ezt szintén tegyük a dokumentumunk végére:

1
2
3
<script class="example" type="text/javascript">// <![CDATA[
// A tooltipek létrehozása a dokumentum betöltésekor $(document).ready(function() {    // A content attribútum nélkül a könyvtár alapértelmezés szerint minden elem title attribútumát használja.    $('#content a[href][title]').qtip({       content: {          text: false // Használja minden elem title attribútumát (true esetén lesz bekapcsolva)       },       style: 'red' // Adjunk neki design-t.    });    // Megjegyzés: Kihagyhatod az összes beállítást és egyszerűen kicserélheted az alap tooltipeket a qTip-re (vedd ki a kommentezést):    // $('#content a[href]').qtip(); });
// ]]></script>

Styling

Alapértelmezés szerint 6-féle design közül választhatunk (Cream, Dark, Green, Light, Red, Blue), de természetesen saját magunk is készíthetünk egyedi kinézetet. Ha azt szeretnénk, hogy minden egyes tooltip a saját egyedi kinézetünket használja, akkor szükségünk lesz globális stílusutasítások használatára. Ha csak egy adott fajta tooltip-re szeretnénk használni, akkor azt elég csupán az adott tooltip javascript-jében a style résznél megtenni. Globális stílus létrehozása kommentárral együtt:

1
2
3
4
5
6
7
8
9
10
11
12
13
$.fn.qtip.styles.mystyle = { // Adjunk nevet a sítlusnak
width: 200,             //szélesség
background: '#A2D959',   //háttérszín
color: 'black',                //betűszín
textAlign: 'center',         //tartalom igazítása
border: {                     //keret
width: 7,                  //szélesség
radius: 5,                 //sarkok lekerekítésének mértéke
color: '#A2D959'        //keret színe
},
tip: 'bottomLeft',    //pozíció
name: 'dark' // Inherit the rest of the attributes from the preset dark style
}

A Support

A használata során én csupán egyetlen negatívummal találkoztam, ez pedig az erősen hiányos dokumentáció. Igaz, hogy a bemutató oldalak segítségével működésre tudjuk bírni, de ha valami olyan igény merül fel, aminek megoldása nem lenne olyan bonyolult, de magunktól nem tudjuk ezt megvalósítani, akkor nagyon jó segítség lenne. Nekem a youtube videó ablaknál lett volna szükségem egy Bezár gombra, de abban a formában nem jött össze, ahogy azt akartam. Úgy sikerült áthidalnom, hogy a videót nem közvetlenül ágyaztam be, hanem közvetetten egy html oldalba ágyaztam, és azt nyitottam meg a tooltip pluginnal. Van egy támogatói fóruma, ahol kérdezhetünk bátran, viszont nem tudom, hogy milyen gyorsan érkezik rá válasz.

Összegzés

Összességében nagyon jól használható script a qTip, aki tooltip plugint keres annak nyugodt szívvel ajánlhatom. Ha kedvet kaptál a kipróbálásához, akkor itt le tudod tölteni a szükséges fájlokat hozzá a demo oldalammal együtt.

Kell nekem

About Tib

Főállású informatikus, mellette mellékállású sitebuilder. Szereti az új CMS rendszereket, melyek egyben új kihívást is jelentenek. Kedvelt CMS-ei: Wordpress, MyBB, Magento.

Check Also

Interjú Szűcs Ádámmal

Egy hideg tavaszi estén eleget tettem egy felkérésnek. A felkérő interjúra jelentkezett, én pedig a ...