Pátek
14.
leden

Dynamická šířka pre tagu pomocí animace v jQuery

Kategorie: Webdesign, Komentáře: povoleny - 0
Dynamická šířka pre tagu pomocí animace v jQuery

Na internetu je k nalezení mnoho různých Syntax Highliterů, ale nevěřili byste, jak špatně se hledá nějaký skript nebo návod pro tvorbu animovaného <pre> tagu. Tak jsem se rozhodl zveřejnit stručný návod na pre tag animovaný pomocí jQuery.

Původně jsem přemýšlel, že si na web přidám nějaký klasický Syntax Highlighter, kterých je k nalezení hned několik a jsou poskytovány pod GPL licencí. Na konec jsem však dospěl k závěru, že se mi spíše bude hodit efektní a praktický pre tag. Tak jsem si vytvořil vlastní s využitím knihovny jQuery. Začneme rovnou s kódem:

<pre>
	<code>
		<!-- Sem můžeme vložit nějaký dlouhý zdrojový kód a zjistíme zda nám animace skutečně funguje. -->
	</code>
</pre>

<!-- nastavení stylu PRE tagu -->
<style>
pre	{
	width: 584px;
	overflow: hidden;
	padding: 0 0 0 16px;
	background: #fff url(back.png) left top;
	}
</style>

Tento stručný příklad ukazuje konstrukci, se kterou budeme pracovat. Máme zde dva tagy pro zápis zdrojových kódů, které používají neproporcionální písmo a mají "chování" textového editoru. A proč dva tagy? Protože budeme potřebovat měřit šířku obsahu a šířku rodičovského elementu. Ovšem pozor, ačkoliv to jsou tagy určené pro publikaci zdrojových kódů, tak je nutné špičaté závorky v kódu přepisovat pomocí entit &lt; a &gt;. Ještě je potřeba nastavit vlastnosti blokového prvku pre, kde musíme především nastavit přetékání overflow na hidden a případně nějaký padding. Pokud chceme podbarvené řádky, tak můžeme použít obrázkové pozadí pomocí background. Teď k jQuery:

$("pre").hover(function() {
	var contentwidth = $(this).contents().width();
	var blockwidth = $(this).width();		
	if(contentwidth > blockwidth) {
		$(this).animate({ width: contentwidth + "px"}, 250);
		}
	},
	function() {
   		$(this).animate({ width: "584px" }, 250);
		}
);

Rozeberme si jednotlivé části od základů. Na začátku kódu máme alias pro jQuery v podobě $, který nám zprostředkuje přístup ke knihovně. Následně definujeme pomocí selektoru, že chceme pracovat s objektem "pre" a také událost, kterou chceme použít. My zde použijeme událost .hover(), která nám v podstatě umožňuje simulovat třídu :hover z CSS, tedy nějakou reakci objektu při přejetí kurzoru myši přes objekt.

Ve vlastní funkci máme definovány dvě proměnné, se kterými budeme dále pracovat. Proměnná contentwidth obsahuje šířku <code> tagu uvnitř našeho bloku pre, kterou jsme získali použitím .contents() z objektu vytvořeného pomocí $(this). Tento selektor nám umožňuje pracovat s konkrétním DOM elementem, tedy tím tagem, nad kterým se nachází kurzor! Druhá proměnná blockwidth obsahuje šířku našeho pre tagu. A nyní již jen zbývá provést vlastní animaci, ovšem jen v tom případě, pokud je obsah opravdu větší než rozměr našeho bloku. Jistě, použijeme podmínku if, kde porovnáváme obě hodnoty a dle výsledku provedeme akci.

Řekněme, že je obsah v tagu code opravdu širší než v našem bloku. V tom případě použijeme animaci, kde nastavíme vlastnost, kterou chceme použít a časový interval animace, tedy obecně nějak takto .animate(vlastnost, [trvání]). Po podmínce následuje ještě jedna animace, která se nám postará o opětovné zmenšení bloku. V této druhé animaci musíme nastavit výchozí šířku našeho pre tagu, aby se nám vrátil do správných rozměrů a v případě, že nedošlo ani k jeho roztažení, tak se tím v podstatě nic nestane.

To by bylo vše. Jen na konec vám chci ještě připomenout, že musíte také knihovnu jQuery připojit do kódu stránky. Podrobnosti k jednotlivým částem kódu a obecně ke knihovně naleznete na stránkách jQuery.

HODNOCENÍ:

Sdílet