JQuery Mobile Slides

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" />
"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" />
</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">
</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
<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 Events
tap: 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 Event
orientationchange 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" />
</script>
</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="#"
Add Me on Twitter
</a>
<br />
<a href="#"
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
<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
left | right | top
data-iconpos
| 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>
<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>
<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>
Continued
<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>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</script>
</head>
Continued
<body>
<div data-role="page" id="first">
<h3>Registration Page</h3>
</div>
<fieldset>
</div>
Continued
<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>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</script>
</head>
Continued
<body>
<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

JQuery Mobile Slides

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JQuery Mobile Slides

Uploaded by

Copyright:

Available Formats

14.

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

Click a link and

 See the meta element defining the page’s viewport

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

 Freely choose between these 2 techniques at our convenience

 data-role="listview" makes the

Initial rendering After typing "Dev" in the filter

 Some implementations bring up a keyboard when the user starts

 Buttons in JQM are automatically styled, making them more

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

 Swatch "a" specifies

 The "a" theme is used for most elements

 Swatch "b" themed buttons

<div data-role="main" class="ui-content">

 When the Back button is pressed, the framework automatically

This always occupies 2 lines, no matter how

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

The clear button is

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

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

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

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

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

Exactly the same rendering if

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

 To prevent jQuery Mobile from

You might also like