Anglická verze
logolink

< Zpět na seznam lekcí

JavaScript a jQuery - doplňky

PHPObsah lekce:

  • Co jsou pluginy a kde je najít
  • Zobrazování fotografií pomocí pluginu "jCarousel"
  • Konstrukce menu pomocí pluginu "Apycom jQuery Menus"

Pluginy

Knihovna jQuery nabízí velké množství možností tvorby dynamických WWW stránek. Konstrukce některých aplikací v jQuery však může být docela náročná, proto existuje databáze různých rozšíření jQuery (tzv. pluginů), které nabízejí hotové implementace některých funkcí, u kterých stačí provést jen menší úpravy a můžeme je bez problémů použít na své WWW stránce (samozřejmě za dodržení licenčních podmínek - některé pluginy jsou poskytovány bezplatně, ale některé jsou placené).
Jednotlivé pluginy lze najít (i s podrobným popisem) například na oficiálních stránkách plugins.jquery.com.

Pluginy tedy jsou javascriptové programy, které používáme k dosažení nějakého efektu aniž bychom jej musel nějak složitě programovat. Výhodou použití je tedy rychlost a efektivitita práce. Pluginy bývají většinou vyzkoušené, odladěné (s minimem chyb) a pro nás jsou tedy mnohem vhodnější.

V této lekci si prakticky vyzkoušíme implementaci dvou pluginů: jCarousel a Apycom jQuery Menus.

Ukázka práce s pluginem jCarousel

Nyní si vytvoříme do našich stránek efekt podobný tomu, který můžeme například vidět na stránkách Komerční banky.
K docílení tohoto efektu existuje velké množství pluginů, my se podíváme na jCarousel.

Pomocí tohoto pluginu si vytvoříme jednoduchou fotogalerii, kde se nám budou automaticky postupně zobrazovat jednotlivé obrázky. Pro konstrukci naší stránky budeme potřebovat soubory s fotografiemi a plugin jCarousel včetně knihovny jQuery. Tyto soubory si můžete stáhnout v archivu jcarousel.zip.

Na stránce s ukázkou 'Carousel with autoscrolling' můžeme vidět, že efekt, který tento plugin umí, je velmi podobný tomu, čeho bychom chtěli dosáhnout. Na ukázce se však střídají za sebou 3 obrázky, my chceme aby se střídaly po jednom. Když se podíváme na možnou konfiguraci pluginu, můžeme vidět několik vlastností (property), které můžeme nastavit. Pokud nám není jasné co daná vlastnost ovlivňuje podle názvu, pomůže nám popisek.

Nás budou nejvíce zajímat následující vlastnosti:

  • scroll - počet položek k posunutí
  • auto - udává časový interval v sekundách, po kterém se položky posunou.
  • wrap - udává, co se stane, když se zobrazí všechny položky. Zda se vrátí z posledního na začátek ('last'), nebo bude pokračovat stále dokola ('circular').
  • initCallback - funkce, která se zavolá po inicializaci pluginu. Ukázka použití

Jak můžeme vidět v dokumentaci, tak každá položka je umístěna v netříděném seznamu (<ul><li>).
Do tagů <li> tedy máme dát obsah, který chceme, aby se nám postupně střídal. Pokud si otevřeme soubor galerie.html, uvidíme zde předchystanou právě takovou strukturu.

Výchozí obsah souboru galerie.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ukázka fotogalerie jCarousel</title>
</head>
<h1>Ukázka fotogalerie jCarousel</h1>
<ul>
<li><img src="foto/1.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/2.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/3.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/4.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/5.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/6.jpg" style="width: 300px; height:: 225px;" /></li>
</ul>
<body>
</body>
</html>

Naším dalším krokem bude přidání odkazů na potřebné soubory, ve kterých je program jCarousel definován. Jedná se o knihovnu jQuery, knihovnu jCarousel a css soubor se stylem (v archivu s jCarousel najdeme 2 základní styly: ie7 a tango, my využijeme styl tango).

