(MBL201 version 1.2.0)

jQuery Mobile

(MBL201 version 1.2.0)

Copyright Information

© Copyright 2013 Webucator. All rights reserved.

The Authors

Brian Hoke

Brian Hoke is Principal of Bentley Hoke, a web consultancy in Syracuse, New York.The firm serves the professional services, education, government, nonprofit, andretail sectors with a variety of development, design, and marketing services. Coretechnologies for the firm include PHP and Wordpress, JavaScript and jQuery, Rubyon Rails, and HTML5/CSS3. Previously, Brian served as Director of Technology,Chair of the Computer and Information Science Department, and Dean of Studentsat Manlius Pebble Hill School, an independent day school in DeWitt, NY. Beforethat, Brian taught at Insitut auf dem Rosenberg, an international boarding schoolin St. Gallen, Switzerland. Brian holds degrees from Hamilton and Dartmouthcolleges.

Brian Love (Editor)

Brian has been building web applications since 13, and hasn't stopped since. Anadvocate for using the latest technologies with proven coding methodologies iswhy the code he produces is simultaneously sophisticated and elegant.The resultingapplications are world class examples of form and function. A graduate from theInstitute of Technology, the State University of New York at Utica/Rome, with anundergraduate degree in Computer Information Systems and a master's degree inBusiness Administration, Brian provides a rare and valuable ability to combine hispassion for technology with his business expertise.Hamlet Javier (Editor)

Hamlet Javier earned his B.S. in Computer Science from Fredonia State University.He has been developing websites and web applications for 10 years. He is an

EVALUATION COPY

Unauthorized reproduction or distribution is prohibited.

expert in ColdFusion and JavaScript and has worked extensively with JavaScriptframeworks, including jQuery and the YUI Library.

Accompanying Class Files

This manual comes with accompanying class files, which your instructor or salesrepresentative will point out to you. Most code samples and exercise and solutionfiles found in the manual can also be found in the class files at the locations indicatedat the top of the code listings.

Due to space limitations, the code listings sometimes have line wrapping, whereno line wrapping occurs in the actual code sample. This is indicated in the manualusing three greater than signs: >>> at the beginning of each wrapped line.

In other cases, the space limitations are such that we have inserted a forced linebreak in the middle of a word. When this occurs, we append the following symbolat the end of the line before the actual break: »»

EVALUATION COPY


Table of Contents1. What Is jQuery Mobile?.........................................................................1

Introducing jQuery Mobile.................................................................................1What jQuery Is Not....................................................................................1Supported Platforms.................................................................................2Progressive Enhancement........................................................................2Accessibility Support.................................................................................3A First Example.........................................................................................3jQuery Mobile WYSIWYG Builders...........................................................6

Exercise 1: Building Your First jQuery Mobile Page..........................................8HTML5....................................................................................................12New HTML5 Features.............................................................................12A First Example.......................................................................................15HTML5 Forms.........................................................................................18HTML5 Form Example............................................................................23CSS3 Media Queries..............................................................................23

2. Getting Started with jQuery................................................................31

Getting Started With jQuery Mobile................................................................31A Basic Page Template...........................................................................31A Basic Page Template...........................................................................32

Exercise 2: Nan & Bob's Online......................................................................36Linking between Pages...........................................................................40Page Transitions......................................................................................46

Exercise 3: More Pages & Transitions for Nan & Bob's Online.......................48Buttons....................................................................................................54Dialogs....................................................................................................59

Exercise 4: Buttons & Dialogs for Nan & Bob's Online...................................63

3. Widgets and UI.....................................................................................71

User Interface Elements.................................................................................71Toolbars..................................................................................................71

Exercise 5: Adding Navbars............................................................................77Lists.........................................................................................................79

Exercise 6: Adding Lists..................................................................................87Collapsible Content.................................................................................90Grids.......................................................................................................92

Exercise 7: Adding Collapsile Content & Grids...............................................95Forms....................................................................................................100

Exercise 8: Adding Forms.............................................................................106

