14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related components that can be used a la carte but work together seamlessly The

14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related

components that can be used a la carte but work together seamlessly

The framework provides

an Ajax-driven navigation system (Ajax: next slide)

mobile-optimized interaction elements

advanced touch event handlers

Ajax: short for asynchronous JavaScript + XML

It's a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications

Applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page

Data can be retrieved using the XMLHttpRequest object

Despite the name,

use of XML isn’t required: JSON is often used instead

the requests don’t have to be asynchronous

The following browsers support the jQuery mobile experience

Apple iOS (3.1-4.2)

Android (1.6-2.3) all devices

Blackberry 6

Windows Phone 7 Mango

Palm WebOS (1.4)

Opera Mobile (10.1)

Opera Mini (5.02)

Firefox Mobile (beta)

See http://jquerymobile.com/download/ for info on downloading and using the CDN

Using the CDN, you have the following

<link rel="stylesheet" href= "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

</script>

There are versions of all without the “.min” (un-minified versions)

Put the core JQuery script before the jQuery Mobile script, and that before your specific JavaScript script

Put the stylesheets before the scripts—the scripts might have to work with what's defined in the stylesheets

Or download the zip file at http://jquerymobile.com/download/

This includes the files jquery.mobile-1.4.5.min.css

jquery.mobile-1.4.5.css

jquery.mobile-1.4.5.min.js

jquery.mobile-1.4.5.js

jquery.mobile-1.4.5.min.map

Also many other files that don’t play such a conspicuous role

It has a folder images for icons and such—must be included

jQuery Mobile homepage: http://jquerymobile.com/

jQuery Mobile 1.4 API Documentation: http://api.jquerymobile.com/

For jQuery Mobile in general, see the user-friendly documentation at

http://demos.jquerymobile.com/1.2.0/

See the demos at http://demos.jquerymobile.com/1.4.5/

http://jquerymobile.com/

http://jquerymobile.com/

http://api.jquerymobile.com/

http://api.jquerymobile.com/





HTML5 Custom Data Attributes We’ve worked with jQuery object methods, global functions, and

custom selectors to exploit jQuery functionality

We can use all this with the jQuery Mobile library as well

But the most common way to interface with it is via HTML data-* attributes

Let us embed custom data attributes on all HTML elements.

The stored (custom) data can then be used in the page's JavaScript

Create a more engaging user experience (without any Ajax calls or server-side database queries)

The data-* attribute name contains no uppercase letter and must be at least 1 character long after the "data-" prefix

The attribute value can be any string

The HTML5 spec lets us insert any attribute at all into an element as long as it is prefixed by data-

Such attributes are ignored when the page is rendered

But, when we include jQuery Mobile on a page, the script

scans for a few specific data-* attributes and

adds mobile-friendly features to the corresponding elements

We can thus demonstrate some powerful features of jQuery Mobile without writing any JavaScript code

For an enumeration of the data-* attributes used by jQuery Mobile, see

http://api.jquerymobile.com/1.3/data-attribute/

http://demos.jquerymobile.com/1.2.0/docs/api/data-attributes.html

http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp







Mobile Navigation Straight HTML (referencing core jQuery)

<html><head> <title>jQuery Book Browser</title>

<link rel="stylesheet" href="booklist.css" type="text/css" />

<script src="jquery.js"></script>

</head>

<body>

<div>

<div>

<h1>Selected jQuery Books</h1>

</div>

Continued

<div>

<ul>

<li><a href="drupal-7.html">Drupal 7 Development by Example</a></li>

<li><a href="jq-game.html">jQuery Game Development Essentials</a></li>

<li><a href="jqmobile-cookbook.html">jQuery Mobile Cookbook</a></li>

<li><a href="jquery-designers.html">jQuery for Designers</a></li>

</ul>

</div></div></body></html>

Click a link and render the referenced page—e.g.,

Enhance the document head to reference jQuery Mobile and its stylesheet

