Mibrt Blog | Blog píše Michal Brtníček, webdesign a Apple, html, css, php - jQuery pluginy, které musíte znát #1

Pro ty z vás, kteří nevědí, co to jQuery je, si stručně povíme, o co se jedná. JQuery je javascriptový framework, který vám usnadní práci s javascriptem při vývoji webových stránek. Je to knihovna, která se nalinkuje do hlavičky vašeho webu a umožní vám zlepšit interaktivitu či pomůže vytvořit takové prvky a efekty, které by jste museli jinak zdlouhavě programovat a ladit.

JQuery není jediný framework svého druhu, u mě se však stal nejoblíbenějším a při vývoji webu bych si bez něj práci nedokázal představit. V následujících několika článcích si ukážeme několik zajímavých jQuery pluginů, které by jste jako tvůrce webu neměli přehlédnout.

Při brouzdání internetem nacházím spoustu zajímavých řešení, které originálním a taky krativním způsobem přistupují k problémům, které se na webu objevují. Při stavbě webu se dá narazit třeba na problém s nedostačujícím místem pro obsah. Výsledek: použijí se například tzv. taby a tím na jednom místě může být umístěno několikanásobně více obsahu. Pluginy jQuery nemusí řešit jen problémy, ale jejich další funkcí je výrazné zpestření webové prezentace či aplikace a dodaní větší interakce s uživatele.

1. jQuery plugin pro Twitter

V dnešní době sociálních sítí nemůžeme začít jinak než Twitterem. Pomocí tohoto pluginu velice jednoduše vypíšete několik posledních tweetů z této oblíbené služby přímo na váš web či blog. Jak nasazení tak i konfigurace je velice jednochá.

Napojení pluginu

<link rel="stylesheet" href="jquery.twitter.css" type="text/css">
<script src="jquery.twitter.js" type="text/javascript">script>

HTML

<div id="twitter">div>

Nastavení

$(document).ready(function() {
  	$("#twitter").getTwitter({
  		userName: "jquery",
  		numTweets: 5,
  		loaderText: "Loading tweets...",
  		slideIn: true,
  		showHeading: true,
  		headingText: "Latest Tweets",
  		showProfileLink: true
  	});
  }); 

2. Table sorter - seřazení dat v tabulce

Pokud programujete nějakou aplikaci, jistě se vám bude hodit následující plugin, který z hlavičky tabulky udělá interaktivní prvek, pomocí něhož můžete snadno data v tabulce seřazovat podle různých krotérií. Tímto si danou aplikaci posunete zase o kousek blíže k desktopové aplikaci, což se dneska označuje pojmem RIA (Rich Internet Application). Více o RIA v některém z dalších článků, nyní se pojďme podívat na zmiňovaný table sorter:

Máme tabulku:

<table id="myTable">
	<thead>
		<tr>
			<th>Last Nameth>
			<th>First Nameth>
			<th>Emailth>
			<th>Dueth>
			<th>Web Siteth>
		tr>
	thead>
	<tbody>
		<tr>
			<td>Smithtd>
			<td>Johntd>
			<td>jsmith@gmail.comtd>
			<td>$50.00td>
			<td>http://www.jsmith.comtd>
		tr>
		<tr>
			<td>Bachtd>
			<td>Franktd>
			<td>fbach@yahoo.comtd>
			<td>$50.00td>
			<td>http://www.frank.comtd>
		tr>
		<tr>
			<td>Doetd>
			<td>Jasontd>
			<td>jdoe@hotmail.comtd>
			<td>$100.00td>
			<td>http://www.jdoe.comtd>
		tr>
		<tr>
			<td>Conwaytd>
			<td>Timtd>
			<td>tconway@earthlink.nettd>
			<td>$50.00td>
			<td>http://www.timconway.comtd>
		tr>
	tbody>
table> 

Do head vložíme

<script type="text/javascript" src="/path/to/jquery.tablesorter.js">script>

Inicializace a nastavení

// automatický sorter na všechny sloupce
$(document).ready(function() {
	$("#myTable").tablesorter();
});

// pouze první dva sloupce
$(document).ready(function() {
	$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );
});

3. Font sizer plugin - zvětšování textu

Zvětšování textu se dá provádět přímo v prohlížeči, ale většinou se jedná o funkci nežádoucí, protože se zvětší i text, který zvětšovat nechcete. Proto je daleko výhodnější tuto funkci zakomponovat přímo do webové stránky. Navíc je to velice snadné, stačí vyžít tohoto pluginu.

Do head vložíme

<script language="javascript" src="js/fontsizer.jquery.js">script>

HTML

Na místo, kde chceme ovládání velikosti písma, vložíme následující HTML:

<div class="fontResizer">
	<a href="#" class="smallFont">Aa>
	<a href="#" class="medFont">Aa>
	<a href="#" class="largeFont">Aa>
div>

Nastavení a inicializace

<script language="javascript"> 
	$(document).ready(function() {
		fontResizer('10px','11px','12px');
	});
script>

CSS

.fontResizer {
    display: block;
    position: absolute;
    top: 0; left: 0;
  }
  .fontResizer a {
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    text-align: center;
    border: 1px solid #ccc;
    line-height: 15px;
    color: #666;
    text-decoration: none;
  }
  .fontResizer a:hover {
 color: #000; text-decoration: none;
 }    


.smallFont {
 font-size: 9px;
 }
  .medFont {
 font-size: 13px;
 }
  .largeFont {
 font-size: 15px; 
}
  .curFont {
 background: #EEEEF7;
 }

Příště si přiblížíme jQuery UI a napíšeme si v něm malou drag & drop aplikaci.