Your SlideShare is downloading. ×
JavaScript Tools and Framework Faves - ZendCon 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript Tools and Framework Faves - ZendCon 2011

2,004

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,004
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
44
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. FooLabJavaScript Tools andFrameworks FavesZendCon - October 20, 2011Anna Filina
  • 2. Anna Filina FooLab• PHP Quebec - user group, organizer• ConFoo - non for profit Web conference, organizer• FooLab Inc. - IT solutions for businesses, vice-president• I write code 2
  • 3. Content FooLab • jQuery and jQuery UI • Image cycle, popup and table sorter plugins • Highcharts • Plupload • 8 examples 3
  • 4. FooLabjQueryFramework
  • 5. Example: Votes FooLab http://conf.local/js-faves/jquery-dom.html 5
  • 6. 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
  • 7. 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
  • 8. +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
  • 9. Why jQuery FooLab • Easy to learn and to use • Fast and lightweight • Well documented • Complete and extensible • Big community 9
  • 10. FooLabjQuery PluginsEasily add advanced functionality
  • 11. Example: Image Cycle FooLab http://conf.local/js-faves/jquery-cycle.html 11
  • 12. 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
  • 13. Example: Popup FooLab http://conf.local/js-faves/jquery-popup.html 13
  • 14. Code: Popup FooLab<a href="jquery.html" class="popup"> What is jQuery?</a>$("a.popup").nm(); 14
  • 15. Example: Table Sorter FooLab http://conf.local/js-faves/jquery-tablesorter.html 15
  • 16. 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
  • 17. 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
  • 18. FooLabjQuery UICommon UI widgets and behaviors
  • 19. Example: Tabs FooLab http://conf.local/js-faves/jquery-tabs.html 19
  • 20. 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
  • 21. 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
  • 22. Example: Date FooLab http://conf.local/js-faves/jquery-datepicker.html 22
  • 23. Code: Date FooLabDate: <input type="text" class="date">$("input.date").datepicker(); 23
  • 24. Features: Date FooLab{ dateFormat: "d M, y", minDate: -20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide"} 24
  • 25. Why jQuery UI FooLab • Better support than 3rd party plugins • Complex widgets made easy • Well documented • Themes 25
  • 26. FooLabHighchartsInteractive charts
  • 27. Example: Highcharts FooLab 27
  • 28. Example: Highcharts FooLab http://conf.local/js-faves/highcharts.html 28
  • 29. Code: Highcharts FooLab<div id="chart"></div>new Highcharts.Chart({ chart: { renderTo: "chart" }, xAxis: { categories: data }}); 29
  • 30. Features: Highcharts FooLabtooltip: formatter: function() { return "<b>" + this.point.name + "</b>"; },plotOptions...select: { radius: 6, fillColor: "#da7700"} 30
  • 31. Example: Highcharts FooLab http://www.highcharts.com/demo/combo-dual-axes 31
  • 32. Why Highcharts FooLab • Works with jQuery, MooTools or Prototype framework • Well documented • Highly customizable • Can spice up any application with charts 32
  • 33. FooLabPluploadUpload files
  • 34. Example: Plupload FooLab http://conf.local/js-faves/plupload.html 34
  • 35. 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
  • 36. Why Plupload FooLab • Customizable • HTML4 , HTML5, Gears, Silverlight, Flash, BrowserPlus • Upload multiple files • Upload by chunks • Queue widget with upload progress • Optional integration with jQuery UI 36
  • 37. FooLabGo and use!And donate to your favorite projects
  • 38. @afilina 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

×