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:
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:
|
1 2 3 4 |
var i = 0; for( i = 0; i < $("#scrollDiv h1").length; i++ ){ //práce s nadpisem } |
V cyklu k nadpisu můžeme přistupovat pomocí:
|
1 |
$("#scrollDiv h1").eq(i).html(); |
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):
|
1 2 |
var divOffset = $('#scrollDiv').offset().top; var elementOffset = $("#scrollDiv h1").eq($(this).attr("name") ).offset().top; |
Pokud známe obě tyto hodnoty, můžeme konečně animovat samotné srolování:
|
1 |
$('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700); |
Pro lepší pochopení si můžete prohlídnout celý zdrojový kód:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 |
<html> <head> <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var i = 0; //nacteni vsech H1 nadpisu for( i = 0; i < $("#scrollDiv h1").length; i++ ){ //pridani nadpisu do leveho divu $("#titleDiv").append( "<a href='#' name='" + i + "' onclick='return false;'>" + $("#scrollDiv h1").eq(i).html() + "</a><br />"); } $("#titleDiv").append('<br /><br />'); //nacteni vsech obrazku for( i = 0; i < $("#scrollDiv img").length; i++ ){ //pridani obrazku do leveho divu $("#titleDiv").append( "<img src='" + $("#scrollDiv img").eq(i).attr("src") + "' name='" + i + "' width='50px' /> "); if( i%2 ) $("#titleDiv").append('<br />'); } //event na odkaz v levem divu $("#titleDiv a").click(function(){ //zjisteni pozice zobrazovaneho nadpisu var elementOffset = $("#scrollDiv h1").eq($(this).attr("name") ).offset().top; //zjisteni pozice divu s textem var divOffset = $('#scrollDiv').offset().top; //odrolovani $('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700); //efekt odkazu $(this).fadeTo(500, 0.1, function (){ $(this).css('color', 'lightGreen'); $(this).fadeTo(500, 1); }); }); //event na obrazek v levem divu # podobne jako odkaz $("#titleDiv img").click(function (){ //zjisteni pozice zobrazovaneho nadpisu var elementOffset = $("#scrollDiv img").eq($(this).attr("name") ).offset().top; //zjisteni pozice divu s textem var divOffset = $('#scrollDiv').offset().top; //odrolovani na obrazek $('#scrollDiv').animate({scrollTop: '+=' + (elementOffset - divOffset) + 'px'}, 700); //efekt obrazku $(this).fadeTo(500, 0.5, function (){ $(this).fadeTo(500, 1); }); }); }); </script> <style> h1{ color: #191970; font-size: 20px; } #scrollDiv{ background-color: #f5f5f5; overflow: auto; height: 450px; width: 500; border: 1px solid black; padding: 5px; margin: 5px; } a{ color: #556b2f; text-decoration: none; font-weight: normal; } table{ border: 4px solid silver; padding: 10px; margin: 10px; } td{ padding: 10px; } </style> </head> <body> <table> <tr> <td valign="top"> <div id="titleDiv"></div> </td> <td> <div id="scrollDiv"> <h1>heading 1</h1> <p> paragraph ...</p> <h1>heading 2</h1> <p> paragraph ...</p> <h1>heading 3</h1> <p> paragraph ...</p> <h1>heading 4</h1> <p> paragraph ...</p> <h1>heading 5</h1> <p> paragraph ...</p> <h1>heading 6</h1> <p> paragraph ...</p> <h1>heading 7</h1> <p> paragraph ...</p> <h1>heading 8</h1> <p> paragraph ...</p> <h1>heading 9</h1> <p> paragraph ...</p> <h1>heading 10</h1> <p> paragraph ...</p> <h1>heading 11</h1> <p> paragraph ...</p> <h1>heading 12</h1> <p> paragraph ...</p> <h1>heading 13</h1> <p> paragraph ...</p> </div> </td> </tr> </table> </body> </html> |
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