Soubor se stylem tango, který budeme používat je již mírně upravený (oproti verzi na oficiální stránce jCarousel - jsou změněny velikosti jednotlivých prvků stránky tak, aby odpovídaly použitým obrázkům (když bychom chtěli použít jiné rozměry obrázku, je nutné upravit údaje o rozměrech jednotlivých bloků v souboru skins/tango/skin.css.

Nyní se však již přesuňme zpět k úpravám souboru galerie.html. Do hlavičky HTML souboru je nutné přidat odkazy na dvě javascriptové knihovny a jeden css soubor dle následující ukázky.

Doplnění odkazů na potřebné soubory
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ukázka fotogalerie jCarousel</title>

<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>

</head>
<h1>Ukázka fotogalerie jCarousel</h1>
<ul>
<li><img src="foto/1.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/2.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/3.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/4.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/5.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/6.jpg" style="width: 300px; height:: 225px;" /></li>
</ul>
<body>
</body>
</html>

Když bychom se pokusili upravenou stránku otevřít v prohlížeči, zjistili bychom, že se nic nezměnilo. Knihovny jsme totiž přidali, ale pro správnou funkčnost ještě potřebujeme, aby byla po otevření stránky spuštěna potřebná funkce.
Nejprve přidáme seznamu ul třídu stylu, konkrétně jcarousel-skin-tango, aby se aplikoval vzhled, dle potřeb knihovny jCarousel a k tagu ul také přidáme identifikátor foto, na který bude odkazováno v javascriptu.

Nyní již můžeme implementovat javascriptový kód, který se spustí po načtení stránky. Na níže uvedeném příkladu se jedná o značku script, která je zvýrazněna tučně. Pro událost ready na této stránce je přiřazena funkce, která seznamu s identifikátorem foto přiřadí funkci jCarousel.

Doplnění skriptu, který se spustí po načtení souboru
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ukázka fotogalerie jCarousel</title>
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#foto').jcarousel({
	
	});	
});
</script>

</head>
<h1>Ukázka fotogalerie jCarousel</h1>
<ul id="foto" class="jcarousel-skin-tango">
<li><img src="foto/1.jpg" style="width: 300px; height: 225px;" /></li>
<li><img src="foto/2.jpg" style="width: 300px; height: 225px;" /></li>
<li><img src="foto/3.jpg" style="width: 300px; height: 225px;" /></li>
<li><img src="foto/4.jpg" style="width: 300px; height: 225px;" /></li>
<li><img src="foto/5.jpg" style="width: 300px; height: 225px;" /></li>
<li><img src="foto/6.jpg" style="width: 300px; height: 225px;" /></li>
</ul>
<body>
</body>
</html>
Výchozí vzhled fotogalerie v jCarousel

V této fázi vypadá fotogalerie dle výše uvedeného obrázku. Avšak ještě bude nutné upravit chování této aplikace. Aktuálně se totiž snímky mění po třech a navíc, když dojdeme k poslednímu snímku, musíme překlikat zpět na začátek.

Nyní je třeba do programu doplnit nastavení doplňku jCarousel, které byly popsány v úvodu. Jedná se o hodnotu scroll, která nastavuje, o kolik obrázků se má galerie posunout při kliknutí na šipku. Ve výchozím nastavení je tato hodnota nastavena na 3. My ji změníme na 1.

Dále nastavíme vlastnost wrap, ta při nastavení hodnoty na circular umožní po zobrazení posledního obrázku zobrazit opět první obrázek. Po nastavení těchto hodnot bude funkce $(document).ready vypadat následovně:

Nastavení dalších vlastností jCarousel
...
<script type="text/javascript">
$(document).ready(function() {
	$('#foto').jcarousel({
		scroll: 1,
        wrap: 'circular'
	});	
});
</script>
...

Nyní se již obrázky mění po jednom a při přepínání jedním směrem tvoří nekonečnou smyčku.

Skript si však ještě dále rozšíříme. Budeme chtít, aby se obrázky měnily automaticky s určitou periodou, kterou zadáme v sekundách. Tu bude třeba zadat prostřednictvím parametru auto, dle následující ukázky.

Nastavení dalších vlastností jCarousel
...
<script type="text/javascript">
$(document).ready(function() {
	$('#foto').jcarousel({
		scroll: 1,
        wrap: 'circular',
        auto: 1
	});	
});
</script>
...

