• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Tools and Framework Faves - ZendCon 2011
 

JavaScript Tools and Framework Faves - ZendCon 2011

on

  • 2,062 views

 

Statistics

Views

Total Views
2,062
Views on SlideShare
2,061
Embed Views
1

Actions

Likes
1
Downloads
43
Comments
0

1 Embed 1

http://a0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript Tools and Framework Faves - ZendCon 2011 JavaScript Tools and Framework Faves - ZendCon 2011 Presentation Transcript

    • FooLabJavaScript Tools andFrameworks FavesZendCon - October 20, 2011Anna Filina
    • 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
    • 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 files
    • 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 files • Upload by chunks • Queue widget with upload progress • Optional integration with jQuery UI 36
    • FooLabGo and use!And donate to your favorite projects
    • @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