<head>

<title>jQuery Book Browser</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="booklist.css" type="text/css" />

<link rel="stylesheet" href= "jquery.mobile/jquery.mobile.css" type="text/css" />

<script src="jquery.js"></script>

<script src="jquery.mobile/jquery.mobile.js"></script>

</head>

See the meta element defining the page’s viewport

Tells mobile browsers to scale the document content so that it completely fills the width of the device

Better: use the CDN

<html><head>

<meta name="viewport"

content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href=

"http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js">

</script>

<script src="

http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">

</script></head>

jQuery Mobile styles now applied to the document

larger san-serif font, different colors and spacing

jQuery mobile uses standard HTML markup, like the div element

To define what to do with a div, we define a role using the attribute data-role—e.g.,

<div data-role = "page">

The page is the main attribute in jQuery mobile, usually divided into 3 parts: A header, content, and footer

The only mandatory section is the content

The roles used define the types of things we can render

Possible values for data-role See http://stackoverflow.com/questions/7693624/exhaustive-list-of-jquery-mobile-data-roles

Those of most interest listed first, underlined

page

header

content

footer

button

collapsible

collapsible-set

field-contain

slider

listview

navbar

http://stackoverflow.com/questions/7693624/exhaustive-list-of-jquery-mobile-data-roles



We add roles to the div elements

<body>

<div data-role="page">

<div data-role="header">


</div>

<div data-role="content">

<ul>

<li><a href="drupal-7.html">Drupal 7 Development by Example</a></li>

<li><a href="jq-game.html">jQuery Game Development Essentials</a></li>

<li><a href="jqmobile-cookbook.html">jQuery Mobile Cookbook</a></li>

<li><a href="jquery-designers.html">jQuery for Designers</a></li>

</ul>

</div>

</div></body>

jQuery Mobiles notices the page header

Renders a standard-looking mobile header bar across the top of the page

If text is too long for the header bar,

jQuery Mobile truncates it and adds an ellipsis at the end

We can rotate the device and get landscape orientation

This is all that’s required to produce Ajax navigation

To enable animated page transitions, any link pointing to an external page is loaded via Ajax

The framework parses the link’s href to create an Ajax request and displays the loading spinner

When the link to the page is clicked,

jQuery Mobile loads the page with an Ajax call

grabs the part of the document marked with data-role="page"

displays this content using a fading transition

Similar markup in the pages linked in the list—e.g., drupal-7.html



<h1>Drupal 7 Development by Example</h1>

</div>

<div data-role="content" class="book">

<img src="images/drupal-7.jpg"

alt="Drupal 7 Development by Example" />

<div class="title">Drupal 7 Development by Example</div>

<div class="author">Kurt Madel</div>

</div></div>

An Ajax application is often no more than a request for a chunk of HTML

This is Asynchronous HTTP and HTML (AHAH)

Delivering Multiple Pages in One Document jQuery Mobile lets us deliver the same user experience even if all

the content is within a single document (and not delivered by Ajax)

Link the anchors within the page to internal pages with id attributes using the # notation for fragment identifiers

Mark those divs with data-role="page" as if they were in separate documents

If a link in a multi-page document has href="#example", jQuery Mobile will look for a page div with id="example"

If the page is found, it will transition that page into view

You can seamlessly navigate between internal pages (href="#example") and external pages (href="example.html")

Internal and external pages look the same to the end user except the external pages will display the Ajax spinner while loading

Both also update the page’s URL hash to enable back button support, deep-linking, and bookmarks

Example




</div>


<ul>

<li><a href="#drupal-7">Drupal 7 Development by Example</a></li>

<li><a href="#jq-game">jQuery Game Development Essentials</a></li>

<li><a href="#jqmobile-cookbook">jQuery Mobile Cookbook</a></li>

<li><a href="#jquery-designers">jQuery for Designers</a></li>

</ul>

</div>

</div>

Continue