Po doplnění kódu a aktualizaci stránky se již fotografie budou měnit automaticky. Přesto zde máme šipky pro přepínání fotografií, které nejsou využity. Bylo by vhodné, aby pokud najedeme myší na obrázek, nebo použijeme tlačítko s šipkou, bylo automatické přehrávání zastaveno a mohli bychom obrázky přepínat opět automaticky. Pro tento účel budeme muset vytvořit funkci, kterou přiřadíme vlastnosti initCallback. Před popisem této funkce bude vhodné nejprve uvést kompletní kód výsledného skriptu.

Doplnění skriptu, který se spustí po načtení souboru
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ukázka fotogalerie jCarousel</title>
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>

<script type="text/javascript">

function foto_initCallback(carousel)
{
	carousel.buttonNext.bind('click',function() {carousel.startAuto(0);});
	carousel.buttonPrev.bind('click',function() {carousel.startAuto(0);});
	
	carousel.clip.hover(
		function() {carousel.stopAuto(); },
		function() {carousel.startAuto(); }
	);
	
}

$(document).ready(function() {
	$('#foto').jcarousel({
		scroll: 1,
        wrap: 'circular',
        auto: 1,
        initCallback: foto_initCallback
	});	
});
</script>

</head>
<h1>Ukázka fotogalerie jCarousel</h1>
<ul id="foto" class="jcarousel-skin-tango">
<li><img src="foto/1.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/2.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/3.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/4.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/5.jpg" style="width: 300px; height:: 225px;" /></li>
<li><img src="foto/6.jpg" style="width: 300px; height:: 225px;" /></li>
</ul>
<body>
</body>
</html>

Vlastnosti initCallback jsme přiřadili funkci, kterou jsme si pojmenovali foto_initCallback. V této funkci nejprve nadefinujeme událost carousel.clip.hover. V této události jsou definovány dvě funkce. První zastaví automatickou změnu obrázku po najetí myší na obrázek, druhá opět spustí automatickou změnu obrázku po jeho opuštění.

Dále je nutné nadefinovat další dvě událostí. Tlačítkům carousel.buttonNext a carousel.buttonPrev je pomocí funkce bind přiřazena událost click, která nastavuje rychlost přepínání snímků na 0, tj. vypíná automatickou změnu obrázku.

Tímto je ukázka použití jCarousel kompletní. Další možnosti implementace můžete nastudovat již samostatně v dokumentaci tohoto doplňku.

Konstrukce menu pomocí pluginu "Apycom jQuery Menus"

Druhým příkladem doplňku, který si ukážeme, je plugin "Apycom jQuery Menus". Tento plugin slouží pro jednoduchou konstrukci víceúrovňového menu.

Soubory pro tuto ukázku najdeme v archivu apycommenu.zip. V tomto souboru najdeme pouze jednu variantu vzhledu tohoto menu. Další můžeme získat na webu www.apycom.com".

Pokud rozbalíme tento archiv, najdeme zde css soubor s nastavením stylů, knihovnu jQuery, definice javascriptu pro menu, složku s potřebnými obrázky a soubor s ukázkovou implementací.

Doplnění skriptu, který se spustí po načtení souboru
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Style 01 (Yellow Green) - Menu by Apycom.com</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>

