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