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.
Stáhněte si jQuery.
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á.
<link rel="stylesheet" href="jquery.twitter.css" type="text/css" /> <script src="jquery.twitter.js" type="text/javascript"></script>
<div id="twitter"></div>
$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
});
});
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:
<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>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
// 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]]} );
}
);
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.
<script language="javascript" src="js/fontsizer.jquery.js"></script>
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>
<script language="javascript"> $(document).ready(function() { fontResizer('10px','11px','12px'); }); </script>
.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.
tento čtenář není moc aktivní
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í".
tento čtenář není moc aktivníDíky, super článek, docela jsem se přiučil ;)
tento čtenář není moc aktivní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ů.
tento čtenář není moc aktivníDíky. jQuery bych se chtěl více věnovat, něco přiučit a obohatit tak i své projekty nejen blog ;)
tento čtenář není moc aktivní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.
autor blogu
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žší.
tento čtenář není moc aktivní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í.
tento čtenář není moc aktivníPěkný seznam užitečných pluginů, určitě se bude hodit, díky.
Freezy - 156 komentářů
Evča - 51 komentářů
Klima8 - 34 komentářů
Zde může být i vaše reklama
kontaktujte mne
Chválim! Velice zaujímavý článok a pluginy určite využijem