<style type="text/css">
* { margin:0;
    padding:0;
}
body { background:rgb(74,81,85); }
div#menu { margin:5px auto; }
div#copyright {
    font:11px 'Trebuchet MS';
    color:#fff;
    text-indent:30px;
    padding:40px 0 0 0;
}
div#copyright a { color:#9acd32; }
div#copyright a:hover { color:#fff; }
</style>

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Home</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#" class="parent"><span>Sub Item 1.1</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.1.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.1.2</span></a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                        <li><a href="#"><span>Sub Item 1.3</span></a></li>
                        <li><a href="#"><span>Sub Item 1.4</span></a></li>
                        <li><a href="#"><span>Sub Item 1.5</span></a></li>
                        <li><a href="#"><span>Sub Item 1.6</span></a></li>
                        <li><a href="#" class="parent"><span>Sub Item 1.7</span></a>
                            <ul>
                                <li><a href="#"><span>Sub Item 1.7.1</span></a></li>
                                <li><a href="#"><span>Sub Item 1.7.2</span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 2</span></a></li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
            </ul>
        </li>
        <li><a href="#" class="parent"><span>Product Info</span></a>
            <ul>
                <li><a href="#" class="parent"><span>Sub Item 1</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 1.1</span></a></li>
                        <li><a href="#"><span>Sub Item 1.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#" class="parent"><span>Sub Item 2</span></a>
                    <ul>
                        <li><a href="#"><span>Sub Item 2.1</span></a></li>
                        <li><a href="#"><span>Sub Item 2.2</span></a></li>
                    </ul>
                </li>
                <li><a href="#"><span>Sub Item 3</span></a></li>
                <li><a href="#"><span>Sub Item 4</span></a></li>
                <li><a href="#"><span>Sub Item 5</span></a></li>
                <li><a href="#"><span>Sub Item 6</span></a></li>
                <li><a href="#"><span>Sub Item 7</span></a></li>
            </ul>
        </li>
        <li><a href="#"><span>Help</span></a></li>
        <li class="last"><a href="#"><span>Contacts</span></a></li>
    </ul>
</div>

<div id="copyright"><a href="http://apycom.com/">jQuery Menu by Apycom</a></div>

</body>
</html>

Z výše uvedené ukázky vidíme, že implementace je velmi jednoduchá, stačí pouze odkázat na potřebné JS a CSS soubory a menu vytvořit ve formátu víceúrovňových odrážek. Bloku, ve kterém je menu umístěno je nutné přiřadit identifikátor menu a styl seznamu je nutné nastavit také na menu.

Jednoduchou úpravou této stránky si můžeme vyrobit menu vlastní. Pro naší ukázku použijeme strukturu menu na stránce IVT GJŠ Zlín. Po úpravě bude kód vypadat následovně:

Vytvoření vlastního menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Ukázka použití menu</title>
    <link type="text/css" href="menu.css" rel="stylesheet" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="menu.js"></script>
</head>
<body>

<style type="text/css">
* { margin:0;
    padding:0;
}
body { background:rgb(74,81,85); }
div#menu { margin:5px auto; }
div#copyright {
    font:11px 'Trebuchet MS';
    color:#fff;
    text-indent:30px;
    padding:40px 0 0 0;
}
div#copyright a { color:#9acd32; }
div#copyright a:hover { color:#fff; }
</style>

<div id="menu">
    <ul class="menu">
        <li><a href="#" class="parent"><span>Úvodní stránka</span></a></li>
        <li><a href="#" class="parent"><span>Informatika</span></a></li>
        <li><a href="#" class="parent"><span>Semináře z informatiky</span></a>
        	<ul>
            	<li><a href="#"><span>Úvodní informace</span></a></li>
             	<li><a href="#"><span>Soubory pro studenty</span></a></li>
         	</ul>
        </li>
        <li><a href="#" class="parent"><span>Grafika, design a multimédia</span></a>
        	<ul>
            	<li><a href="#"><span>Úvodní informace</span></a></li>
             	<li><a href="#"><span>Práce studentů</span></a></li>
                <li><a href="#"><span>Soubory pro studenty</span></a></li>
         	</ul>
        </li>
        <li><a href="#" class="parent"><span>ESF projekt</span></a></li>
        <li><a href="#" class="parent"><span>O autorech</span></a>
        	<ul>
            	<li><a href="#"><span>Michal Mikláš</span></a></li>
             	<li><a href="#"><span>Jaromír Světlík</span></a></li>
         	</ul>
        </li>
        <li><a href="#" class="parent"><span>Stránky školy</span></a></li>
  </ul>
</div>

<div id="copyright"><a href="http://apycom.com/">jQuery Menu by Apycom</a></div>

</body>
</html>

Po otevření stránky v prohlížeči bude výsledek vypadat následovně:

Výsledné menu

Zajímavé pluginy

Odkazy

Otázky

  1. Jaké jsou výhody používání pluginů?
  2. Zkuste najít další příklady užitečných pluginů do jQuery.
webdesign, xhtml, css, php - Mgr. Michal Mikláš