JavaScript Tools and Framework Faves - ZendCon 2011

2,570 views

Published on

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

No Downloads
Views
Total views
2,570
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
45
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×