iVersion: 1.2.0. Printed: 2013-07-30.

Table of Contents

EVALUATION COPY


4. JavaScript & Events..........................................................................113

JavaScript & Events......................................................................................113jQuery Basics........................................................................................113Events...................................................................................................114Calling Event Handlers..........................................................................115

Exercise 9: Touch Events..............................................................................121Exercise 10: Scroll Events............................................................................125

Orientation............................................................................................128Refreshing the DOM.............................................................................131

Exercise 11: Adding Orientation Events........................................................132Configuring Defaults with JavaScript.....................................................136

5. Integration with the Phone...............................................................139

Integration with the Phone............................................................................139Calls, Emails & Texts.............................................................................139Custom Home Screen/Bookmark Icons................................................141The Geolocation API.............................................................................142How It Works.........................................................................................143Browser & Device Support....................................................................143JavaScript Implementation....................................................................143A Simple Example.................................................................................144Finding Nearby Places..........................................................................148

Exercise 12: Retrieving Weather Data..........................................................154Video.....................................................................................................159Video Formats.......................................................................................159Further Reading....................................................................................160

6. PhoneGap..........................................................................................163

PhoneGap.....................................................................................................163PhoneGap Build....................................................................................164Testing with Ripple................................................................................166A First Example.....................................................................................167Geolocation...........................................................................................170Accelerometer.......................................................................................173

Exercise 13: Adding & Searching Contacts..................................................177

7. The Theme Framework......................................................................183

The Theme Framework.................................................................................183Themes in jQuery Mobile......................................................................183

Exercise 14: Using Default Theme Swatches to Style Pages & Elements....186ThemeRoller.........................................................................................193Icons.....................................................................................................197Custom CSS.........................................................................................203Updating the Nan & Bob Site's Look.....................................................203

Exercise 15: Styling the Nan & Bob's Site....................................................206

© Copyright 2013 Webucator. All rights reserved.ii

Table of Contents

EVALUATION COPY


8. Plugins...............................................................................................213

Plugins..........................................................................................................213Why Plugins?........................................................................................213The jQuery UI Widget Factory...............................................................213

Exercise 16: The Listify Plugin......................................................................218Using Others' Plugins............................................................................224

Exercise 17: Implementing the ActionSheet Plugin......................................225

iiiVersion: 1.2.0. Printed: 2013-07-30.

Table of Contents

EVALUATION COPY


EVALUATION COPY


What Is jQuery Mobile?1.

In this lesson, you will learn...

1. What jQuery Mobile is, and isn't.2. jQuery Mobile's support for various devices and browsers.3. How jQuery Mobile adopts the progressive enhancement strategy.4. How jQuery Mobile offers support for accessibility.5. How new features from HTML5 and CSS3 apply to mobile web development.

In this lesson, we will take a first look at jQuery Mobile: what it is, how it works,and how to begin building mobile-optimized web pages with it.

Introducing jQuery Mobile1.1

We as web developers and designers have always wrestled with the challenge ofmeeting the diverse needs of users who view our work on many different devices.Internet Explorer might render a page differently from Firefox or Opera - and don'tforget to account for older versions of the same browser. Connection speeds, screenresolutions, operating systems, use of screen readers - our code must work for allcases.

The explosive proliferation of smartphones and tablets over the past few years hasadded to our challenge. Screens are smaller, to be sure, and the differences betweendevices are greater than ever - and those devices come with new capabilities wedidn't see on desktops and laptops. Wouldn't it be nice if the code we write for agiven web page worked for a new Kindle Fire, an iPad, and a Windows Phone? Andif we could exploit the device's orientation, GPS, and accelerometer?

jQuery Mobile is a tool to address these challenge. It is a user-interface framework,built on top of the jQuery JavaScript framework. jQuery Mobile offers a "unifieduser interface system that works seamlessly across all popular mobile deviceplatforms, built on the rock-solid jQuery and jQuery UI foundation." For us, thatmeans we can write code that will work consistently for lots of devices, address theunique challenges of smartphones and tablets, and leverage new device capabilities.

