Lecture Presentation

Content

  • jQuery
  • jQuery Mobile
  • jQuery Plugins

JavaScript Libraries

  • Easy access to the capabilities of modern browsers
    • No magic. Everything could be done with plain JavaScript, well it IS.
  • Advantages
    • Handles browser differences internally
    • Touch and gesture support
    • User interface components (widgets)
    • Structuring your code (MVC and similar frameworks)
  • JavaScript can be used outside of the browser too
    • Don't mistake all JavaScript libraries, modules and components as runnable in web browsers. Some are also made for JavaScript frameworks like Node.js for other purposes than surfing the web.

How to use a JavaScript library

  • Add script element to your page
    <script src="backbone.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    
  • Download to your own site or use public CDN (Content Delivery Network)
    • By downloading, you supply the file from your site. More traffic, not reusable between sites but it will work when/if CDN is down (almost never). For mobile, latency issues can make downloading the best option but I usually recommend using public CDNs. Only the major libraries have public CDNs.
  • User interface libraries usually also requires linking in css files
  • Read the documentation

Some noteworthy JavaScript libraries

  • jQuery, jQuery UI, jQuery Mobile
  • Dojo
    • Lesser known but just as competent as jQuery. Has both UI components and mobile optimized parts.
  • Backbone
    • Framework for handling data, views, updates and more
  • Ember
    • Framework for handling data, views, updates and more

jQuery

  • The world's most used JavaScript library
  • Hides browser differences
  • Simplifies a lot of operations
    • Accessing elements
    • Responding to events
    • Changing the DOM
    • Animations before CSS3 transitions and animations using times and DOM changes
  • Popular plugin community
    • Many plugins exist for jQuery that adds further features. jQuery as a base for building plugins is important. Would be more difficult on the standard JavaScript/DOM.

jQuery Usage

  • Main object is jQuery or $
  • Access element(s) using CSS selectors
    $("#title").html("This is my title");
    $("ul li").css("display", none");
    
  • Respond to events
    $("ul.mainlist").bind("click", function(event) {
      alert("Got a click on element " + event.target);
    });
    $("ul li").live("touchstart", function(event) {
      alert("Got a click on element " + event.target);
    });
    

jQuery Mobile

  • Based on (requires) jQuery
  • User interface library
    • With simple html elements and attributes according to the specification a user interface optimized for mobile is injected into your page
  • DOM changes
    • jQuery Mobile injects its own elements to the DOM changes which can be difficult to grasp
  • Harder to customize
    • The purpose of jQuery Mobile is not to make too many customization. If such are needed, you might be better off building your user interface without the library.

jQuery Mobile Pages

  • Concept of pages within a single html file
  • Will automatically use ajax to dynamically load and display other html files
  • Specify "pages" within html
    <div data-role="page">
    
  • The first "page" will be displayed as default, and all other pages hidden

jQuery Mobile Page Linking

  • Link to other "page" with the same html file
    <div data-role="otherpage"></div>
    <a href="#otherpage">Go to other page</a>
    
  • Links to other html files and specific page
    <a href="secondfile.html#page3">Show page 3 in second file</a>
    <!-- Inside "secondfile.html" -->
    <div data-role="page3"></div>
    
  • Turn off jQuery handling the link (no ajax)
    <a href="secondfile.html" rel="external">Show without ajax</a>
    

jQuery Mobile Lists

  • Common concept in mobile interfaces
    • UITableView on native iOS
    • ListView on native Android
  • Specify a data-role for the ul tag
    <ul data-role="listview">
      <li><a href="#page2">Page 2</a></li>
    
  • A-tags inside of the LI-tag will automatically get additional styling

jQuery Mobile Events

  • New events that wouldn't normally exist
  • Mostly for page switching, since jQuery Mobile just shows/hides div elements
  • Must be caught with JavaScript (on-attributes on elements will not work)
  • Each time a page is shown
    $("#page2").bind("pageshow", function(event) {
      alert("Showing second page!");
    });
    

jQuery Mobile Forms

  • Just create an ordinary form
  • Some html tag combinations are preferable since they will be styled together
  • Text field
    <label for="name">Type your name:</label>
    <input type="text" id="name">
    

jQuery Mobile Dialogs

  • A "dialog" is just a different way/style of showing a "page"
  • Specify in the link to the "page"
    <a href="#namedialog" data-rel="dialog">Change name</a>
    
  • Specify on the "page"
    <div id="editdialog" data-role="dialog">
    </div>
    

jQuery Mobile Swipe Events

  • New events are easily added on jQuery foundation since they are always strings
  • Respond to touches
    $("#savebutton").bind("tap", function() { alert("Save!"); });
    
  • Other events
    • taphold - when touching and holding down for 750 ms (default)
    • swipe - when a horizontal drags occurs at least 30px and within 1 s
    • swipeleft, swiperight

jQuery Plugins

  • Just include additional script element for the plugin
  • Some plugins also requires css files
  • Some plugins are activated automatically
  • And/or they surface as extra functions to call on the jQuery object

jQuery Drag Drop Plugin

  • Handles both mouse and touch drag-drop the same
  • Download script source to your own site
  • Include script in html page
    <script src="jquery.drag-drop.plugin.js"></script>
    
  • Attach to container with elements to drag
    $("#box").dragdrop();