javascript tools and framework faves - zendcon 2011
DESCRIPTION
TRANSCRIPT
FooLab
JavaScript Tools and Frameworks FavesZendCon - October 20, 2011Anna Filina
FooLabAnna Filina
• PHP Quebec - user group, organizer
• ConFoo - non for profit Web conference, organizer
• FooLab Inc. - IT solutions for businesses, vice-president
• I write code
2
FooLabContent
• jQuery and jQuery UI
• Image cycle, popup and table sorter plugins
• Highcharts
• Plupload
• 8 examples
3
FooLab
jQueryFramework
FooLabExample: Votes
5
http://conf.local/js-faves/jquery-dom.html
FooLab
<a class="btnVote" href="#">-1</a><a class="btnVote" href="#">+1</a>
<span class="minus"></span><span class="neutral"></span><span class="plus"></span>
6
FooLab
$(".btnVote").click(onVoteClick);
function onVoteClick() { var votes = plus + minus; var minusWidth = Math.floor(minus/votes*100); $(".minus").css("width", minusWidth + "%"); $(".votes").html(votes); ...}
7
FooLabvar status = $('<span class="status">'+value+'</span>');$("body").append(status);
status.css({ "top": btn.offset().top, "left": btn.offset().left}).animate({ "top": "-=30", "opacity": 0}, 600, "linear", onStatusComplete);
function onStatusComplete() { status.remove();}
8
+1+1
FooLabWhy jQuery
• Easy to learn and to use
• Fast and lightweight
• Well documented
• Complete and extensible
• Big community
9
FooLab
jQuery PluginsEasily add advanced functionality
FooLabExample: Image Cycle
11
http://conf.local/js-faves/jquery-cycle.html
FooLabCode: Image Cycle
12
<div id="cycle"> <img src="img/image1.jpg" /> <img src="img/image2.jpg" /></div><div id="cycle-navigation"></div>
$("#cycle").cycle({ fx: "scrollLeft", speed: 500, timeout: 2000, pager: "#cycle-navigation"});
FooLabExample: Popup
13
http://conf.local/js-faves/jquery-popup.html
FooLabCode: Popup
14
<a href="jquery.html" class="popup"> What is jQuery?</a>
$("a.popup").nm();
FooLabExample: Table Sorter
15
http://conf.local/js-faves/jquery-tablesorter.html
FooLabCode: Table Sorter
16
<table class="sortable"> <thead> <tr> <th>Country (airport)</th> <th>Speakers</th> <th>Fare</th> </tr> </thead> <tbody>...</tbody></table>
$("table.sortable").tablesorter();
FooLabWhy jQuery Plugins
• Most plugins are easy to use
• Over 5,000 plugins
• Speed up your development
• Download JS, include and call function
17
FooLab
jQuery UICommon UI widgets and behaviors
FooLabExample: Tabs
19
http://conf.local/js-faves/jquery-tabs.html
FooLabCode: Tabs
20
<div id="tabs"> <ul> <li><a href="#tickets">Tickets</a></li> <li><a href="#new">New</a></li> </ul> <div id="tickets">...</div> <div id="new">...</div></div>
$("#tabs").tabs();
FooLabCode: Tabs
21
<li><a href="page.html">My tickets</a></li>
$tabs.tabs("add", "#tab-1", "Title");
$tabs.find(".ui-tabs-nav").sortable({ axis: "x"});
cookie: { expires: 7}
FooLabExample: Date
22
http://conf.local/js-faves/jquery-datepicker.html
FooLabCode: Date
23
Date: <input type="text" class="date">
$("input.date").datepicker();
FooLabFeatures: Date
24
{ dateFormat: "d M, y", minDate: -20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide"}
FooLabWhy jQuery UI
• Better support than 3rd party plugins
• Complex widgets made easy
• Well documented
• Themes
25
FooLab
HighchartsInteractive charts
FooLabExample: Highcharts
27
FooLabExample: Highcharts
28
http://conf.local/js-faves/highcharts.html
FooLabCode: Highcharts
29
<div id="chart"></div>
new Highcharts.Chart({ chart: { renderTo: "chart" }, xAxis: { categories: data }});
FooLabFeatures: Highcharts
30
tooltip: formatter: function() { return "<b>" + this.point.name + "</b>"; },plotOptions...select: { radius: 6, fillColor: "#da7700"}
FooLabExample: Highcharts
31
http://www.highcharts.com/demo/combo-dual-axes
FooLabWhy Highcharts
• Works with jQuery, MooTools or Prototype framework
• Well documented
• Highly customizable
• Can spice up any application with charts
32
FooLab
PluploadUpload files
FooLabExample: Plupload
34
http://conf.local/js-faves/plupload.html
FooLabCode: Plupload
35
<div id="uploader"> You browser doesn't support HTML5, BrowserPlus or Google Gears.</div>
$("#uploader").plupload({ runtimes: "html5,browserplus,gears", url: "upload.php", chunk_size: "1mb", rename: true, max_file_count: 20}
FooLabWhy Plupload
• Customizable
• HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus
• Upload multiple files
• Upload by chunks
• Queue widget with upload progress
• Optional integration with jQuery UI
36
FooLab
Go and use!And donate to your favorite projects
FooLab@afilina
• Please leave feedback:http://joind.in/3761 (slides will be posted here)
• jQuery: http://jquery.com/ http://jqueryui.com/
• jQuery Cycle: http://malsup.com/jquery/cycle/
• NyroModal: http://nyromodal.nyrodev.com/
• tablesorter: http://tablesorter.com/docs/
• Highcharts: http://highcharts.com/
• Plupload: http://plupload.com/
• Slides and code: http://foolab.ca/conf/zendcon-2011-jsfaves.zip
38