jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. In my last blog I have introduced you to jquery mobile and how it works, with this blog I will explain the components and what more it offers.
1. Pages
Page structure I have given in my last blog,have a look on that once. Here lets move ahead.
2. Buttons
A button in jQuery Mobile can be created in three ways:
- Using the <input> element.
- Using the <button> element with class=”ui-btn”.
- Using the <a> element with class=”ui-btn”.
3.Icons
jQuery Mobile provides a set of icons that will make your buttons, navbars, headings etc look more desirable.
Below is the list of some available icons that jQuery Mobile provide:
| Icon class | Description | Icon |
|---|---|---|
| ui-icon-arrow-l | Left Arrow |  |
| ui-icon-arrow-r | Right Arrow |  |
| ui-icon-info | Information |  |
| ui-icon-delete | Delete |  |
| ui-icon-back | Back |  |
| ui-icon-audio | Speakers |  |
| ui-icon-lock | Padlock |  |
| ui-icon-search | Search |  |
| ui-icon-alert | Alert |  |
| ui-icon-grid | Grid |  |
| ui-icon-home | Home |  |
4.jQuery Mobile Popups
To create a popup, start with an <a> element and a <div> element. Add the data-rel=”popup” attribute to <a>, and the data-role=”popup” attribute to <div>. Then specify an id for <div>, and set the href of <a> to match the specified id. The content inside <div> is the actual content that will pop up when a user clicks on the link.
We can add a close button to the popup, placed either right or left. For this we have to add a button link with the data-rel=”back” attribute into the popup container, and position the button by CSS classes and attribute like data-position-to=”window”, data-position-to=”#myId or .myClass”
5.jQuery Mobile Tables
Responsive tables allow us to display a large set of tabular data that will look attractive for both mobiles and desktops.
To create a table, add the data-role=”table” and a class of “ui-responsive” on the <table> element, like:
<table data-role=”table” class=”ui-responsive”>
There are two types of responsive tables: reflow and column toggle.
Reflow Table
The reflow mode positions the table data horizontally until it reaches a minimum size, then all rows are grouped together vertically.
Column Toggle Table
The “column toggle” mode will hide columns when there is not enough width to display the data.
To create a column toggle table, add the following to the <table> tag
<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>
6.jQuery Mobile Toolbars
Header Bars
jQuery pprovides a header that located at the top of the page and usually contain a page title/logo or one or two buttons (typically home, options or search).
You can add buttons to the left and/or to the right side in the header.
Footer Bars
The footer is located at the bottom of the page.
The footer is more flexible than the header – it is more functional throughout pages, and therefore it contains as many buttons as needed.
7.jQuery Mobile Panels
Panels in jQuery Mobile will slide out from the left or the right side of the screen with additional content.
To create a panel, add the data-role=”panel” attribute to a <div> element and specify an id
To access the panel, create a link that points to the id of the panel <div>. When a user clicks on the link, the panel will open.
The panel markup must be placed before or after the header, content and footer inside a jQuery Mobile page.
8.jQuery Mobile Layout Grids
jQuery Mobile provides a set of CSS-based column layouts. In real column layouts are not generally recommended on a mobile device, due to the mobile’s screen width.
But some times you want to position smaller elements, like buttons or navigation tabs, side-by-side as if it was in a table. Then, it can be used.
Columns in a grid are of equal width (and 100% wide in total), with no border, background, margin or padding.
There are following five layout grids that can be used
