Publikované od frkosk

jQuery pluginy #1

jquery_logo_color_onwhiteV tomto článku sa budem venovať pluginom pre JavaScriptový framework jQuery.

jQery plugin: Organic Tabs

Veľmi často sa jQuery používa na vytvorenie takzvaných tabov. Špecialitou tohoto pluginu je, že animuje aj natiahnutie tabu ak je to potrebné.

Demo | Stiahnutie súborov | Zdroj: CSS-Tricks.com

HTML:

<div id="organic-tabs">
<ul id="explore-nav">
<li id="ex-featured"><a class="current" rel="featured" href="#">Featured</a></li>
<li id="ex-core"><a rel="core" href="#">Core</a></li>
<li id="ex-jquery"><a rel="jquerytuts" href="#">jQuery</a></li>
<li id="ex-classics" class="last"><a rel="classics" href="#">Classics</a></li>
</ul>
<div id="all-list-wrap">
<ul id="featured">
<li><a href="#">Full Page Background Images</a></li>
<li><a href="#">Designing for WordPress</a></li>
<!-- More... --></ul>
<ul id="core">
<li><a href="#">The VERY Basics of HTML &amp; CSS</a></li>
<li><a href="#">Classes and IDs</a></li>
<!-- More... --></ul>
<ul id="jquerytuts">
<li><a href="#">Anything Slider jQuery Plugin</a></li>
<li><a href="#">Moving Boxes</a></li>
<!-- More... --></ul>
<ul id="classics">
<li><a href="#">Top Designers CSS Wishlist</a></li>
<li><a href="#">What Beautiful HTML Code Looks Like</a></li>
<!-- More... --></ul>
</div>
<!-- END List Wrap --></div>
<!-- END Organic Tabs -->

CSS

ul { list-style: none; }
ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
ul li a:hover { background: #fe4902; color: white; }
ul li:last-child a { border: none; } #organic-tabs { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; } #explore-nav { overflow: hidden; margin: 0 0 10px 0; }
#explore-nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#explore-nav li.last { margin-right: 0; }
#explore-nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#explore-nav li a:hover { background-color: #111; } #jquerytuts, #core, #classics { display: none; } #explore-nav li#ex-featured a.current, ul#featured li a:hover { background-color: #0575f4; color: white; }
#explore-nav li#ex-core a.current, ul#core li a:hover { background-color: #d30000; color: white; }
#explore-nav li#ex-jquery a.current, ul#jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#explore-nav li#ex-classics a.current, ul#classics li a:hover { background-color: #FE4902; color: white; }

JavaScript

$(function() { $("#explore-nav li a").click(function() { // Figure out current list via CSS class var curList = $("#explore-nav li a.current").attr("rel"); // List moving to var $newList = $(this); // Set outer wrapper height to height of current inner list var curListHeight = $("#all-list-wrap").height(); $("#all-list-wrap").height(curListHeight); // Remove highlighting - Add to just-clicked tab $("#explore-nav li a").removeClass("current"); $newList.addClass("current"); // Figure out ID of new list var listID = $newList.attr("rel"); if (listID != curList) { // Fade out current list $("#"+curList).fadeOut(300, function() { // Fade in new list on callback $("#"+listID).fadeIn(); // Adjust outer wrapper to fit new list snuggly var newHeight = $("#"+listID).height(); $("#all-list-wrap").animate({ height: newHeight }); }); } // Don't behave like a regular link return false; }); });

jQuery plugin: Table sorter

Tento plugin urobí z hlavičky tabuľky prvok ktorým si viete zvoliť radenie dát v tabuľke.

Demo | Stiahnutie súborov | Zdroj: Tablesorter.com

HTML:

<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>

JavaScript

// 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]]} );
}
);

jQuery plugin: Shadowbox

Multimediálny prehliadač. použitelný na zobrazenie galérií, videí alebo stránok v popup okne.

Stiahnutie súborov | Zdroj: Shadowbox-js.com

Príklad použitia HTML:

<link rel="stylesheet" type="text/css" href="shadowbox.css" />
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
// let's skip the automatic setup because we don't have any
// properly configured link elements on the page
skipSetup: true,
// include the html player because we want to display some html content
players: ["html"]
});
window.onload = function(){
// open a welcome message as soon as the window loads
Shadowbox.open({
content: '<div id="welcome-msg">Welcome to my website!</div>',
player: "html",
title: "Welcome",
height: 350,
width: 350
});
};
</script>