JavaScript Tools and Framework Faves - ZendCon 2011

FooLabJavaScript Tools andFrameworks FavesZendCon - October 20, 2011Anna Filina

Anna Filina FooLab• PHP Quebec - user group, organizer• ConFoo - non for proﬁt Web conference, organizer• FooLab Inc. - IT solutions for businesses, vice-president• I write code 2

Content FooLab • jQuery and jQuery UI • Image cycle, popup and table sorter plugins • Highcharts • Plupload • 8 examples 3

FooLabjQueryFramework

Example: Votes FooLab http://conf.local/js-faves/jquery-dom.html 5

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

+1 FooLab +1var 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

Why jQuery FooLab • Easy to learn and to use • Fast and lightweight • Well documented • Complete and extensible • Big community 9

FooLabjQuery PluginsEasily add advanced functionality

Example: Image Cycle FooLab http://conf.local/js-faves/jquery-cycle.html 11

Code: Image Cycle FooLab<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"}); 12

Example: Popup FooLab http://conf.local/js-faves/jquery-popup.html 13

Code: Popup FooLab<a href="jquery.html" class="popup"> What is jQuery?</a>$("a.popup").nm(); 14

Example: Table Sorter FooLab http://conf.local/js-faves/jquery-tablesorter.html 15

Code: Table Sorter FooLab<table class="sortable"> <thead> <tr> <th>Country (airport)</th> <th>Speakers</th> <th>Fare</th> </tr> </thead> <tbody>...</tbody></table>$("table.sortable").tablesorter(); 16

Why jQuery Plugins FooLab • Most plugins are easy to use • Over 5,000 plugins • Speed up your development • Download JS, include and call function 17

FooLabjQuery UICommon UI widgets and behaviors

Example: Tabs FooLab http://conf.local/js-faves/jquery-tabs.html 19

Code: Tabs FooLab<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(); 20

Code: Tabs FooLab<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} 21

Example: Date FooLab http://conf.local/js-faves/jquery-datepicker.html 22

Code: Date FooLabDate: <input type="text" class="date">$("input.date").datepicker(); 23

Features: Date FooLab{ dateFormat: "d M, y", minDate: -20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide"} 24

Why jQuery UI FooLab • Better support than 3rd party plugins • Complex widgets made easy • Well documented • Themes 25

FooLabHighchartsInteractive charts

Example: Highcharts FooLab 27

Example: Highcharts FooLab http://conf.local/js-faves/highcharts.html 28

Code: Highcharts FooLab<div id="chart"></div>new Highcharts.Chart({ chart: { renderTo: "chart" }, xAxis: { categories: data }}); 29

Features: Highcharts FooLabtooltip: formatter: function() { return "<b>" + this.point.name + "</b>"; },plotOptions...select: { radius: 6, fillColor: "#da7700"} 30

Example: Highcharts FooLab http://www.highcharts.com/demo/combo-dual-axes 31

Why Highcharts FooLab • Works with jQuery, MooTools or Prototype framework • Well documented • Highly customizable • Can spice up any application with charts 32

FooLabPluploadUpload ﬁles

Example: Plupload FooLab http://conf.local/js-faves/plupload.html 34

Code: Plupload FooLab<div id="uploader"> You browser doesnt support HTML5, BrowserPlus orGoogle Gears.</div>$("#uploader").plupload({ runtimes: "html5,browserplus,gears", url: "upload.php", chunk_size: "1mb", rename: true, max_file_count: 20} 35

Why Plupload FooLab • Customizable • HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus • Upload multiple ﬁles • Upload by chunks • Queue widget with upload progress • Optional integration with jQuery UI 36

FooLabGo and use!And donate to your favorite projects

@aﬁlina FooLab • 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

JavaScript Tools and Framework Faves - ZendCon 2011

by Anna Filina on Oct 18, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 1

Statistics

JavaScript Tools and Framework Faves - ZendCon 2011 — Presentation Transcript