Some Components Of Jquery mobile

Reading Time: 4 minutes

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”.


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  a1
ui-icon-arrow-r Right Arrow  arw-left
ui-icon-info Information  info
ui-icon-delete Delete  close
ui-icon-back Back  back
ui-icon-audio Speakers  speaker
ui-icon-lock Padlock  lock
ui-icon-search Search search
ui-icon-alert Alert  alert
ui-icon-grid Grid  grid
ui-icon-home 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.

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


Written by 

Rachel Jones is a Solutions Lead at Knoldus Inc. having more than 22 years of experience. Rachel likes to delve deeper into the field of AI(Artificial Intelligence) and deep learning. She loves challenges and motivating people, also loves to read novels by Dan Brown. Rachel has problem solving, management and leadership skills moreover, she is familiar with programming languages such as Java, Scala, C++ & Html.