Post on 29-Dec-2015
transcript
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/
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
We add roles to the div elements
<body>
<div data-role="page">
<div data-role="header">
<h1>Selected jQuery Books</h1>
</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
<div data-role="page">
<div data-role="header">
<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 data-role="page">
<div data-role="header">
<h1>Selected jQuery Books</h1>
</div>
<div data-role="content">
<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">
<div data-role="header">
<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
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
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" />
<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></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
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
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
<label for="fname">First name:</label>
<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">
<label for="fname">First name:</label>
<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
<div data-role="content">
<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
<div data-role="content">
<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> 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>
<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>
Continued
<body> <div data-role="page" id="first">
<div data-role="header"> <h3>Registration Page</h3> </div>
<div data-role="content">
<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>
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>
<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.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">
<div data-theme="a" data-role="header"> <h3>Welcome Page</h3> </div>
<div data-role="content">
<?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