Downloaded 113 times
![Ajax & Interaction with server (REST & SOAP)
function GetMember() {
$('input[type=button]').attr('disabled', true);
$("#MemberDetails").html('');
$("#MemberDetails").addClass("loading");
$.ajax({
type: "POST",
url: "Members.asmx/GetMemberDetails",
data: "{'MemberNumber': '" + $("#txt_id").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnGetMemberSuccess,
error: OnGetMemberError
});
}
function OnGetMemberSuccess(data, status) {
//jQuery code will go here...
}
function OnGetMemberError(request, status, error) {
//jQuery code will go here...
}](https://image.slidesharecdn.com/advjquerymobile-141119005433-conversion-gate01/85/Advanced-JQuery-Mobile-tutorial-with-Phonegap-156-320.jpg)
Uploaded byRakesh Jha
Advanced JQuery Mobile tutorial with Phonegap
The document provides a comprehensive introduction to jQuery Mobile, explaining its purpose, installation, syntax, and features. It covers key concepts such as page layout, event methods, and content formatting, providing examples of the markup used. Additionally, it offers insights on using jQuery for handling HTML elements and creating interactive web applications.
More Related Content
![jQuery in the [Aol.] Enterprise](https://cdn.slidesharecdn.com/ss_thumbnails/jquery-aol-enterprise-101017175311-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
- 1. Introduction to JQueryMobile Rakesh Kumar Jha M.Tech, MBA
- 2. Contents Introduction tojQuery Mobile (jQM) Getting started with jQM -Downloading the Most Recent Version of jQuery Mobile -Proper Markup for Loading Framework JavaScript and CSS jQuery Mobile Page Structure -Page Anatomy: Header, Footer and Content Sections -Header and Footer Toolbars -Bundling Pages into a Single Document -Navigating Between Pages Applying Different Theme Swatches Page Initialization Events jQuery Mobile Page Components Basic Content Formatting List Views -Ordered and Unordered Lists -Inset Lists -Lists with Links -Nested Lists -Lists with Icons or Thumbnail Images -Split Button Lists -List Dividers -Search Filters Form Controls - check boxes, slider, etc.
- 3. Introduction to jQueryMobile (jQM) •jQuery is a JavaScript Library. •jQuery greatly simplifies JavaScript programming. •jQuery is easy to learn
- 4. Introduction to jQueryMobile (jQM) <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
- 5. jQuery Introduction •Thepurpose of jQuery is to make it much easier to use JavaScript on your website.
- 6. What is jQuery •jQuery is a lightweight, "write less, do more", JavaScript library. •The purpose of jQuery is to make it much easier to use JavaScript on your website.
- 7. What is jQuery •jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code
- 8. What is jQuery •The jQuery library contains the following features: –HTML/DOM manipulation –CSS manipulation –HTML event methods –Effects and animations –AJAX –Utilities
- 9. Why jQuery •ThejQuery library contains the following features: –Easy to use –Less LOC –Simplify code –Rich api
- 10. jQuery Install •Thereare several ways to start using jQuery on your web site. You can: –Download the jQuery library from jQuery.com –Include jQuery from a CDN, like Google
- 11. Downloading jQuery •Thereare two versions of jQuery available for downloading: –Production version - this is for your live website because it has been minified and compressed –Development version - this is for testing and development (uncompressed and readable code) http://jquery.com/download/
- 12. Downloading jQuery •ThejQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> <script src="jquery-1.11.1.min.js"></script> </head>
- 13. jQuery CDN •Ifyou don't want to download and host jQuery yourself, you can include it from a CDN (Content Delivery Network). <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head>
- 14. jQuery CDN <!DOCTYPEhtml> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 15. jQuery Syntax •WithjQuery you select (query) HTML elements and perform "actions" on them. •The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
- 16. jQuery Syntax •Basicsyntax is: $(selector).action() –A $ sign to define/access jQuery –A (selector) to "query (or find)" HTML elements –A jQuery action() to be performed on the element(s)
- 17. jQuery Syntax •Examples: –$(this).hide() - hides the current element. –$("p").hide() - hides all <p> elements. –$(".test").hide() - hides all elements with class="test". –$("#test").hide() - hides the element with id="test".
- 18. The Document ReadyEvent $(document).ready(function() { // jQuery methods go here... }); This is to prevent any jQuery code from running before the document is finished loading (is ready).
- 19. The Document ReadyEvent •It is good practice to wait for the document to be fully loaded and ready before working with it. •This also allows you to have your JavaScript code before the body of your document, in the head section.
- 20. The Document ReadyEvent •Here are some examples of actions that can fail if methods are run before the document is fully loaded: –Trying to hide an element that is not created yet –Trying to get the size of an image that is not loaded yet
- 21. The Document ReadyEvent •The jQuery team has also created an even shorter method for the document ready event: $(function(){ // jQuery methods go here... });
- 22.
- 23. The element Selector •All selectors in jQuery start with the dollar sign and parentheses: $(). •The jQuery element selector selects elements based on the element name. •You can select all <p> elements on a page like this:
- 24. jQuery selectors •jQueryselectors are one of the most important parts of the jQuery library •jQuery selectors allow you to select and manipulate HTML element(s) •jQuery selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes
- 25. jQuery selectors <!DOCTYPEhtml> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 26. The #id Selector •The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. •An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
- 27. The #id Selector •To find an element with a specific id, write a hash character, followed by the id of the HTML element: $("#test")
- 28. The #id Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button> </body> </html>
- 29. The .class Selector •The jQuery class selector finds elements with a specific class. •To find elements with a specific class, write a period character, followed by the name of the class: $(".test") •
- 30. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">This is a heading</h2> <p class="test">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 31. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("*").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 32. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $(this).hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 33. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p.intro").hide(); }); }); </script> </head> <body> <h2 class="intro">This is a heading</h2> <p class="intro">This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>
- 34. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("ul li:first").hide(); }); }); </script> </head> <body> <p>List 1:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <p>List 2:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <button>Click me</button> </body> </html>
- 35. The .class Selector <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("ul li:first-child").hide(); }); }); </script> </head> <body> <p>List 1:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <p>List 2:</p> <ul> <li>Coffee</li> <li>Milk</li> <li>Tea</li> </ul> <button>Click me</button> </body> </html>
- 36. Functions In aSeparate File •If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file. <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
- 37.
- 38. jQuery Event Methods •jQuery is tailor-made to respond to events in an HTML page.
- 39. What are Events? •All the different visitor's actions that a web page can respond to are called events. •An event represents the precise moment when something happens. •Examples: –moving a mouse over an element –selecting a radio button –clicking on an element
- 40. What are Events? Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload
- 41. jQuery Syntax ForEvent Methods •In jQuery, most DOM events have an equivalent jQuery method. •To assign a click event to all paragraphs on a page, you can do this:
- 42. jQuery Syntax ForEvent Methods $("p").click(); •The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! });
- 43. Commonly Used jQueryEvent Methods •$(document).ready() •click() •dblclick() •mouseenter() •mouseleave() •mousedown() •mouseup() •hover() •focus() •blur()
- 44. <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").dblclick(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you double-click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
- 45. jQuery Mobile PageStructure
- 46. Page Anatomy: Header,Footer and Content Sections
- 47. Header and FooterToolbars •Toolbar elements are often placed inside headers and footers - for "easy-access" navigation:
- 48. Header Bars •Theheader 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.
- 49. Header Bars <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">Search</a> </div> <div data-role="main" class="ui-content"> <p>Notice that we have added the CSS class of "ui-corner-all" and "ui-shadow" to the header buttons, to make them look a bit more desirable.</p> </div> </div> </body> </html>
- 50. Header Bars <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="header"> <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> <h1>Welcome To My Homepage</h1> </div> </body> </html>
- 51. Header Bars <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="header"> <h1>Welcome To My Homepage</h1> <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Search</a> </div> </body> </html>
- 52. Footer Bars •Thefooter 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: •The buttons in the footer are not centered by default. To fix this, simply use CSS: <div data-role="footer" style="text-align:center;">
- 53. Footer Bars <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">Search</a> </div> <div data-role="main" class="ui-content"> <p>The buttons are for demonstration purposes only, and will not have any effect.</p> <p>Notice that we have applied the CSS class of "ui-corner-all" and "ui-shadow" to the buttons in both the header and footer, to make them look more desirable.</p> </div> <div data-role="footer"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a> </div> </div> </body> </html>
- 54. Positioning Headers andFooters •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 –Fullscreen - 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
- 55. Positioning Headers andFooters <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Inline Header</h1> </div> <div data-role="main" class="ui-content"> <p><b>Tip:</b> To see the effect, try to resize the window if the scrollbar is not available.</p> <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p> </div> <div data-role="footer" data-position="inline"> <h1>Inline Footer</h1> </div> </div> </body> </html>
- 56. Navigating Between Pages •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
- 57. Navigating Between Pages <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> <div data-role="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Page Two</a></li> <li><a href="#">Search</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>My Content..</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> </body> </html>
- 58. Icons in NavigationButtons <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> <div data-role="navbar"> <ul> <li><a href="#" data-icon="home">Home</a></li> <li><a href="#" data-icon="arrow-r">Page Two</a></li> <li><a href="#" data-icon="search">Search</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>My Content..</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> </body> </html>
- 59. Active Buttons •Whena 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":
- 60. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active" data-icon="home">Home</a></li> <li><a href="#pagetwo" data-icon="arrow-r">Page Two</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>With the ui-btn-active class, notice that the Home button stays highlighted (selected).</p> <p>If you click on the Page Two, you will notice that none of the buttons are highlighted (selected).</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Welcome To My Homepage</h1> <div data-role="navbar"> <ul> <li><a href="#pageone" data-icon="home">Home</a></li> <li><a href="#" data-icon="arrow-r">Page Two</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>No buttons are pre-selected (highlighted) in this page..</p> <p>To get the selected look for each button that represents the page you are actually on, go back to our navbar tutorial and read the next step to find out how!</p> </div> <div data-role="footer"> <h1>My Footer</h1> </div> </div> </body> </html>
- 61. Applying Different ThemeSwatches
- 62. Applying Different ThemeSwatches •jQuery Mobile provides two different style themes, "a" and "b" - each with different colors for buttons, bars, content blocks, and so on.
- 63. Applying Different ThemeSwatches •To customize the look of your application, use the data-theme attribute, and assign the attribute with a letter: <div data-role="page" data-theme="a|b">
- 64. Theme a <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone" data-theme="a"> <div data-role="header"> <h1>Page Header</h1> </div> <div data-role="main" class="ui-content"> <p>Some Text..</p> <a href="#">A Standard Text Link</a> <a href="#" class="ui-btn">Link Button</a> <p>A List View:</p> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">Adele</a></li> <li><a href="#">Billy</a></li> </ul> <label for="fullname">Input Field:</label> <input type="text" name="fullname" id="fullname" placeholder="Name.."> <label for="switch">Toggle Switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="on">On</option> <option value="off" selected>Off</option> </select> </div> <div data-role="footer"> <h1>Page Footer</h1> </div> </div> </body> </html>
- 65. Theme a <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone" data-theme="b"> <div data-role="header"> <h1>Page Header</h1> </div> <div data-role="main" class="ui-content"> <p>Some Text..</p> <a href="#">A Standard Text Link</a> <a href="#" class="ui-btn">Link Button</a> <p>A List View:</p> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">Adele</a></li> <li><a href="#">Billy</a></li> </ul> <label for="fullname">Input Field:</label> <input type="text" name="fullname" id="fullname" placeholder="Name.."> <label for="switch">Toggle Switch:</label> <select name="switch" id="switch" data-role="slider"> <option value="on">On</option> <option value="off" selected>Off</option> </select> </div> <div data-role="footer"> <h1>Page Footer</h1> </div> </div> </body> </html>
- 66.
- 67. jQuery Mobile Pages <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>I Am Now A Mobile Developer!!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 68. jQuery Mobile Pages •The data-role="page" is the page displayed in the browser •The data-role="header" creates a toolbar at the top of the page (often used for title or search buttons) •The data-role="main" defines the content of the page, like text, images, buttons, forms, etc. •The "ui-content" class adds extra padding and margin inside the page content •The data-role="footer" creates a toolbar at the bottom of the page •Inside these containers, you can add any HTML elements - paragraphs, images, headings, lists, etc.
- 69. Adding Pages injQuery 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:
- 70. Adding Pages injQuery Mobile <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome! If you click on the link below, it will take you to Page Two.</p> <a href="#pagetwo">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>This is Page Two. If you click on the link below, it will take you to Page One.</p> <a href="#pageone">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 71. Using Pages asDialogs •A dialog box is a type of window used to show special information or request input. •To create a dialog box that opens when a user taps on a link, add data-dialog="true" to the page you want displayed as a dialog:
- 72. Using Pages asDialogs <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome!</p> <a href="#pagetwo">Go to Dialog Page</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>I'm A Dialog Box!</h1> </div> <div data-role="main" class="ui-content"> <p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p> <a href="#pageone">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer Text In Dialog</h1> </div> </div> </body> </html>
- 73.
- 74. jQuery Mobile ListViews •List views in jQuery Mobile are standard HTML lists; ordered (<ol>) and unordered (<ul>). •To create a list, apply the data-role="listview" to the <ol> or <ul> element. To make the items tappable, specify a link inside each list item (<li>):
- 75. jQuery Mobile ListViews <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>Ordered List:</h2> <ol data-role="listview"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ol> <h2>Unordered List:</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> </div> </div> </body> </html>
- 76. jQuery Mobile ListViews •To style your lists with rounded corners and some margin, use the data-inset="true" attribute:
- 77. jQuery Mobile ListViews <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>A standard list:</h2> <ul data-role="listview"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul><br> <h2>List with data-inset="true":</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> </div> </div> </body> </html>
- 78. List Dividers •Listdividers are used to organize and group items into categories/sections. •To specify a list divider, add the data-role="list- divider" attribute to an <li> element:
- 79. List Dividers <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>List Dividers</h2> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Europe</li> <li><a href="#">Norway</a></li> <li><a href="#">Germany</a></li> <li data-role="list-divider">Asia</li> <li><a href="#">India</a></li> <li><a href="#">Thailand</a></li> <li data-role="list-divider">Africa</li> <li><a href="#">Zimbabwe</a></li> <li><a href="#">Uganda</a></li> </ul> </div> </div> </body> </html>
- 80. List Dividers •Ifyou have an alphabetically list, (for example a phone book) jQuery Mobile automatically adds appropriate dividers by setting the data- autodividers="true" attribute on the <ol> or <ul> element:
- 81. List Dividers <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>My Phonebook</h2> <ul data-role="listview" data-autodividers="true" data-inset="true"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Albert</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Cameron</a></li> <li><a href="#">Chloe</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Diana</a></li> <li><a href="#">Gabriel</a></li> <li><a href="#">Glen</a></li> <li><a href="#">Ralph</a></li> <li><a href="#">Valarie</a></li> </ul> <p>The data-autodividers="true" attribute creates dividers where it is appropriate with uppercased first letters of the item's text.</p> </div> </div> </body> </html>
- 82. jQuery Mobile ListContent
- 83. jQuery Mobile ListIcons •The default icon for each list item containing a link is "carat-r" (right arrow). •To change this to another icon, use the data- icon attribute on the list item you want to modify:
- 84. jQuery Mobile ListIcons <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>List Icons:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">Default is right arrow</a></li> <li data-icon="plus"><a href="#">data-icon="plus"</a></li> <li data-icon="minus"><a href="#">data-icon="minus"</a></li> <li data-icon="delete"><a href="#">data-icon="delete"</a></li> <li data-icon="location"><a href="#">data-icon="location"</a></li> <li data-icon="false"><a href="#">data-icon="false"</a></li> </ul> </div> </div> </body> </html>
- 85. jQuery Mobile ListIcons data-icon="false" will remove the icon •To add a standard 16x16px icon to your list, add an <img> element inside the link with a class of "ui-li-icon":
- 86. jQuery Mobile ListIcons <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>List With Icons:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
- 87. jQuery Mobile ListThumbnails <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>List With Icons:</h2> <ul data-role="listview" data-inset="true"> <li><a href="#"><img src="us.png" alt="USA" class="ui-li-icon">USA</a></li> <li><a href="#"><img src="gb.png" alt="Great Britain" class="ui-li-icon">Great Britain</a></li> <li><a href="#"><img src="finland.png" alt="Finland" class="ui-li-icon">Finland</a></li> <li><a href="#"><img src="germany.png" alt="Germany" class="ui-li-icon">Germany</a></li> <li><a href="#"><img src="france.png" alt="France" class="ui-li-icon">France</a></li> </ul> </div> </div> </body> </html>
- 88.
- 89. Dialogs Buttons andToolbars -Ways to Make a Button -Placing Icons on Your Buttons -Inline Buttons -Button Groupings -Navigation Toolbars Collapsible Content Event Handling -Responding to various events -Page related events Deployment using Phonegap (e.g. Android) Overview of Android Devt Environment Best Practices in jQM Hands-on exercises
- 90. Split Buttons •Tocreate a split list with a vertical divider bar, place two links inside the <li> element. •jQuery Mobile will automatically place the second link on the right side of the list with a right arrow-icon. And the text inside the link (if any) will be shown when a user hover over the icon:
- 91. Split Buttons <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>Split Buttons</h2> <ul data-role="listview" data-inset="true"> <li> <a href="#"> <img src="chrome.png"> <h2>Google Chrome</h2> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p> </a> <a href="#">Some Text</a> </li> <li> <a href="#"> <img src="firefox.png"> <h2>Mozilla Firefox</h2> <p>Firefox is a web browser from Mozilla. Released in 2004.</p> </a> <a href="#">Some Text</a> </li> </ul> </div> </div> </body> </html>
- 92. Count Bubbles •Countbubbles are used to display numbers associated with list items, such as messages in a mailbox:
- 93. Count Bubbles <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="main" class="ui-content"> <h2>My Email Account</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">Inbox<span class="ui-li-count">25</span></a></li> <li><a href="#">Sent<span class="ui-li-count">432</span></a></li> <li><a href="#">Trash<span class="ui-li-count">7</span></a></li> </ul> </div> </div> </body> </html>
- 94. Placing Icons onYour Buttons •Mobile applications are built upon the simplicity of tapping things you'd want displayed
- 95. Creating a Buttonin 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"
- 96. Creating a Buttonin jQuery Mobile <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="main" class="ui-content"> <input type="button" value="Button"> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 97. Navigation Buttons <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome!</p> <a href="#pagetwo" class="ui-btn">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Buttons</h1> </div> <div data-role="main" class="ui-content"> <p>Goodbye!</p> <a href="#pageone" class="ui-btn">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 98. Grouped Buttons •jQueryMobile 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:
- 99. Grouped Buttons <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Grouped Buttons</h1> </div> <div data-role="main" class="ui-content"> <div data-role="controlgroup" data-type="horizontal"> <p>Horizontal group:</p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div><br> <div data-role="controlgroup" data-type="vertical"> <p>Vertical group (default):</p> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a> </div> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 100. Back Buttons •Tocreate a Back button, use the data- rel="back" attribute (Note: this will ignore the anchor's href value)
- 101. Back Buttons <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Back Button Example</h1> </div> <div data-role="main" class="ui-content"> <a href="#pagetwo" class="ui-btn">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Back Button Example</h1> </div> <div data-role="main" class="ui-content"> <a href="#" class="ui-btn" data-rel="back">Go Back</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 102. Inline Buttons •Bydefault, 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:
- 103. Inline Buttons <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Normal / Default button:</p> <a href="#pagetwo" class="ui-btn">Go to Page Two</a> <p>Inline button:</p> <a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Inline buttons (will appear side by side as long as the screen lets it):</p> <a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a> <a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a> <a href="#pageone" class="ui-btn ui-btn-inline">Go to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 104.
- 105. Collapsible Content •Collapsiblesallow you to hide or show content, which is useful for storing parts of information.
- 106. Collapsible Content •Collapsiblesallow you to hide or show content, which is useful for storing parts of information. •To create a collapsible block of content, assign the data-role="collapsible" attribute to a container. Inside the container (div), add a header (H1-H6) or legend element, followed by any HTML markup you want to be expanded:
- 107. Collapsible Content <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Collapsible Blocks</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>Click me - I'm collapsible!</h1> <p>I'm the expanded content.</p> </div> </div> <div data-role="footer"> <h1>Insert Footer Text Here</h1> </div> </div> </body> </html>
- 108. Nested Collapsible Blocks •Collapsible content blocks can be nested (a collapsible inside a collapsible):
- 109. Nested Collapsible Blocks <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Nested Collapsible Blocks</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsible"> <h1>Click me - I'm collapsible!</h1> <p>I'm the expanded content.</p> <div data-role="collapsible"> <h1>Click me - I'm a nested collapsible block!</h1> <p>I'm the expanded content in the nested collapsible block.</p> </div> </div> </div> <div data-role="footer"> <h1>Insert Footer Text Here</h1> </div> </div> </body> </html>
- 110. Collapsible Sets •Collapsiblesets are collapsible blocks that are grouped together (often referred to as an accordion). When a new block is opened, all other blocks close. •Create several collapsible content blocks, and then wrap a new container with the data- role="collapsibleset" around the collapsible blocks:
- 111. Collapsible Sets <!DOCTYPEhtml> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Collapsible Sets</h1> </div> <div data-role="main" class="ui-content"> <div data-role="collapsibleset"> <div data-role="collapsible"> <h3>Click me - I'm collapsible!</h3> <p>I'm the expanded content.</p> </div> <div data-role="collapsible"> <h3>Click me - I'm collapsible!</h3> <p>I'm the expanded content.</p> </div> <div data-role="collapsible"> <h3>Click me - I'm collapsible!</h3> <p>I'm the expanded content.</p> </div> <div data-role="collapsible"> <h3>Click me - I'm collapsible!</h3> <p>I'm the expanded content.</p> </div> </div> </div> <div data-role="footer"> <h1>Insert Footer Text Here</h1> </div> </div> </body> </html>
- 112. Event Handling •Events= All the different visitor's actions that a web page can respond to.
- 113. jQuery Mobile Events •Events = All the different visitor's actions that a web page can respond to.
- 114. jQuery Mobile Events •You can use any standard jQuery events in jQuery Mobile. •In addition, jQuery Mobile also offers several events that are tailor-made for mobile-browsing: –Touch events - triggers when a user touches the screen (tap and swipe) –Scroll events - triggers when a user scrolls up and down –Orientation events - triggers when the device rotates vertically or horizontally –Page events - triggers when a page is shown, hidden, created, loaded and/or unloaded
- 115. Initializing jQuery MobileEvents •In jQuery, you have learned to use the document ready event to prevent any jQuery code from running before the document is finished loading (is ready):
- 116. Initializing jQuery MobileEvents <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("p").on("click",function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </body> </html>
- 117. Initializing jQuery MobileEvents •However, in jQuery Mobile, we use the pagecreate event, which occurs when the page has been been created in the DOM, but before enhancement is complete. •The second parameter ("#pageone") points to the id of the page to specify the event(s) for:
- 118. Initializing jQuery MobileEvents <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("click",function(){ $(this).hide(); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <p>If you click on me, I will disappear.</p> <p>Click me away!</p> <p>Click me too!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 119. jQuery Mobile TouchEvents •Touch events are triggered when the user touches the screen (page).
- 120. jQuery Mobile Tap •The tap event is triggered when the user taps on an element. •The following example says: When a tap event fires on a <p> element; hide the current <p> element:
- 121. jQuery Mobile Tap <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("tap",function(){ $(this).hide(); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The tap Event</h1> </div> <div data-role="main" class="ui-content"> <p>If you tap me, I will disappear.</p> <p>Tap me away!</p> <p>Tap me too!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 122. jQuery Mobile Taphold •The taphold event is triggered when the user taps on an element and hold for one second:
- 123. jQuery Mobile Taphold <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("taphold",function(){ $(this).hide(); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The taphold Event</h1> </div> <div data-role="main" class="ui-content"> <p>If you tap and hold me for one second, I will disappear.</p> <p>Tap and hold me!</p> <p>Tap and hold me too!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 124. jQuery Mobile Swipe •The swipe event is triggered when the user swipes over an element horizontally by more than 30px:
- 125. jQuery Mobile Swipe <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swipe",function(){ $("span").text("Swipe detected!"); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The swipe Event</h1> </div> <div data-role="main" class="ui-content"> <p>Swipe this text or in the box below.</p> <p style="border:1px solid black;height:200px;width:200px;"></p> <p><span style="color:red"></span></p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 126. jQuery Mobile Swipeleft •The swipeleft event is triggered when the user swipes over an element in the left direction by more than 30px:
- 127. jQuery Mobile Swipeleft <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swipeleft",function(){ alert("You swiped left!"); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The swipeleft Event</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px;">Swipe me in the left direction - do not swipe outside the border!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 128. jQuery Mobile Swiperight •The swiperight event is triggered when the user drags over an element in the right direction by more than 30px:
- 129. jQuery Mobile Swiperight <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $("p").on("swiperight",function(){ alert("You swiped right!"); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The swiperight Event</h1> </div> <div data-role="main" class="ui-content"> <p style="border:1px solid black;margin:5px;">Swipe me in the right direction - do not swipe outside the border!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 130. jQuery Mobile ScrollEvents •jQuery Mobile provides two scroll events: when scrolling starts and when scrolling stops.
- 131. jQuery Mobile Scrollstart •The scrollstart event is triggered when the user starts to scroll the page:
- 132. jQuery Mobile Scrollstart <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate","#pageone",function(){ $(document).on("scrollstart",function(){ alert("Started scrolling!"); }); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>The scrollstart Event</h1> </div> <div data-role="main" class="ui-content"> <p><b>Tip:</b> Try to to resize the window if the scrollbar is not available.</p> <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 133. jQuery Mobile orientationchangeEvent •The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.
- 134. jQuery Mobile orientationchangeEvent •The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally. $(window).on("orientationchange",function(){ alert("The orientation has changed!"); });
- 135. jQuery Mobile orientationchangeEvent •The callback function can have one argument, the event object, which returns the orientation of the mobile device: "portrait" (the device is held in a vertical position) or "landscape" (the device is held in a horizontal position):
- 136. jQuery Mobile orientationchangeEvent <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(event){ alert("Orientation changed to: " + event.orientation); }); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The orientationchange Event</h1> </div> <div data-role="main" class="ui-content"> <p>Try to rotate your device!</p> <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 137. jQuery Mobile orientationchangeEvent •Because the orientationchange event is bound to the window object, we can use the window.orientation property to, for example, set different styles to distinguish between portrait and landscape views:
- 138. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecreate",function(event){ $(window).on("orientationchange",function(){ if(window.orientation == 0) { $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"}); } else { $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"}); } }); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>The orientationchange Event</h1> </div> <div data-role="main" class="ui-content"> <p>Try to rotate your device!</p> <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 139. jQuery Mobile PageEvents •Events for handling pages in jQuery Mobile are divided into four categories: –Page Initialization - Before page creation, and when the page has been created –Page Load/Unload - When an external page is loading, unloading or encounters a failure –Page Transition - Before and after page transitions –Page Change - When pages are changed to or from, or encounters a failure
- 140. jQuery Mobile InitializationEvents •When a typical page in jQuery Mobile is initialized, it goes through two stages: –Before page creation –Page creation
- 141. jQuery Mobile InitializationEvents •Each stage has an event that can be used to insert or manipulate code before or when jQuery Mobile enhances the page. Event Description pagebeforecreate Triggered when the page is about to be initialized, and before jQuery Mobile has started enhancing the page pagecreate Triggered when the page has been created, but before enhancement is complete
- 142. jQuery Mobile InitializationEvents <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagebeforecreate",function(){ alert("pagebeforecreate event fired - the page is about to be initialized. jQuery Mobile has not begun enhancing the page"); }); $(document).on("pagecreate",function(){ alert("pagecreate event fired - the page has been created, but enhancement is not complete"); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <p>The page has been created and enhancement is done!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 143. jQuery Mobile LoadEvents •Page load events are for external pages. •Whenever an external page is loaded into the DOM, 2 events fire. •The first is pagecontainerbeforeload, and the second will either be pagecontainerload (success) or pagecontainerloadfailed (fail).
- 144. jQuery Mobile LoadEvents Event Description pagecontainerbeforeload Triggered before any page load request is made pagecontainerload Triggered after the page has been successfully loaded and inserted into the DOM pagecontainerloadfailed Triggered if the page load request fails. By default, it will show the "Error Loading Page" message
- 145. jQuery Mobile LoadEvents <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagecontainerload",function(event,data){ alert("pagecontainerload event fired!nURL: " + data.url); }); $(document).on("pagecontainerloadfailed",function(event,data){ alert("Sorry, requested page does not exist."); }); </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <a href="externalpage.html">External page</a> <br><br> <a href="externalnotexist.html">External page that does not exist</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 146. jQuery Mobile TransitionEvents •We can also use events for when we transition from one page to the next. •Page transitions involve two pages: a "from" page and a "to" page - these transitions animate the change from the current active page (fromPage) to a new page (toPage).
- 147. jQuery Mobile TransitionEvents Event Description pagebeforeshow Triggered on the "to" page, before the transition animation starts pageshow Triggered on the "to" page, after the transition animation completes pagebeforehide Triggered on the "from" page, before the transition animation starts pagehide Triggered on the "from" page, after the transition animation completes
- 148. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script> <script> $(document).on("pagebeforeshow","#pagetwo",function(){ alert("pagebeforeshow event fired - pagetwo is about to be shown"); }); $(document).on("pageshow","#pagetwo",function(){ alert("pageshow event fired - pagetwo is now shown"); }); $(document).on("pagebeforehide","#pagetwo",function(){ alert("pagebeforehide event fired - pagetwo is about to be hidden"); }); $(document).on("pagehide","#pagetwo",function(){ alert("pagehide event fired - pagetwo is now hidden"); }); </script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <p>Page One</p> <a href="#pagetwo">Go to Page Two</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="main" class="ui-content"> <p>Page Two</p> <a href="#pageone">Go Back to Page One</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
- 149. Ajax & Interactionwith server (REST & SOAP)
- 150. Ajax & Interactionwith server (REST & SOAP) •As jQuery becomes ever more widespread, we get asked a lot about integration with databases. •This article is target at those taking their first step into the world of jQuery and integrating pages with a Database. •The same principles could also be used with a different datasource such as XML.
- 151. Ajax & Interactionwith server (REST & SOAP) •The first method we will look at is where basic information is sent back to the client and displayed within a container. •We start by setting the standard Javascript blocks on the page.
- 152. Ajax & Interactionwith server (REST & SOAP) <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script type="text/javascript"> //jQuery code will go here... </script>
- 153. Ajax & Interactionwith server (REST & SOAP) •Next we set up the html that will be located in the html of the page itself
- 154. Ajax & Interactionwith server (REST & SOAP) <ul> <li> <label>Member ID</label> <input id="member_id" type="text" /> <input id="blnLoadMember" type="button" value="Get Details" /> </li> </ul> <div id="MemberDetails"></div>
- 155. Ajax & Interactionwith server (REST & SOAP) •Next we add the jQuery script elements. •As this is a process that will be called by some user interaction, we will need to add the script and also add an event to the button that we added to the page.
- 156. Ajax & Interactionwith server (REST & SOAP) function GetMember() { $('input[type=button]').attr('disabled', true); $("#MemberDetails").html(''); $("#MemberDetails").addClass("loading"); $.ajax({ type: "POST", url: "Members.asmx/GetMemberDetails", data: "{'MemberNumber': '" + $("#txt_id").val() + "'}", contentType: "application/json; charset=utf-8", dataType: "json", success: OnGetMemberSuccess, error: OnGetMemberError }); } function OnGetMemberSuccess(data, status) { //jQuery code will go here... } function OnGetMemberError(request, status, error) { //jQuery code will go here... }
- 157. GetMember •This isthe main stage in our process and is called by the button being clicked. Once called it follows a number of stages: –Sets the button to disabled - to prevent duplicate clicks –Clears the html in the MemberDetails div. –Adds the loading class to the div - this in reality would show a loading icon. –Calls the ajax element to process the data –Follows either the success or error results by calling the appropriate function.
- 158. GetMember •type -you would normally use Get or Post here depending on your requirement •url - the path to the web service asmx file and the web method you are going to call •data - in this instance the MemberNumber that we are going to pass •contentType, dataType - specifying we are going to use json formatting •success - what to do on success •error - what to do following an error
- 159. Displaying Collections •Sometimes,we require more than to display simple text and may wish to return the data in a format that can be displayed on multiple end clients. •In such cases, just the raw data is returned and formatted as determined by the client. •Firstly, we enter the core elements of the page again as before
- 160. Displaying Collections <scriptsrc="Scripts/jquery-1.4.1.js" type="text/javascript"> </script> <script type="text/javascript"> //jQuery code will go here... </script>
- 161. Displaying Collections •Nextwe set up the html that will be located in the html of the page itself <p> <input id="btnLoadAll" type="button" value="Get All Members" /> </p> <div id="MemberList"></div>
- 162. Displaying Collections functionGetAllMembers() { $("#MemberList").html(''); $("#MemberList").addClass("loading"); $.ajax({ type: "POST", url: "Members.asmx/GetAllMembers", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: OnGetAllMembersSuccess, error: OnGetAllMembersError }); } function OnGetAllMembersSuccess(data, status) { //jQuery code will go here... } function OnGetAllMembersError(request, status, error) { //jQuery code will go here... }
- 163. Displaying Collections •Nextwe set up the html that will be located in the html of the page itself <p> <input id="btnLoadAll" type="button" value="Get All Members" /> </p> <div id="MemberList"></div>