Some Components Of Jquery mobile

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.

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


About AshuTomar

Ashu is a Software Consultant at Knoldus Software LLP. she has good knowledge of HTML5, CSS3, java script, less, sass bootstarp framework. She is flexible, adaptive and self motivated personality. She have strong analytical and problem solving skills. She is highly passionate to learn and explore new technologies.
This entry was posted in CSS, HTML, JavaScript, jQuery and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s