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 Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>jsmith@gmail.com</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>fbach@yahoo.com</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>jdoe@hotmail.com</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>tconway@earthlink.net</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</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">A</a>  <a href="#" class="medFont">A</a>  <a href="#" class="largeFont">A</a>  </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.

Komentáře

Chci odebírat RSS komentářů

ChristianoErwen
tento čtenář není moc aktivní

16:26 - 28.10.09

 Chválim! Velice zaujímavý článok a pluginy určite využijem

Karel Kolář
tento čtenář není moc aktivní

16:40 - 28.10.09

 Konečně pěkný a srozumitelný článek o jQuery, ten už jsem jednou hledal, ale nic takového jsem nenašel.
Za tohle máš u mě velké plus :-) , moc se těším na další článek. Jenom menší oprava, máš tam "krotérií" namísto "kritérií".

Mr. Atsor
tento čtenář není moc aktivní

17:12 - 28.10.09

 Díky, super článek, docela jsem se přiučil ;)

mibrt
autor blogu

18:04 - 28.10.09

 #943 Karel Kolář: Díky

f3rny
tento čtenář není moc aktivní

18:50 - 28.10.09

 Super článek. Jsem rád, jakým směrem tento blog putuje. Takových je na českém internetu opravdu málo. Předem děkuji za více takových článků.

fremy
tento čtenář není moc aktivní

23:18 - 28.10.09

 Díky. jQuery bych se chtěl více věnovat, něco přiučit a obohatit tak i své projekty nejen blog ;)

pes502
tento čtenář není moc aktivní

23:12 - 29.10.09

 Tak i za mě - parádní článek! Jen tak dál! jQuery je nesmírně zajímavý framework a sám jsem již použil na svém webu (v administraci) některé funkce. Snad se i v dalším (dalších) dílech dozvíme nějáké super triky.

mibrt
autor blogu

15:58 - 01.11.09

 Díky za pochvaly, je to každopádně motivace pro psaní dalších a dalších článků na toto téma, které je mi nejbližší.

Carl114
tento čtenář není moc aktivní

19:17 - 21.02.10

 Takovýhle články mám rád. Jinak ta ukázka se zvětšováním textu ... mno ty externí odkazy už nefungují.

mibrt
autor blogu

21:04 - 21.02.10

 #1083 Carl114: Díky za upozornění, pokusím se najít jiný zdroj

Michal Pelech
tento čtenář není moc aktivní

16:23 - 03.04.10

 Pěkný seznam užitečných pluginů, určitě se bude hodit, díky.

Vlož také svůj názor

nick (povinné)

e-mail (nezobrazuje se)

web

heslo

x zavřít

opište ověřovací kod z obrázku

Komentáře podporují gravatary.
Adresy začínající na "www" nebo "http://" budou automaticky převedeny na odkazy. Tyto odkazy prosím oddělujte mezerou, děkuji.
ENTER se naformátuje jako nový řádek