1. SEEM4570 Tutorial 5: jQuery + jQuery Mobile
Cao Yuewen

2. Recall points from previous lecture courses
What is jQuery and why is it?
jQuery is a JavaScript Library, which is the most popular and extendable among all JavaScript frameworks
How to add jQuery to your project?
Download jQuery library from jQuery.com (Recommend)
Include from CDN like google
jQuery Basic Syntax
$(selector).on(event, action)
$ define we use jQuery now
(selector) is used to find HTML elements based on their names, ids, classes, types, attributes and so on
event is the event that you want to monitor on those matched elements
action is what you want to do when the event is triggered
jQuery Animate
(Content Delivery Network)

3. jQuery Callback (complement)
Why this function?
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.
To prevent this, you can create a callback function.
Advantages:
A callback function is executed after the current effect is finished.
Typical Syntax:
$(selector).hide(speed,callback)

4. jQuery Chaining (Complement)
Why this function?
Until now we have been writing jQuery statements one at a time (one after the other). However, there is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).
Advantages:
Chaining allows us to run multiple jQuery methods (on the same element) within a single statement. This way, browsers do not have to find the same element(s) more than once.
The following example chains together the css(), slideUp() and slideDown() methods. The "p1" element first changes to red, then it slides up, and then it slides down:

5. jQuery Mobile What is jQuery Mobile? Why Use jQuery Mobile?
jQuery Mobile is a touch-optimized web framework for creating mobile web applications. It works on all popular smartphones and tablets.
jQuery Mobile is built on top of the jQuery library and uses HTML5, CSS3, JavaScript and AJAX to accomplish its work for laying out pages with minimal scripting.
Why Use jQuery Mobile?
jQuery Mobile takes the "write less, do more" to a new level: It automatically design web pages with an attractive and "easy-to-use" look, that will work the same way on all mobile devices.
Instead of writing one application for each mobile device or OS, jQuery Mobile only uses HTML, CSS and JavaScript, which is standard for all mobile web browsers.

6. jQuery Mobile Install Link to jQuery Mobile From a CDN
There are two ways to add jQuery Mobile to your web site:
Link to a jQuery Mobile library stored at a CDN
Link to a jQuery Mobile library stored at your computer
Link to jQuery Mobile From a CDN
As with jQuery core, there is nothing to install on your computer; you just include the following stylesheet (.css) and JavaScript libraries (.js) directly into your HTML page, to get jQuery Mobile to work:

7. jQuery Mobile Install Link to jQuery Mobile Stored at Your Computer
If you want to host the jQuery Mobile library yourself, you must first download it from jQuerymobile.com.
Then add the following code to your page:

8. jQuery Mobile Pages
A simple, standard jQuery Mobile page:

9. jQuery Mobile Pages Adding Pages in jQuery Mobile
In jQuery Mobile, you can create multiple pages in a single HTML file. Separate each page with a unique id and use the “href” attribute to link between them:

10. jQuery Mobile Buttons Creating a Button in jQuery Mobile
A button in jQuery Mobile can be created in three ways:
Using the <input> element
Using the <button> element with class="ui-btn”
Using the <a> element with class="ui-btn"

11. jQuery Mobile Buttons Navigation Buttons
To link between pages by buttons, use the <a> element with class="ui-btn":
Grouped Buttons
jQuery Mobile provides an easy way for grouping buttons together.
Use the data-role="controlgroup" attribute together with data-type="horizontal|vertical" in a container element, to specify whether to group buttons horizontally or vertically:

12. jQuery Mobile Buttons Inline Buttons Back Buttons
By default, buttons take up the full width of the screen. If you want a button that is only as wide as its content, or if you want two or more buttons to appear side by side, add the "ui-btn-inline" class:
Back Buttons
To create a Back button, use the data-rel="back" attribute (this will ignore the anchor's href value):

13. jQuery Mobile Toolbars
Toolbar elements are often placed inside headers and footers - for "easy-access" navigation:
Header Bars
The header is located at the top of the page and usually contain a page title/logo or one or two buttons (typically home, options or search).
You can add buttons to the left and/or to the right side in the header.
The code below, will add a "Home" button to the left and a "Search" button to the right of the header title text:

14. jQuery Mobile Toolbars
Footer Bars
The footer is located at the bottom of the page.
The footer is more flexible than the header - it is more functional and changeable throughout pages, and can therefore contain as many buttons as needed:
Positioning Headers and Footers
The header and the footer can be positioned in three ways:
Inline - Default. Headers and footers are inline with the page content
Fixed - Headers and footers will remain positioned at the top and bottom of the page
Full screen - Behaves like fixed; headers and footers will remain positioned at the top and bottom, but also over the page content. It is also slightly see-through

15. jQuery Mobile Navigation Bars
A navigation bar consists of a group of links that are aligned horizontally, typically within a header or footer
The bar is coded as an unordered list of links wrapped inside a <div> element that has the data-role="navbar" attribute:

16. jQuery Mobile Navigation Bars
Icons in Navigation Buttons
To add an icon to your navigation button, use the data-icon attribute:
Positioning Icons
Just like with the "ui-btn-icon-position" class, you can choose where the icon should be positioned in the navigation button: top, right, bottom or left.
The icon position is set on the navbar container - it is not possible to position each individual button link. Use the data-iconpos attribute to specify the position.

17. jQuery Mobile Navigation Bars
Active Buttons
When a link in the navbar is tapped/clicked, it gets the selected (pressed down) look.To achieve this look without having to tap the link, use the class="ui-btn-active":
For multiple pages, you might want the "selected" look for each button that represents the page the user is on. To do so, add the "ui-state-persist" class to your links, as well as the "ui-btn-active" class:

18. jQuery Mobile Panels
Panels in jQuery Mobile will slide out from the left or the right side of the screen with additional content.
To create a panel, add the data-role="panel" attribute to a <div> element and specify an id.
Add any HTML markup inside this <div> that you want to display in your panel:
Note: The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.

19. jQuery Mobile Panels Closing Panels
You can close the panel by clicking outside of it, by swiping or by pressing the Esc key. 
You can also close the panel by using a button: Just add a link inside the panel <div> with the data-rel="close" attribute attached to it. And for compatibility reasons, you should also specify the href attribute to point to the ID of the page the user should go to when closing the panel:

20. jQuery Mobile Panels Positioning Panels
By default, panels will appear on the left side of the screen. For the panel to appear on the right side of the screen, specify the data-position="right" attribute.

21. Resources

22. Question Time