Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript Tools and Framework Faves - ZendCon 2011

2,716 views

Published on

Published in: Technology, Design
  • Be the first to comment

JavaScript Tools and Framework Faves - ZendCon 2011

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

×