<div id="drupal-7" data-role="page">


<h1>Drupal 7 Development by Example</h1>

</div>

<div data-role="content" class="book">

<img src="images/drupal-7.jpg" alt="Drupal 7 Development by Example" />

<div class="title">Drupal 7 Development by Example</div>

<div class="author">Kurt Madel</div>

</div>

</div>

Etc.

Freely choose between these 2 techniques at our convenience

Content in separate documents lets us defer the loading of info until it’s needed

The cost is some higher overhead due to multiple page requests

Interactive Elements Most features offered by jQuery Mobile are specific interactive

elements that enhance basic web functionality

Make page components more user-friendly for a touch interface

Among these elements are accordion-style collapsible sections, toggle switches, sliding panels, and responsive tables

There’s considerable overlap between the user interface elements offered by jQuery UI and jQuery Mobile

It’s not recommended to use the 2 libraries together

Rarely any need: the most important widgets are offered by both

List Views Smart phone applications are often list-driven

Use jQuery Mobile to enhance lists on our pages: more HTML5 custom data attributes

<div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#drupal-7">Drupal 7 Development by Example</a></li> <li><a href="#jq-game">jQuery Game Development Essentials</a></li> <li><a href="#jqmobile-cookbook">jQuery Mobile Cookbook</a></li> <li><a href="#jquery-designers">jQuery for Designers</a></li> </ul></div>

data-role="listview" makes the items within this list large and easily activated by finger in a touch interface

data-inset="true" gives the list a nice border

List views in mobile apps are often paired with search fields that narrow down the items in the list

Add such a field by introducing the data-filter attribute

<ul data-role="listview" data-inset="true" data-filter="true">

Initial rendering After typing "Dev" in the filter

Some implementations bring up a keyboard when the user starts typing in the filter

Toolbar Buttons jQuery Mobile increases the size and modifies the appearance of

buttons to optimize them for touch input

jQuery Mobile even creates some buttons—e.g., those in the toolbar of a mobile app

One standard button is the Back button, in the upper-left corner of the screen

Lets us navigate up a level

Add data-add-back-btn="true" to our page div elements

<div data-role="page" data-add-back-btn="true">

In the running example, these are in the documents with the HTML fragments

Buttons in General A button in jQuery Mobile can be created in the 3 ways

<input type="button" … />

<button class="ui-btn" …> … </button>

<a class="ui-btn" …> … </a>

Buttons in JQM are automatically styled, making them more attractive and similar to a mobile device

Toolbars In jQuery Mobile there are 2 basic types of toolbars

Header bars

Footer bars

A header bar serves as the page title

Usually contains a page title and up to 2 buttons

The footer bar is usually the last element on a page

Usually contains a combination of text and buttons

jQuery Mobile includes a navbar widget

Turns an unordered list into a horizontal button bar

Works well in place of a footer bar

Header Bars The header is a toolbar at the top of the page, usually containing

the page title text and

optional buttons positioned to the left and/or right of the title for navigation or actions

The header toolbar is themed with the "a" swatch by default (black)

It's easy to change the theme color

<div data-role="header" data-position="inline">

<a href="index.html" data-icon="delete">Cancel</a>

<h1>Edit Contact</h1>

<a href="index.html" data-icon="check">Save</a>

</div>

Footer Bars The footer bar has the same basic structure as the header except data-

role = "footer"

Footer is designed to be less structured (more flexibility)

The footer toolbar is themed with the "a" swatch by default (black)

Any link added to the footer is automatically turned into a button

Buttons in toolbars are set to inline styling: the button is only as wide as the text and icons it contains

<div data-role="footer" class="ui-bar">

<a href="index.html" data-role="button" data-icon="delete">Remove</a>

<a href="index.html" data-role="button" data-icon="plus">Add</a>

<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>

<a href="index.html" data-role="button" data-icon="arrow-d">Down</a></div>

A navbar widget works well in place of a footer bar