For this course, we will be working with jQuery Mobile version 1.1, the currentstable version. Please note that future versions may change some of the API.

What jQuery Is Not

Keep in mind that jQuery Mobile isn't "jQuery for mobile". It isn't a replacementfor the jQuery library for mobile use; rather, it is a user-interface library built on

Page 1 of 227Version: 1.2.0. Printed: 2013-07-30.

What Is jQuery Mobile?

EVALUATION COPY


top of jQuery. You must include jQuery, as well as the jQuery Mobile stylesheet,to exploit its capabilities.

Does jQuery Mobile work for all devices - desktop, tablet, and mobile? jQueryMobile is certainly more mobile centric than most other frameworks; you'll have todecide if it works best for your site or application on desktops as well. Sites builtwith jQuery Mobile will certainly work on desktops; the library has been tested onall major desktop browsers. jQuery UI is a similar user-interface library for desktops,also built on top of jQuery. Learn more at jqueryui.com (http://jqueryui.com/).

jQuery Mobile also isn't an SDK to leverage native phone capabilities. While writingnative phone apps with jQuery Mobile is possible (with PhoneGap, which we'll lookat later), it takes some extra work.

Supported Platforms

jQuery Mobile offers support for a wide range of platforms; they categorize browsersaccording to A-, B-, and C-level groupings, as below. A-level browsers can exploitfull functionality (though, as the docs (http://jquerymobile.com/demos/1.1.0-rc.2/docs/about/platforms.html) note, the "visual fidelity of the experience andsmoothness of page transitions are highly dependent on the CSS rendering capabilitiesof the device and platform so not all A grade experience will be pixel-perfect butthat's the nature of the web." See the jQuery Mobile docs for the current full list ofsupported devices (http://jquerymobile.com/gbs/).

jQuery Mobile Graded Browser SupportDetailsBrowser Grade

Full enhanced experience with Ajax-based animated pagetransitions

A-grade

Basic, non-enhanced HTML experience that is still functionalB-grade

Enhanced experience except without Ajax navigation featuresC-grade

Progressive Enhancement

Progressive Enhancement is a web-design strategy in which newerdevices/browsers/capabilities receive an enhanced version of our pages, while lesscapable devices/browsers still receive basic content and functionality. ProgressiveEnhancement emphasizes semantic markup, controlling presentation with externalstylesheets, and use of JavaScript to add functionality.

As the docs (http://jquerymobile.com/demos/1.1.0-rc.2/docs/about/features.html)state, jQuery Mobile's "[p]rogressive enhancement approach brings core contentand functionality to all mobile, tablet and desktop platforms and a rich, installed

© Copyright 2013 Webucator. All rights reserved.Page 2 of 227


EVALUATION COPY


http://jqueryui.com/

http://jquerymobile.com/demos/1.1.0-rc.2/docs/about/platforms.html

http://jquerymobile.com/demos/1.1.0-rc.2/docs/about/platforms.html

http://jquerymobile.com/gbs/

http://jquerymobile.com/gbs/

http://jquerymobile.com/demos/1.1.0-rc.2/docs/about/features.html

application-like experience on newer mobile platforms." As the A/B/C chart abovesuggests, high-functioning devices and browsers get the good stuff - Ajax pagetransitions, native-app-like functionality, the "full enhanced experience" - whileolder or less capable devices and browsers still work, to the degree available. That'sa huge help to us as developers: we can exploit new features and cool devicecapabilities without alienating users with older, less capable devices.

Accessibility Support

Web accessibility refers to the process of making websites useable for people whoemploy screen readers and other assistive technologies. A person with limited or nosight might, for example, uses the iPhone's VoiceOver (http://www.apple.com/accessibility/iphone/vision.html) to read aloud the contents of a web page.

With its focus on standard, semantic markup, jQuery Mobile provides a solidfoundation for creating accessible sites. For newer browsers, many jQuery Mobilecomponents "leverage techniques such as focus management, keyboard navigation,and HTML attributes" specified by accessibility standards; see the jQuery Mobiledocs (http://jquerymobile.com/test/docs/about/accessibility.html) for moreinformation.



EVALUATION COPY


http://www.apple.com/accessibility/iphone/vision.html

http://www.apple.com/accessibility/iphone/vision.html

http://jquerymobile.com/test/docs/about/accessibility.html

http://jquerymobile.com/test/docs/about/accessibility.html

A First Example

Let's take a first look at some code. When viewed on a smartphone, the pageWhatIsjQueryMobile/Demos/helloworld/index.html looks something like this:

Open the page in a desktop browser and with a smartphone or emulator. Open upthe page in a file editor, too, to check out the code.



EVALUATION COPY


Code Sample

WhatIsjQueryMobile/Demos/helloworld/index.html

<!DOCTYPE html>1.<html> 2. <head> 3. <meta charset="utf-8"> 4. <meta name="viewport" content="width=device-width, initial-scale=1">5.

<title>jQuery Mobile: Hello World</title> 6.<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-

rc.2/jquery.mobile-1.1.0-rc.2.min.css" /> 7.

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 8. <script src="http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-

1.1.0-rc.2.min.js"></script>9.

</head> 10. <body> 11.  12.

<div data-role="page"> 13.  14. <div data-role="header" data-position="inline"> 15. <h1>Hello World</h1> 16. </div> 17. <div data-role="content"> 18. <p>A first jQuery Mobile page.</p> 19.  20. <a href="http://jquerymobile.com/demos/1.1.0-rc.2/" data-

role="button">jQuery Mobile Docs</a> 21.

</div> 22. </div> 23. </body> 24.</html>25.

Code Explanation

While we'll get into lots more detail about code later in this course, we can pointout a few things now. First, note that the page is a valid HTML5 document. TheDOCTYPE is html. The divs on the page make use of the HTML5 data attribute.The outermost div, for instance, has attribute data-role="page", which issignificant for jQuery Mobile; we'll learn later in the course about divs as pages.

Second, note that the page links to some external resources - the two JavaScript filesand one stylesheet are hosted at code.jquery.com, with nothing other than"index.html" on our end.



EVALUATION COPY


Let's check jQuery Mobile's progressive enhancement features. Consider thefollowing two screenshots, each showing WhatIsjQueryMobile/Demos/helloworld/index.html in Firefox:

The top screenshot, with JavaScript on, shows a page similar to the smartphoneview. The bottom screenshot shows that the page still works without JavaScriptenabled: we don't get the nice styling, but the content is visible and the link worksfor users who don't have, or who have turned off, JavaScript.

jQuery Mobile WYSIWYG Builders

jQuery Mobile offers several what-you-see-is-what-you-get UI tools, allowing youto create pages from a drag-and-drop interface and, when finished, to download the



EVALUATION COPY


resulting code. Visit the Codiqua UI builder (http://jquerymobile.com/#try) on thejQuery Mobile website from a desktop browser:

Select some options from the top menu, drag to the screen, set text or configure asneeded, and voila: clicking the "Download HTML" button at upper right offers youa well-formed template making use of jQuery Mobile's canned UI elements.



EVALUATION COPY


http://jquerymobile.com/#try

Building Your First jQuery Mobile PageExercise 110 to 20 minutes

In this exercise, you will build a simple page using the Codiqua UI builder.

1. Visit the Codiqua UI builder (http://jquerymobile.com/#try) from a desktopbrowser.

2. Drag a Page Header to the top of the screen; use the "Yellow" ("e") theme forit.

3. Drag a Page Footer to the bottom of the screen; use the "Yellow" ("e") themefor it.

4. Drag a button to the middle of the screen; set its text to "jQuery Mobile Docs";use the "Yellow" ("e") theme for it; change the icon to "Star".

5. Try out a few other elements by dragging to the screen and configuring.6. When you are satisfied with the page you have created, click "Download

HTML" to download the code; extract "app.html" from the downloaded zipfile, which will be named something like "codiqua-app-123456789.zip".

7. Move app.html to WhatIsjQueryMobile/Exercises/; the directory will be emptybefore you add the file to it.



EVALUATION COPY


http://jquerymobile.com/#try

8. Open the new file, WhatIsjQueryMobile/Exercises/app.html, in a file editor;change the button link to point to http://jquerymobile.com/demos/1.1.0-rc.2/

9. The page should look something like this when viewed on a smartphone:



EVALUATION COPY


Exercise Solution

WhatIsjQueryMobile/Solutions/app.html

<!DOCTYPE html> 1.<html> 2. <head> 3. <meta charset="utf-8" /> 4. <meta name="viewport" content="width=device-width, initial-

scale=1" /> 5.

<title> 6. </title> 7. <link rel="stylesheet" href="http://code.jquery.com/mo »»

bile/1.0.1/jquery.mobile-1.0.1.min.css" /> 8.

<style> 9. /* App custom styles - here is where we might put our own

CSS if we want to make custom style changes */ 10.

</style> 11. <script

src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">12.

</script> 13. <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-

1.0.1.min.js"> 14.

</script> 15. </head> 16. <body> 17.  18. <div data-role="page" id="page1"> 19.  20.

<div data-theme="e" data-role="header"> 21. <h3> 22. Webucator 23. </h3> 24. </div> 25.  26.

<div data-role="content"> 27. <a data-role="button" data-transition="fade" data-

theme="e" href="http://jquerymobile.com/demos/1.1.0-rc.2/" data-icon="star" data-iconpos="left">

28.

jQuery Mobile Docs 29. </a> 30. </div> 31.  32.



EVALUATION COPY


<div data-theme="e" data-role="footer"> 33. <h3> 34. jQuery Mobile 35. </h3> 36. </div> 37. </div> 38. <script> 39. //here we could write custom JavaScript 40. </script> 41. </body> 42.</html>43.

Code Explanation

Other than changing the URL for the button's href attribute, we've written no codehere. While the WYSIWYG tools won't solve all of our coding challenges, they areoften a great starting point when beginning jQuery Mobile projects.



EVALUATION COPY


HTML5

HTML5 is the latest revision of the web markup language standard - it addressesthe shortcomings of HTML 4 and XHTML, and also adds new features. Adoptionof HTML5 depends, of course, on the degree to which browsers support HTML5features. Luckily for us, support - especially for the features we'll focus on here - isespecially strong among mobile browsers.

HTML5 is in part an acceptance of the fact that browsers tolerate lots of bad code,that perhaps we need not be so strict with requiring end tags and case sensitivity,and that making obsolete some ten years' worth of existing web pages would becatastrophic.

As an example of this flexibility, all of the following are permitted in HTML5:

1. <link type="text/css" href="style.css" />2. <LINK TYPE="text/css" HREF="style.css" />3. <link type=text/css href=style.css>4. <LINK TYPE=text/css HREF=style.css>5. <LiNk TyPe=text/css hReF="style.css">

As the above shows:

1. HTML5 is case insensitive.2. HTML5 allows for unclosed tags, but you can use the XML-style shortcut close

tag if you want, as shown in the first two examples above.3. HTML5 does not require quotes around attribute values unless the values have

spaces in them - <div class="news featured">, for example.

This new flexibility could lead to a bit of chaos on your development team. DifferentHTML authors will take different approaches. Our recommendation is that youchoose one approach and stick to it. In this course, for example, we use the followingguidelines:

1. Write tags and attributes in all lowercase letters (even event handlers likeonclick).

2. Do not use shortcut close tags for void/empty elements.3. Put all attribute values in quotes. (Why? Because attribute values that have

spaces in them have to be in quotes. And I do not like the idea of having someattributes in quotes and some not.)

4. Minimize attributes when you can.

Of course, your choices here must also take into account your expected audience'suse of older browsers - a self-closed div, for instance, won't work in InternetExplorer 7 and 8.



EVALUATION COPY


New HTML5 Features

The table below shows the new elements that HTML5 has introduced. Note that wewon't cover most of these in this course.



EVALUATION COPY


New HTML5 ElementsDescriptionTag

For a standalone article on a page. Articles can be nested withinother articles; for example, a blog post would be contained in

<article>

<article> tags and each comment would be contained withina nested <article> tag.

For content contained in an aside. Often used for navigationelements or for a list of articles or categories (e.g., in a blog).

<aside>

For embedding audio files.<audio>

For creating drawings natively in the browser.<canvas>

For command buttons similar to what you might see in theMicrosoft Office 2010 ribbon. <command> must be nested in<menu>.

<command>

For a drop-down list providing built-in functionality similar toa JavaScript autocomplete boxes.

<datalist>

For expandable (usually initially hidden) content to providemore information about an element.

<details>

For backwards compatibility with the nonstandard (but wellsupported) <embed> tag in HTML 4.

<embed>

For captions on images. (In HTML 4, there was no way tosemantically associate a caption with an image.

<figcaption>

For wrapping embedded content (e.g., an image) with a<figcaption>.

<figure>

For the footer of a page or a section.<footer>

For the header of a page or a section.<header>

For grouping <h1>...<h6> tags on a page. For example, thetitle and subtitle of a page could be an <h1> and <h2> groupedin an <hgroup> tag.

<hgroup>

For a generated key in a form.<keygen>

For showing marked (or highlighted) text. Unlike <strong>or <em>, <mark> doesn't give the text any special meaning.

<mark>

The best example is marking a word or phrase that a user hassearched on within the search results.

For a measurement within a set range.<meter>

For holding a group of navigation links.<nav>

For holding output (e.g., produced by a script).<output>



EVALUATION COPY


DescriptionTag

For a progress indicator (e.g., for a loading graphic).<progress>

Used within <ruby> tags to tell browsers that cannot renderthe East Asia characters properly what extra characters (usuallyparentheses) to display.

<rp>

Used within <ruby> tags to show how to pronounce East Asiacharacters.

<rt>

For ruby annotations. (See http://www.w3.org/TR/ruby forexamples.)

<ruby>

For creating a <section> on the page. This helps the browser(user agent) determine the page outline.

<section>

For indicating media sources within <video> and <audio>.<source>

For the header of a <detail> element. The <summary>would show by default.

<summary>

For holding a machine-readable date and/or time whiledisplaying a friendly date and/or time.

<time>

For embedding video files.<video>

An opportunity to insert a line break within a word. (e.g.,super<wbr>califragilistic<wbr>expialidocious)

<wbr>

Keep in mind that jQuery Mobile doesn't inherently make use of all - even most -of these new tags; if fact, one might argue that jQuery Mobile could be a little moresemantic, making use of the <header> or <footer> tag, say, instead of lots of<div>s. Nonetheless, the jQuery Mobile is syntactically valid HTML5.



EVALUATION COPY


A First Example

Let's take a look at a quick first example - open up WhatIsjQueryMobile/Demos/html5/index.html in a browser and in your file editor to inspect the code. Froma desktop browser you'll see something like this:



EVALUATION COPY


Code Sample

WhatIsjQueryMobile/Demos/html5/index.html

<!doctype html>1.<html> 2.<head> 3. <title>A Simple Document</title> 4.</head> 5.<body> 6.

<header>7. <h1>Site Title</h1> 8.

<nav>9. <ul> 10. <li><a href="#">link 1</a></li> 11. <li><a href="#">link 2</a></li> 12. <li><a href="#">link 3</a></li> 13. </ul> 14. </nav> 15. </header> 16.

17. <section> 18.

<article>19. <hgroup> 20. <h1>Page Title</h1> 21. <h2>Subtitle</h2> 22. </hgroup> 23. <p>Content content content</p> 24. </article> 25. </section> 26.

<aside>27. <p>Sidebar info goes here</p> 28. </aside> 29. <footer>Footer content here</footer> 30.</body> 31.</html>32.

Code Explanation

Presentationally, the page is less than stunning when viewed in a browser - we'venot styled the elements at all - but the interesting bits are how we've marked up thecontent. Firstly, note that we've declared a doctype of html - this fact alonemeans this page is an HTML5 document.



EVALUATION COPY


Secondly, note that we have made use of the HTML5 semantic tags to imply meaningto the content we markup for viewing on the web:

1. A header tag wraps the header of the page.2. The main navigation items are wrapped with a nav tag.3. An article tag wraps the main content, while an aside tag wraps the

sidebar content.

HTML5 Forms

Our mobile sites will need to accept user input - registration forms, comment forms,and the like to ask users to send us, via form fields, some information. jQuery Mobilehandles a good bit of this, but it's good to know about how HTML5 makes availablea set of new form input types and attributes that enhance the user experience. Keepin mind that adoption for some of these new features is spotty at best; we'll coverthe better implemented options.

There are 13 new input types:

1. search2. tel3. url4. email5. datetime6. date7. month8. week9. time10. datetime-local11. number

We'll concentrate on a few of the more useful types for mobile.



EVALUATION COPY


Telephone

The tel type input expects a phone number. Many phones will present a numerickeyboard:

Dates

The date type of input allows the user to enter a date with no time zone. Somesmartphone browsers present a date picker when a field of type date receives focus.



EVALUATION COPY


iPhones with iOS version 5 or later, for instance, offer a date picker - earlier versionsdo not.

Email

Fields of type email expect a valid email address. Many phones will show acontextually appropriate set of characters for input; the iPhone, for instance, displaysthe "@" character:



EVALUATION COPY


Some browsers will validate the field as a valid email address.



EVALUATION COPY


Web Address

Fields of type url are for entering full website address. Many phones will show acontextually appropriate set of characters for input; the iPhone, for instance, displaysthe ".com" key:

Some browsers will validate the field as a valid web address.



EVALUATION COPY


New Field Attributes

The placeholder attribute is among the more useful new HTML5 field attributes:it allows us to specify an example value for the field, a value which disappears whenthe user begins to enter content in the field.

The required attribute is very useful - but, sadly, not well-supported amongmobile browsers: the automatic client-side HTML5 form validation that works ondesktop browsers is lacking on their mobile counterparts.

HTML5 Form Example

Open WhatIsjQueryMobile/Demos/forms/index.html in a mobile browser - this isthe page from which the above screenshots were taken.

Code Sample

WhatIsjQueryMobile/Demos/forms/index.html

-------Lines 1 through 10 Omitted-------

<form action="forms.html" method="post"> 11. <label for="name">Name</label><br> 12. <input type="text" name="name" id="name" placeholder="Jane Doe"><br>13.

<br> 14. <label for="phone">Phone</label><br> 15.

<input type="tel" name="phone" id="phone"><br> 16. <br> 17. <label for="email">Email</label><br> 18.

<input type="email" name="email" id="email"><br> 19. <br> 20. <label for="website">Website URL</label><br> 21.

<input type="url" name="website" id="website"><br> 22. <br> 23. <label for="DOB">Date of Birth</label><br> 24.

<input type="date" name="DOB" id="DOB"><br> 25. <br> 26. <input type="submit"> 27. </form> 28.-------Lines 29 through 31 Omitted-------

Code Explanation

We use a placeholder value for the first ("name") field, and ask the user forinformation of type tel, email, url, and date.



EVALUATION COPY


CSS3 Media Queries

Among the new features offered as part of CSS3, media queries are easily the mostuseful to us as designers and developers of mobile sites. A way to apply CSS rulesselectively based on both the type of media and the physical properties of the device(browser, phone) being used to access the page, each media query comprises a mediatype (e.g. "screen") and zero or more logical expressions - a condition evaluatingto true or false based on the conditions of particular media features. We can test ouruser's device for screen width, device width, orientation ("portrait" or "landscape"),and other features.

Media Query FeaturesExplanationMin/Max?Possible

ValuesFeature

bits per color componentyesintcolor

number of entries incolor lookup table

yesintcolor-index

aspect ratioyesint/intdevice-aspect-ratio

height of the outputdevice

yeslength (pixels)device-height

width of the outputdevice

yeslength (pixels)device-width

true for a grid-baseddevice

nointgrid

height of the renderingsurface

yeslength (pixels)height

bits per pixel in amonochrome framebuffer

yesintmonochrome

resolutionyes"dpi" or"dpcm"

resolution

scanning process of "tv"media types

no"progressive"or "interlaced"

scan

width of the renderingsurface

yeslength (pixels)width

Let's look at a simple example of media queries. Open WhatIsjQueryMobile/Demos/mediaquery/index.html in a desktop browser; open up the same file and



EVALUATION COPY


WhatIsjQueryMobile/Demos/mediaquery/style.css in a file editor to check out thecode.

When the browser is wider than 768 pixels, the page renders with the two columnsfloated left and right. The red main column (an article inside of a section)occupies about two-thirds of the page, at left. The blue right sidebar column (anaside) sits to the right.

When we drag the browser to a width narrower than 768 pixels, the design changes:

1. Both columns fill the width of the container element, instead of floating leftand right;



EVALUATION COPY


2. The main column's background changes to gray;3. The background of the sidebar column, now at bottom, changes to green.

Here's a screenshot of the narrow-browser rendering:



EVALUATION COPY


Code Sample

WhatIsjQueryMobile/Demos/mediaquery/index.html

-------Lines 1 through 8 Omitted-------

<header> 9. <h1>Site Title</h1> 10. <nav> 11. <ul> 12. <li><a href="#">link 1</a></li> 13. <li><a href="#">link 2</a></li> 14. <li><a href="#">link 3</a></li> 15. </ul> 16. </nav> 17. </header> 18. <section> 19. <article> 20. <hgroup> 21. <h1>Page Title</h1> 22. <p>Lorem ipsum dolor sit amet, consectetur adipisicing

elit, sed do eiusmod 23.

-------Lines 24 through 27 Omitted------- proident, sunt in culpa qui officia deserunt mollit anim

id est laborum.</p> 28.

</hgroup> 29. <p>Content content content</p> 30. </article> 31. </section> 32. <aside> 33. <h2>Sidebar</h2> 34. <p>Sidebar info goes here</p> 35. </aside> 36.-------Lines 37 through 40 Omitted-------

Code Explanation

The HTML page contains an article wrapped by a section; an aside wrapsthe sidebar content.



EVALUATION COPY


Code Sample

WhatIsjQueryMobile/Demos/mediaquery/style.css

#container { 1. width:80%; 2. margin:0 auto; 3.} 4.section { 5. float:left; 6. width:55%; 7. padding:2% 5%; 8. background:#f00; 9.} 10.aside { 11. float:right; 12. width:25%; 13. padding:2% 5%; 14. background:#00f; 15.} 16.

17.@media screen and (max-width: 768px) { 18. section { 19. float:none; 20. width:90%; 21. padding:5%; 22. background:#ccc; 23. } 24. aside { 25. float:none; 26. width:90%; 27. padding:5%; 28. background:#0f0; 29. } 30.}31.

32.footer { 33. padding:5%; 34. clear: both; 35.}36.



EVALUATION COPY


Code Explanation

Unlike our earlier example, we employ a CSS stylesheet in this example. The mediaquery dictates that "for viewing on a screen and at a maximum browser width of768 pixels" the page should:

1. Unfloat the section element;2. Set the width of the section element to 90%;3. Set the background color of the section to gray;4. Unfloat the aside element;5. Set the width of the aside element to 90%;6. Set the background color of the aside to green.

Conclusion1.2In this lesson, you have learned what jQuery Mobile is, the basics of how it works,and how to create a quick page from the Codiqua UI builder. We also took a quicklook at the new features from HTML5 and CSS3 most relevant to mobiledevelopment.



EVALUATION COPY




EVALUATION COPY

Date post:	16-Apr-2022
Category:	Documents
Upload:	others
View:	12 times
Download:	0 times

(MBL201 version 1.2.0)

Documents