Pravljenje Web Sajt Ture Koristeći jQuery


Pravljenje Web Sajt Ture Koristeći jQuery

Danas smo iskoristili priliku da vam pokažemo sjajan komad koda koji omogućava pravljenje ture po Vašem sajtu. Ovo može biti veoma korisno ako želite da objasnite upotrebu vaše aplikacije, da napomenem da mnogi veliki i komplikovani sistemi imaju ovakve zamišljene vodiče kroz njihova mesta.
Nekada koliko god vam se činilo da ste izašli korisnicima u susret sa jednostavnošću upotrebe ovakva stvar dobro dođe, čak i čuveni Facebook koristi nesto slično.


DEMO

DOWNLOAD

Cela ideja se svodi na dodavanje određenih klasa elementima na koje želite da skrenete pažnju posetiocu. Koristićemo mali „tooltip“ da Vam dočaramo poentu ovog koda. Navigacija će se potruditi da se posetilac ne „izgubi“, kao da se kreće napred nazad i da restartuje i prekine objašnjavanje.

Još jedna korisna opcija koju možete da iskoristite je „autoplay“ koja omogućava korisniku da se udobno zavali i odgleda Vaš spremljeni materijal.

Da bih ste ovo koristili sve sto je potrebno je da dodate klasu elementu koji želite da stavite u „walk-through“ turu objašnjavanja. Možemo da koristimo „tour_1“, „tour_2“ itd:

<div class="box left">
<h2 class="tour_1">Napravite turu</h2>
</div>

Sada možemo da konfigurisemo parametre u JSON objektu. Ovo je samo jedan primer Vi možete drugačije da se poigrate:

name: klasa koja je data elementu nad kojim želite tooltip
bgcolor: boja pozadine tooltip-a
color: boja tooltipovog teksta
text: tekst unutar tooltip-a
time: ako je tura automatska onda je ovo vreme za prikaz ovog tooltip-a
position: pozicija tooltip-a

Dakle pravimo nešto ovakvo:

var config = [
{
"name" : "tour_1",
"bgcolor" : "black",
"color" : "white",
"position" : "TL",
"text" : "Neki tekst ovde",
"time" : 5000
},...
]

Po defaultu imaćemo autoplay onemogućeno ako želite da omogućite samo primenite autoplay promenjivu na true u liniji 158.

Za poziciju tooltip-a postavićemo sledece vrednosti:

TL: top left
TR: top right
BL: bottom left
BR: bottom right
LT: left top
LB: left bottom
RT: right top
RB: right bottom
T: top
R: right
B: bottom
L: left

Poslednje četiri su centriranje. Još da napomenemo da možete prilagoditi stil tooltip-a u fajlu jquerytour.css.

Ako nađete jos neki zanimljiv način da se ovo primeni pišite nam da proširimo objašnjenje.

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest