© 2013 All rights reserved.
6

JQuery: Examples 2 – Animate ScrollBar

JavasScriptem ovládaný ScrollBar divu pomocí knihovny jQuery

V příkladu je vytvořen div, který má nastavenu vlastnost overflow: auto a je jím tedy možné srolovat. Div obsahuje text, ve kterém nám jQuery umožní lepší orientaci. Pro pochopení si můžete prohlídnout ukázku:



jquery example

Text je členěn na nadpisy H1 a navíc obsahuje obrázky. Pomocí jQuery zjistíme všechny tyto elementy zobrazíme jejich seznam, ve kterém budeme na elementy v divu odkazovat a umožňovat k nim srolovat.

Div, ve kterém je umístěn text má ID scrollDiv. Seznam všech nadpisů H1 z něj získáme jednoduše takto:

V cyklu k nadpisu můžeme přistupovat pomocí:

V tomto ukázkovém příkladu potřebujeme kromě nadpisů získat i seznam obrázků. To uděláme podobně, jenom pro tag img.

 

Pokud máme seznam všech odkazů a obrázků, budeme pokračovat přidáním eventu pro kliknutí a nabídnutí tak možnosti srolování.

V první řádě musíme zjistit offset divu s textem, ve kterém srolujeme a offset nadpisu (nebo obrázku), ke kterému chceme srolovat (pro rozlišení pozice je použita hodnota z atributu name. V tomto atributu je uloženo číslo identifikující pozici elementu):

Pokud známe obě tyto hodnoty, můžeme konečně animovat samotné srolování:

 

Pro lepší pochopení si můžete prohlídnout celý zdrojový kód:

Comments (6)

To není zrovna hezké řešení. Neexistuje jediný důvod, aby obsah nebyl vygenerovaný na straně serveru, takže by byl dostupný i bez JS. Pomocí jQuery by se pak dal dodělat jen efekt posunutí.

Místo krkolomných cyklů bych navíc doporučil použít spíš each().

Pokud narazis na vybrani nadpisu a obrazku, tak by jsi retezec musel na serveru stejne tak parsovat, aby jsi dostal jejich seznam.
Na strane klienta za pouziti jQuery mi to prijde jednodussi.

A dalsi vyhoda je, ze pokud nebude povoleny javascript, tak se seznam odkazu a obrazku ani nezobrazi.

To mi přijde rozhodně jako nevýhoda. Téměř stejnou funkčnost lze zajistit i bez JS, tak není důvod to omezovat pouze na JS.

Pracnost je zcela srovnatelná – http://php.vrana.cz/staticke-promenne.php

Jistě, s tím co jsi napsal souhlasím, ovšem tohle je jQuery example, takže jsem všechno řešil pomoci JavaScriptu.
Jde hlavně o ukázku toho, co lze pomocí jQuery udělat.
Jinak díky za připomínky.

2Jakub Vrána: Jenom rychle jsem vytvořil ukázku, jak jsem by jsem si představoval využití:
http://www.zaachi.com/priklady/jquery/example6.html

Add comment

About
Hi, i am programmer from the Czech Republic. I love web development (Ruby, Ruby on Rails, PHP, Nette) and iOS development (Objective-C, Cocoa).
To cooperate, here is my phone:
+420 608 836