jQuery Mobile Table of Content
- Standard Create a Dialog box Page
- Multiple Pages in a Single HTML file
- jQuery Mobile dialog box
- jQuery Mobile Icons
- jQuery Mobile Buttons
- jQuery Mobile Popup
Getting Started With jQuery Mobile
Below, we
have created a simple, standard jQuery Mobile page:
Example
<body>
<div data-role="page">
<div data-role="header">
<h1>Header
Text</h1>
</div>
<div data-role="main" class="ui-content">
<p>Main Content</p>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
</body>
Example
explained:
- The data-role="page" is
the page displayed in the browser
- The data-role="header"
creates a toolbar at the top of the page (often used for title or search
buttons)
- The data-role="main"
defines the content of the page, like text, images, buttons, forms, etc.
- The "ui-content" class
adds extra padding and margin inside the page content
- The data-role="footer" creates
a toolbar at the bottom of the page
- Inside these containers, you can
add any HTML elements - paragraphs, images, headings, lists, etc.
Note
: The HTML5 data-* attributes are used throughout jQuery Mobile to create a "touch-friendly" and attractive look for mobile devices.
Adding Pages
in jQuery Mobile
In
jQuery Mobile, you can create multiple pages in a single HTML file.
Separate
each page with a unique id and use the href attribute to link between them:
Example
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>
First Page</h1>
</div>
<div data-role="main" class="ui-content">
<p>First Page Content<p>
<a href="#firstpage">Go to Second Page </a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
<div data-role="page" id="secondpade">
<div data-role="header">
<h1>
Second Page</h1>
</div>
<div data-role="main" class="ui-content">
<p>Second Page Content</p>
<a href="#secondpage">Go to First Page </a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
</body>
Using Pages
as Dialogs
A
dialog box is a type of window used to show special information or request
input.
To
create a dialog box that opens when a user taps on a link, add data-dialog="true"
to the page you want displayed as a dialog:
Example
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>Welcome
First Page</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
<a href="#firstpage">Go to Dialog Page </a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
<div data-role="page" id="secondpage" data-dialog="true">
<div data-role="header">
<h1>
Dialog Page</h1>
</div>
<div data-role="main" class="ui-content">
<p>Dialog Content</p>
<a href="#secondpage">Go to First Page </a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
</body>
jQuery
Mobile Page Transition Effects
jQuery
Mobile has a variety of effects for how to transition from one page to the
next.
The transition effect can
be applied to any link or form submission by using the data-transition
attribute:
<a href="#anylink" data-transition="slide">Slide to Page Two</a>
The table below shows available transitions that can be used with the
data-transition attribute for both pages and dialogs:
Example
<body>
<div data-role="page" id="pageone"><h1>Welcome First Page</h1>
</div>
<div data-role="main" class="ui-content">
<p> Mobile
Page Transition Effects.</p>
<a href="#pagetwo" data-transition="fade">Fade to Page Two</a>
<a href="#pagetwo"
data-transition="flip">flip to Page Two</a>
<a href="#pagetwo"
data-transition="slide">Fade to Page Two</a>
<a href="#pagetwo"
data-transition="flow">flow to Page Two</a>
<a href="#pagetwo"
data-transition="pop">pop to Page Two</a>
<a href="#pagetwo"
data-transition="slide">slide to Page Two</a>
<a href="#pagetwo"
data-transition="slideup">slideup to Page Two</a>
<a
href="#pagetwo" data-transition="slidedown">slidedown to Page Two</a>
<a href="#pagetwo"
data-transition="slidefade">slidefade to Page Two</a>
<a href="#pagetwo"
data-transition="none">none to Page Two</a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
</body>
Note : The fading effect is default on all links in
jQuery Mobile
All effects above also support
reverse/backward actions, e.g. if you want the page to slide from left to right,
instead of right to left, use the data-direction attribute with value
"reverse".
Example
<a href="#" data-transition="slide"
data-direction="reverse">Slide</a>
Creating a Button in jQuery Mobile
A
button in jQuery Mobile can be created in three ways:
- Using the <input> element
<input type="button"
value="Button">
- Using the <button> element
with class="ui-btn"
<button class="ui-btn">Button</button>
- Using the <a> element with
class="ui-btn"
<a href="#" class="ui-btn">link between pages </a>
Buttons in jQuery Mobile are automatically styled, making them
attractive and useable on both mobile devices and desktop computers.
We recommend that you use the <a>
element with class="ui-btn" to link between pages, and <input> or
<button> elements for form submission
Navigation
Buttons
To link between pages by buttons, use the
<a> element with class="ui-btn":
<a href="#"
class="ui-btn">link between pages </a>
Grouped
Buttons
jQuery Mobile provides an easy way for
grouping buttons together.
Use the data-role="controlgroup" attribute together with data-type= "horizontal | vertical "
in a container element, to specify whether to group buttons
horizontally or vertically:
Example
Horizontally
<div data-role="controlgroup" data-type="horizontal">
<p>Horizontal Group:</p>
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">Button 3</a>
</div>
Vertically
<div data-role="controlgroup" data-type="vertical">
<p>Vertical Group (default):</p>
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
<a href="#" class="ui-btn">Button 3</a>
</div>
Back Buttons
To create a Back button, use the data-rel="back"
attribute (this will ignore the anchor's href value):
Example
<a href="#" class="ui-btn" data-rel="back">Go Back</a>
Inline Buttons
By default, buttons take up the full width of the screen. If you
want a button that is only as wide as its content, or if you want two or more
buttons to appear side by side, add the "ui-btn-inline" class:
Example
<a href="#pageone"
class="ui-btn ui-btn-inline">Inline Button</a>
Button Classes
Global Classes
These classes can be added on any jQuery Mobile widgets
(buttons, toolbars, panels, tables, lists, etc..):
Note: If you want to use more than one class, separate each class
class="ui-btn ui-btn-inline
ui-btn-corner-all ui-shadow"
Note: By default, <input> buttons have shadow
and rounded corners. The <a> and <button> element does not.
Examples
Inline buttons: mini and normal
<a href="#" class="ui-btn
ui-btn-inline ui-mini">Inline Button 1</a>
Inline buttons: with rounded corners
<a href="#" class="ui-btn
ui-btn-inline ui-corner-all">Inline Button 2</a>
Inline buttons: Changes the color of the button to a
black background
<a href="#" class="ui-btn
ui-btn-inline ui-btn-b">Inline Button 3</a>
Inline buttons: with shadow
<a href="#"
class="ui-btn ui-btn-inline ui-shadow">Inline Button 4</a>
Icons
jQuery Mobile provides a number
of icons that can be used by applying a
There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons. The icon name is self-describing. For example, the following will display a button with a home icon:
data-icon attribute or a ui-icon- class to a suitable widget.There is an SVG and PNG image of each icon. By default the SVG icons, that look great on both SD and HD screens, are used. On platforms that don't support SVG the framework falls back to PNG icons. The icon name is self-describing. For example, the following will display a button with a home icon:
To add an icon to your button, use the ui-icon class, and
position the icon with an icon position class (ui-btn-icon-pos):
<a href="# "
class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
Note: For other buttons, like buttons in list views and forms,
you must use the data-icon attribute.
Below we
have listed all available icons that jQuery Mobile provides:
The following is a full list of
the icons provided:
You can specify one of four values for
where the icon should be positioned in the button: top, right, bottom or left.
Use the ui-btn-icon class to specify the
position:
Icon Position for Link Buttons
<a href="# "
class="ui-btn ui-icon-search ui-btn-icon-top">Top</a>
<a href="# "
class="ui-btn ui-icon-search ui-btn-icon-right">Right</a>
<a href="# "
class="ui-btn ui-icon-search ui-btn-icon-bottom">Bottom</a>
<a href="# "
class="ui-btn ui-icon-search ui-btn-icon-left">Left</a>
Note: If you do not specify the icon
position for link buttons, the icon will not be shown.
Displaying Only The Icon
To only display the icon, use "notext" as value for
icon position:
Example
A button with only the icon and no text:
<a href="#"
class="ui-btn ui-icon-search ui-btn-icon-notext">Search</a>
A button with only the icon and no text - added rounded
corners and some shadow:
<a href="#"
class="ui-btn ui-shadow ui-corner-all ui-icon-search
ui-btn-icon-notext"> Search</a>
Removing The Circle
By default, all icons have a gray circle (disc) around them. To
remove the circle, add the "ui-nodisc-icon" class to the element or
its container:
Example
A "search" icon with a gray circle around it
(default):
With Text
<a href="#anylink" class="ui-btn
ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow">With circle (default)</a>
Without Text
<a href="#anylink" class="ui-btn
ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">With circle (default)</a>
A "search" icon without the grey circle
(class="ui-nodisc-icon"):
With Text
<a href="#anylink" class="ui-btn
ui-btn-inline ui-icon-search ui-btn-icon-left ui-corner-all ui-shadow
ui-nodisc-icon">Without circle</a>
Without Text
<a href="#anylink" class="ui-btn
ui-btn-inline ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow
ui-nodisc-icon">Without circle</a>
Note: Notice that when you specify the ui-nodisc-icon class while
only displaying the icon, the gray background is removed, but the circle is
not.
Black or White Icons
By default, all icons are white. To change the icon color to
black, add the "ui-alt-icon" to the element or its container:
A white "search" icon (default):
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-corner-all
ui-shadow">White icon (default)</a>
<a href="#anylink" class="ui-btn
ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow">White icon (default)</a>
A black "search" icon
(class="ui-alt-icon"):
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-corner-all
ui-shadow ui-alt-icon">Black icon</a>
<a href="#anylink" class="ui-btn
ui-icon-search ui-btn-icon-notext ui-corner-all ui-shadow ui-alt-icon">Black icon</a>
A black "search" icon without the gray circle
(combining "ui-nodisc-icon" and "ui-alt-icon"):
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left ui-corner-all
ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>
<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-notext
ui-corner-all ui-shadow ui-nodisc-icon ui-alt-icon">Black icon</a>
jQuery Mobile Popups
Popup basics
To create a popup, add the data-role="popup" attribute to
a div with the popup contents. Then create a link with the href set to the id
of the popup div, and add the attribute data-rel="popup"
to tell the framework to open the popup when the link is tapped.
Note: A popup div has to be
nested inside the same page as the link.
Example
<div data-role="main" class="ui-content">
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
<div data-role="popup" id="myPopup">
<p>This is a basics popup.</p>
</div>
</div>
If
you want some extra padding and margin in your popup box, add the
"ui-content" class to <div>:
<div data-role="popup" id="myPopup1"
class="ui-content">
<h3>Welcome!</h3>
<p>The "ui-content" class is
especially useful when you have a popup with
<span style="font-size: 55px;"> styled text</span>, and want the edges and corners to look extra clean and
sleek. <strong>Note:</strong> The text will wrap to
multiple lines if needed.</p>
</div>
Closing Popups
By default, popups can be closed either by clicking outside the
popup box or by pressing the "Esc" key. If you do not want the popup
to be closable by clicking outside the box, you can add the
data-dismissible="false" attribute to the popup (not really
recommended). You can also add a close button to the popup, placed either right
or left. To do so, add a button link with the data-rel="back"
attribute into the popup container, and position the button by CSS classes.
Right close button
<div data-role="popup" id="rightclose"
class="ui-content">
<a href="#"
data-rel="back" class="ui-btn
ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext
ui-btn-right">Close</a>
<p>I
have a close button at the top right corner.</p>
<p><b>Tip:</b> You can also click outside to close
me.</p>
</div>
Left close button
<div data-role="popup"
id=" rightclose " class="ui-content">
<a href="#" data-rel="back"
class="ui-btn ui-corner-all ui-shadow ui-btn
ui-icon-delete ui-btn-icon-notext ui-btn-left">Close</a>
<p>I
have a close button at the top left corner.</p>
<p><b>Tip:</b> You can also click outside to close
me. </p>
</div>
Undismissible Popup
<div data-role="popup"
id=" undismissible " class="ui-content" data-dismissible="false" style="max-width: 400px;">
<a href="#" data-rel="back"class="ui-btn ui-corner-all ui-shadow ui-btn
ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
<p>I
am an undismissible button (data-dismissible="false). The only way to close me
is by clicking on the close button, which is positioned
at the top right corner. You cannot close me by clicking outside of me.</p>
</div>
Positioning Popups
By default, popups will
appear directly over the clicked element. To control the position of the popup,
use the data-position-to attribute on the link that is used to open the popup.
There are three ways of positioning the popup:
<div data-role="main"
class="ui-content">
<a href="#window" data-rel="popup"
class="ui-btn"data-position-to="window">Window</a>
<a href="#elementid"
data-rel="popup" class="ui-btn"
data-position-to="#demo">
id="demo" </a>
<a href="#over"
data-rel="popup" class="ui-btn"
data-position-to="origin">Origin</a>
<div data-role="popup"
id="window" class="ui-content">
<p>I will appear centered within the
window.</p>
</div>
<div data-role="popup"
id="elementid" class="ui-content">
<p>I will appear directly over the
element with id="demo".</p>
</div>
<div data-role="popup"
id="over" class="ui-content">
<p>I will appear directly over the
clicked link.</p>
</div>
<p>This is also a paragraph. I have a child element: This is
a <span id="demo" style="color: red;">span</span> element with id="demo",inside the paragraph.</p>
</div>
Transitions
By default, popups do not have any transition effects added to
them. You can use any of the effects that
are available in jQuery Mobile. Just apply the data-transition="value"
attribute to the link that opens the popup:
Note: For performance reasons,
jQuery Mobile recommend using "pop", "fade" or
"none" for smooth and fast animations.
Example:
<a href="#myPopup" data-rel="popup"
class="ui-btn" data-transition="fade">Fade</a>
Dialog Popup
Standard dialog markup can be placed into a popup. To
create a modal style dialog, add the data-dismissible="false"
attribute to the popup to prevent the click out to close behavior so people
need to interact with popup buttons to close it.
Example
<div data-role="main"
class="ui-content">
<a href="#myPopupDialog" data-rel="popup" data-position-to="window"
data-transition="fade" class="ui-btn
ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>
<div data-role="popup" id="myPopupDialog">
<div data-role="header">
<h1>Header
Text</h1>
</div>
<div data-role="main" class="ui-content">
<h2>Welcome
to my Popup Dialog!</h2>
<p>jQuery Mobile is FUN!</p>
<a href="#" class="ui-btn ui-corner-all
ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left"
data-rel="back">Go Back</a>
</div>
<div data-role="footer">
<h1>Footer
Text</h1>
</div>
</div>
