What Is jQuery Mobile?
jQuery mobile is an open-source multi platform UI framework to create mobile apps.
jQuery mobile is a cross platform framework basically used for mobile apps development using HTML5, CSS3, jQuery and jQuery UI. This framework is not only easy to use it is very robust, maintainable, and well organized.
- jQuery Mobile is a framework used to create mobile applications.
- jQuery Mobile is compatible with all desktop browsers and looks same on all mobile devices (Android, iOS and Windows Phone etc).
- jQuery Mobile is based on HTML5 & CSS3 to make the structure of the page with small amounts of scripting.
Purpose of jQuery Mobile?
jQuery Mobile helps you to get quick and good results with less efforts of writing a code. Creating an application is extremely convenient with jQuery Mobile. It designs a good looking web page which looks same on all major browsers and mobile devices.
Writing a code for an application that runs on all the devices is better, and time saving than writing different code for applications for mobile devices and iOS.
Generally to develop native apps,
- Java is used to create applications for android.
- C is used to create applications for iOS.
- C# and .net are used to create applications for Window phone.
But, if we come at Hybrid App development, then using jQuery Mobile and Phonegap like technologies can help in making a single app that will run in all the platforms like IOS, Android, Windows etc.
Features
jQuery Mobile is compatible and looks same on all mobile devices (Android, iOS and Windows Phone etc) and all desktop browsers.
- It is present on the top of jQuery core and uses small amount of scripting. If you have less knowledge of jQuery syntax, then It is the easiest alternative.
- It has different themes which we can use in any application
- It has amazing options of animation effects which can be used to open new page and pop up etc.
Basic elements :
data-role – Define role of the element just like header, content and footer, etc.
data-theme – Allow to choose different design theme for elements in container. Can set as theme=”a” or theme=”b”.
data-position – Specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer).
Define the position of element in the container. We can define the position as left, right, top and bottom.
data-transition – Transition attribute allow for different animation. It provides ten built-in animations which can we can use for loading the new page as well as for pop ups.
data-icon – Specifies the icon added to element. It provides fifty pre-built icons which can be used as per requirement.
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://www.googleapis.com; object-src 'self'"/>
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- Include jQuery Mobile stylesheets -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>To Create a basic page using jQuery Mobile elements:
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>I Am Now A Mobile Developer!!</p>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>The HTML5 data-* attributes are used throughout jQuery Mobile to create a “touch-friendly” and attractive look for mobile devices.
The data-role=”page” Is the whole page(Content and Images etc) that is displayed in browsers.
The data-role=”header” creates a bar at the top of the page which specifies the header of the page.
The data-role=”main” defines the main container of the page which contains text, forms buttons, images etc.
The “ui-content” This is a selector which we can use as an inner container of the content. It provides us an additional padding and margin inside the content.
The data-role=”footer” creates a bar at the bottom of the page which specifies the footer of the page.
Header structure
The header plugin specifies the parent container of the header element
To make the header on the application we have to define [data-role=”header”] on the parent container.
In the below code, the cancel button appears in the left, heading at the center, and save button will appear in the right of the container. These positionings also depend upon the sequence written in the code.
<div data-role="header">
<a href="index.html" data-icon="delete">Cancel</a>
<h1>Edit Contact</h1>
<a href="index.html" data-icon="check">Save</a>
</div>Navbar
jQuery Mobile has a very basic navbar widget that is useful for providing up to 5 buttons with optional icons in a bar, typically within a header or footer.
Note: If more than 5 items are added, the navbar will simply wrap to multiple lines:
<div data-role="navbar">
<ul>
<li><a href="a.html" data-icon="grid" data-iconpos="top" data-theme="b">One</a></li>
<li><a href="b.html" data-icon="calendar" data-iconpos="top" data-theme="b">Two</a></li>
<li><a href="c.html" data-icon="camera" data-iconpos="top" data-theme="b">Three</a></li>
<li><a href="d.html" data-icon="clock" data-iconpos="top" data-theme="b">Four</a></li>
<li><a href="e.html" data-icon="check" data-iconpos="top" data-theme="b">Five</a></li>
</ul>
</div>So, these are the basics of developing an App in a hybrid environment using jQuery Mobile. By following the proper structure and methods of this framework, we can give the user almost same experience of a Native App.
