Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Javascript Tools and Frameworks Faves

Javascript Tools and Frameworks Faves

I will pick a few Javascript frameworks and libraries that I used on a recent project (jQuery, RaphaelJS, Plupload, etc.) I will show a quick overview of the possibilities of each and how they helped me build a mission-critical application.

Anna Filina

October 20, 2011
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. FooLab Anna 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
  2. FooLab Content • jQuery and jQuery UI • Image cycle,

    popup and table sorter plugins • Highcharts • Plupload • 8 examples 3
  3. 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
  4. FooLab var 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
  5. FooLab Why jQuery • Easy to learn and to use

    • Fast and lightweight • Well documented • Complete and extensible • Big community 9
  6. FooLab Code: 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" });
  7. FooLab Code: 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();
  8. FooLab Why jQuery Plugins • Most plugins are easy to

    use • Over 5,000 plugins • Speed up your development • Download JS, include and call function 17
  9. FooLab Code: 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();
  10. FooLab Code: 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 }
  11. FooLab Features: Date 24 { dateFormat: "d M, y", minDate:

    -20, maxDate: "+1M", numberOfMonths: 2, showAnim: "slide" }
  12. FooLab Why jQuery UI • Better support than 3rd party

    plugins • Complex widgets made easy • Well documented • Themes 25
  13. FooLab Code: Highcharts 29 <div id="chart"></div> new Highcharts.Chart({ chart: {

    renderTo: "chart" }, xAxis: { categories: data } });
  14. FooLab Features: Highcharts 30 tooltip: formatter: function() { return "<b>"

    + this.point.name + "</b>"; }, plotOptions...select: { radius: 6, fillColor: "#da7700" }
  15. FooLab Why Highcharts • Works with jQuery, MooTools or Prototype

    framework • Well documented • Highly customizable • Can spice up any application with charts 32
  16. FooLab Code: 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 }
  17. FooLab Why 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
  18. FooLab @afilina • Please leave feedback: http://joind.in/3761 (slides will be

    posted there) • 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