SEEM4570 Tutorial 5: jQuery + jQuery Mobile

1. SEEM4570Tutorial 5: jQuery + jQuery Mobile Cao Yuewen ywcao@se.cuhk.edu.hk 2018.10.18

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

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? • 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 • 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 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: BackButtons 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 • http://www.w3c-schools.com/jquerymobile/default.asp.htm

22. Question Time