Scribd
Upload
147 views

JQuery Mobile Slides

jQuery Mobile is a framework that consists of related components for building mobile web sites and apps. It provides an Ajax-driven navigation system, mobile-optimized UI elements, and advanced touch event handlers. jQuery Mobile uses HTML5 data attributes to interface with elements and provide mobile-friendly features without JavaScript. Websites can deliver multiple internal pages within a single HTML document using jQuery Mobile.

Uploaded by

AntonioCezarS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
147 views

JQuery Mobile Slides

jQuery Mobile is a framework that consists of related components for building mobile web sites and apps. It provides an Ajax-driven navigation system, mobile-optimized UI elements, and advanced touch event handlers. jQuery Mobile uses HTML5 data attributes to interface with elements and provide mobile-friendly features without JavaScript. Websites can deliver multiple internal pages within a single HTML document using jQuery Mobile.

Uploaded by

AntonioCezarS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 71

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

You might also like