Coded as an unordered list of links wrapped in a container element with data-role="navbar"

<div data-role="navbar">

<ul>

<li><a href="a.html">One</a></li>

<li><a href="b.html">Two</a></li>

<li><a href="c.html">Three</a></li>

</ul>

</div>

jQuery Mobile Events jQuery Mobile offers several custom events

Generally classifiable under Touch, Orientation, Page (Scroll)

Can be bound to for use in both handheld and desktop environments

Use the same on() method as for other events

Or use live() or bind() (like on()) live(): Attach an event handler for all elements which match

the current selector, now and in the future. Deprecated, use on()

Touch Eventstap: After a quick, complete touch event

taphold: After a held complete touch event

swipe: Horizontal drag of 30px or more, within 1 second

swipeleft: When a swipe event occurred moving left

swiperight: When a swipe event occurred moving right

The default configurations of taphold and swipe in particular (including touch duration) are modified by accessing properties of the objects

$.event.special.taphold

$.event.special.swipe

Orientation Change Eventorientationchange triggers when a device orientation changes(by

turning it vertically or horizontally

$(window).on("orientationchange",function(event){...})

The optional event parameter of the function has an orientation property equal to either

"portrait" (device held in vertical position) or

"landscape" (held in horizontal position)

Binds to the resize event when orientationchange is not natively supported

Scroll Events scrollstart triggers when a scroll begins

scrollstop triggers when a scroll finishes

Also events that react to various stages of page navigation

And a set of virtualized mouse events that react to both mouse and touch

Theming See

Themes

http://demos.jquerymobile.com/1.2.0/docs/api/themes.html

ThemeRoller for jQuery Mobile

http://themeroller.jquerymobile.com/

As with jQuery UI, jQuery Mobile offers a ThemeRollerfor customizing the look and feel of widgets

The theming system used in jQuery Mobile is similar to the ThemeRoller system in jQuery UI with a few important improvements

It takes advantage of CSS3 properties for new effects, very lightweight theme files, and reduced server requests

Themes include multiple color "swatches" that can be freely mixed and matched to create visual texture Each consists of a header bar, content body, and button states







jQuery Mobile provides 2 main swatches, "a" and "b"

To customize the look of an application, assign the data-theme attribute a letter—e.g.,

<div data-role="page" data-theme="a">

Swatch "a" specifies Black text on a light gray background for page content Black text on a gray background for headers and footers Black text on a light gray background for buttons White text on a blue background for active buttons Blue text on links Light gray text (placeholder) or black text (value) on a white

background for input fields

Swatch "b" specifies White text on a dark gray background for page content White text on a dark gray background for headers and footers White text on a charcoal background for buttons White text on a "cyan" blue background for active buttons "Cyan" blue text on links Gray text (placeholder) or white text (value) on a black

background for input fields

For buttons with class="ui-btn", use the "ui-btn-a" or "ui-btn-b" class to style the button either gray (default) or black—e.g.,

<a href="#" class="ui-btn ui-btn-b">Button</a>

The "a" theme is used for most elements

A child element often inherits the theme of its parent (or page)

If no theme swatch letter is set, the framework uses

the "a" swatch for headers and footers and

the "c" swatch (light gray in the default theme) for the page content to maximize contrast

All items in containers inherit the swatch from their parent

Exceptions to this rule are

Default to "b" (blue in the default theme) the listdivider in listviews the header of nested list pages, and the button of split button lists

Default to "c" (silver in the default theme) count bubbles

Icons See

Icons,

http://api.jquerymobile.com/icons/ Adding Icons to Buttons,

http://demos.jquerymobile.com/1.2.1/docs/buttons/buttons-icons.html

jQuery Mobile provides several icons that can be used by applying a data-icon attribute or a ui-icon- class to a suitable widget

<a href="index.html" data-role="button" data-icon="delete"> Delete</a>

<a href="index.html" data-role="button" class="ui-icon-delete"> Delete</a>

The value for the class prefixes ui-icon- onto the corresponding value for the data-icon attribute

http://api.jquerymobile.com/icons/





There is an SVG and PNG image of each icon

By default the SVG icons are used

Platforms that don't support SVG fall back to PNG icons

The following are some icon classes and their corresponding images

ui-icon-delete

ui-icon-arrow-u

ui-icon-arrow-d

ui-icon-back

ui-icon-check

ui-icon-mail

ui-icon-plus

ui-icon-search

Icons and themes

Examples of the same icons sitting on top of a range of different color swatches with themed buttons

Swatch "a" themed buttons

Swatch "b" themed buttons

Classes See Classes, http://api.jquerymobile.com/classes/

Many specific effects are achieved by attributing a class to an element

Some style classes

ui-corner-all Adds rounded corners to the element

ui-shadow Adds an item shadow around the element

http://api.jquerymobile.com/classes/

http://api.jquerymobile.com/classes/

Button-specific classes

A Basic Class

ui-btn Add this class to indicate that the element is to be styled as a button—a prerequisite for adding any other button-related class

Icon Positioning

ui-btn-icon-top The button appears above the text

ui-btn-icon-right The button appears to the right of the text

ui-btn-icon-bottom The button appears below the text

ui-btn-icon-left The button appears to the left of the text

An Example The rendering at right

href="#" has the "link to no-where" (actually to the top of the page), used because <a> needs an href attribute

data-role values "page", "header", "main", "footer"

Nested swatches

Extensive use of ui- classes

<html><head>

<meta name="viewport" content="width=device-width, initial-scale=1" />


<script src="http://code.jquery.com/jquery-1.11.3.min.js"> </script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script></head>

Continued

<body><div data-role="page" data-theme="b">

<div data-role="header" data-theme="a">

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left"> Home </a>

<h1>Homepage</h1>

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right"> Search </a> </div>

<div data-role="main" class="ui-content"> <p> Note 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>

Continued

<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> <br />

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left"> Add Me on Twitter </a> <br />

<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>

Transitions See Page transitions, http://

demos.jquerymobile.com/1.2.0/docs/pages/page-transitions.html

jQuery Mobile includes a set of CSS-based transition effects

Applied to any page link or form submission with Ajax navigation

fade

pop

flip

turn

flow

slidefade

slide

slideup

slidedown

none

http://demos.jquerymobile.com/1.2.0/docs/pages/page-transitions.html

http://demos.jquerymobile.com/1.2.0/docs/pages/page-transitions.html

By default, a fade transition is applied

To set a custom transition effect, add the data-transition attribute to the link

<a href="index.html" data-transition="pop">I'll pop</a>

When the Back button is pressed, the framework automatically applies the reverse version of the transition used to show the page

To specify that the reverse version of a transition is to be used, add data-direction="reverse" to a link

PhoneGap Integration PhoneGap is a mobile development framework

Lets us build applications for mobile devices using JavaScript, HTML5, and CSS3, instead of relying on platform-specific APIs

Extends the features of HTML and JavaScript to work with the device

Applications are hybrid,

neither truly native mobile application All layout rendering is done via web views instead of the

platform's native UI framework

nor purely web-based They're not just web apps, but are packaged as apps for

distribution and have access to native device APIs

The software underlying PhoneGap is Apache Cordova

Apache Cordova (http://cordova.apache.org/) is a set of device APIs that let us access native device function (e.g., camera, accelerometer, geolocation) from JavaScript

Combined with a UI framework (e.g., jQuery Mobile, Dojo Mobile, or Sencha Touch), this lets us develop a smartphone apps with just HTML, CSS, and JavaScript

In building an app, web technologies are used

These technologies are hosted in the app itself locally (generally not on a remote http server)

Sites built with jQuery Mobile are easy to convert to native mobile applications using PhoneGap

The $.support.cors and $.mobile.allowCrossDomainPages properties even allow access to pages not contained in the application—e.g., those on a remote server

http://cordova.apache.org/

http://cordova.apache.org/

jQuery Mobile Communication with the Server jQuery Mobile by default handles form submissions with Ajax

We’ll turn off this default by include in the form element the attribute data-ajax="false"

When we submit a form, then, the response will get rendered in an entirely new page

jQuery Mobile uses CSS automatically to style HTML form elements, making them attractive and easy to use

In jQuery Mobile, we can use the following form controls Text Inputs Radio Buttons Checkboxes Select Menus

Plus the following controls new to HTML5 Sliders Search Inputs Flip Toggle Switches

Each form element must have a unique id attribute

Unique across the pages in the site jQuery Mobile's single-page navigation model lets many

different "pages" be present at the same time

Each form element must have a label

Set the for attribute of the label to match the id of the element

Example

<form method="post" action="demoform.php" data-ajax="false">

<label for="fname">First name:</label>

<input type="text" name="fname" id="fname">

</form>

This always occupies 2 lines, no matter how wide the screen

Use a placeholder to specify a short hint that describes the expected value of an input field

Example<label for="fname">First name:</label>

<input type="text" name="fname" id="fname" placeholder="First name...">

To hide the label, use the "ui-hidden-accessible" class

Then the element's placeholder attribute provide a "label"

Example

<label for="fname class="ui-hidden-accessible">First name:</label>

<input type="text" name="fname" id="fname" placeholder="First name...">

A clear button is an X icon on the right side of the input field that clears the contents of the field

To get this, add the data-clear-btn="true" attribute

Example


<input type="text" name="fname" id="fname" data-clear-btn="true">

The clear button is hidden until something is typed in the field

A clear button can be added to any input element but not to a textarea

jQuery Mobile Form Buttons Buttons are coded with HTML input elements (types button, reset,

submit)

Automatically styled

To style an input button further, use any of the data-* attributes listed below

Bold value indicates default value

Attribute Value What It Specifies

data-corners true | false Whether the button has rounded corners

data-icon See Icons Ref The icon of the button

data-iconpos left | right | top | bottom | notext The position of the icon

data-inline true | false Whether the button should be inline

data-mini true | false Whether the button should be small

data-shadow true | false Whether the button should have shadows

To add an icon to an <a> and <button> element, use the icon class and position the icon as shown (except for buttons in navbars, see below)

<a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left"> Refresh Page</a>

<button class="ui-btn ui-icon-refresh ui-btn-icon-left"> Refresh Page</button>

To add an icon to an <input> buttons, use the data-icon attribute

<input type="button" value="Refresh page" data-icon="refresh" />

To add an icon to navbar buttons, use the data-icon attribute

<a href="#anylink" data-icon="refresh">Refresh Page</a>

To add an icon to a list of buttons, use the data-icon attribute on <li>

<li data-icon="refresh"><a href="#">Click me</a></li>

<div data-role="page"> <div data-role="content"> <a href="#anylink" class="ui-btn ui-icon-refresh ui-btn-icon-left"> Refresh Page </a>

<button class="ui-btn ui-icon-refresh ui-btn-icon-left"> Refresh Page </button>

<input type="button" value="Refresh page" data-icon="refresh" />

<ul data-role="listview"> <li data-icon="refresh"><a href="#">Click me</a></li> </ul> </div>

<div data-role="navbar"> <a href="#anylink" data-icon="refresh">Refresh Page</a> </div></div>

Field Containers To make labels and form elements look proper on wider screens, wrap a

<div> or <fieldset> element with the "ui-field-contain" class around the labels and form elements

Example

<form method="post" action="demoform.php"data-ajax="false"> <div class="ui-field-contain">


<input type="text" name="fname" id="fname">

<label for="lname">Last name:</label>

<input type="text" name="lname" id="lname">

</div></form>

Exactly the same rendering if we replace div with fieldset

With class "ui-field-contain",

if the width is > 480px, the label automatically goes on the same line as the form control

else the label is placed above the form element

We can put class="ui-field-contain" on the elements forming the content of the fieldset

Some buttons (e.g., submit) need nothing special as long as they’re in the fieldset


<form data-ajax="false" method="post" action="test1.php">

<fieldset> <div class="ui-field-contain"> <label for="nm">Your name:</label> <input type="text" value="" name="name" id="nm"/> </div>

<input type="submit" data-theme="b" name="submit" id="submit" value="Submit">

</fieldset>

</form> </div>

Can generally replace class="ui-field-contain" with data-role="fieldcontain"

For an embedded fieldset (what is really supposed to appear as a fieldset), add attribute data-role="controlgroup"

Example



<fieldset>

<div class="ui-field-contain">

<label for="nm">Your name:</label>

<input type="text" value="" name="name" id="nm"/>

</div> Continued

<div class="ui-field-contain"> <fieldset data-role="controlgroup"> <legend>Choose Your Meals</legend> <label for="br">Breakfast</label> <input type="checkbox" name="meal[]" id="br" value="breakfast" /> <label for="lu">Lunch</label> <input type="checkbox" name="meal[]" id="lu" value="lunch" /> <label for="di">Dinner</label> <input type="checkbox" name="meal[]" id="di" value="dinner" /> </fieldset> </div> <input type="submit" data-theme="b" name="submit" id="submit" value="Submit"> </fieldset> </form> </div>

To prevent jQuery Mobile from automatically styling tappable/clickable elements, use attribute data-role="none"

Form Submission in jQuery Mobile jQuery Mobile automatically handles the form submission via AJAX

Tries to integrate the server response into the DOM of the application

Suppress this by including data-ajax="false" in the form element

Then the entire page is replaced by the response

Complete Example

<html><head> <title>Selecting Meals</title>





Continued

<body> <div data-role="page" id="first">

<div data-role="header"> <h3>Registration Page</h3> </div>



<fieldset>

<div class="ui-field-contain"> <label for="nm">Your name:</label> <input type="text" value="" name="name" id="nm"/> </div>

Continued

<div class="ui-field-contain">

<fieldset data-role="controlgroup"> <legend>Choose Your Meals</legend> <label for="br">Breakfast</label> <input type="checkbox" name="meal[]" id="br" value="breakfast"/> <label for="lu">Lunch</label> <input type="checkbox" name="meal[]" id="lu" value="lunch"/> <label for="di">Dinner</label> <input type="checkbox" name="meal[]" id="di" value="dinner"/> </fieldset>

</div>

<input type="submit" data-theme="b" name="submit" id="submit" value="Submit"> </fieldset> </form> </div> </div></body></html>

Since the form element has the attribute data-ajax="false", we can proceed with the server script somewhat as we normally do

In the PHP script that fields the submission, check that form values have been received before we can safely work with them

The following PHP code accessing the form variables

$name = $_POST['name'];

$meal = $_POST['meal'];

Test whether either one of these is set—we’ll test $name

<?php if (isset($name)) { // Usual code }?>

All the usual PHP code is within the scope of this condition testing whether $name is set

The entire listing of test1.php

<?php $name = $_POST['name']; $meal = $_POST['meal'];?>

<html><head> <title>jQuery Mobile Client-Server</title>





Continued

<body> <div data-role="page">

<div data-theme="a" data-role="header"> <h3>Welcome Page</h3> </div>


<?php if(isset($name)){ echo " <p>Welcome, $name!</p>\n"; echo " <p>Your meals are ";

foreach ($meal as $m) echo "$m ";

echo "</p>\n"; } ?>

</div>

</div></body></html>

Form filled out, ready to submit Rendering of the response

Documents

14. jQuery Mobile Like jQuery UI, jQuery Mobile consists of a suite of related components that can be used a la carte but work together seamlessly The