Getting Started With jQuery Mobile

In this article you will learn how to get started with jQuery Mobile (JQM).

What is jQuery Mobile (JQM)?   

JQM is a full framework that is a starting point for mobile sites. It uses the features of jQuery and jQueryUI to provide UI components and API features to build a mobile friendly website.

You don't need to use jQuery Mobile to use jQuery but to use jQuery Mobile you must use jQuery. Another major difference is that jQuery and jQueryUI are designed to be a layer on top of your HTML and CSS. You should be able to just leave your markup alone and enhance it with jQuery. However, jQuery Mobile provides ways to define where you want components to appear using HTML alone; for example (from the jQuery Mobile site):

<ul data-role="listview" data-inset="true" data-filter="true">

<li><a href=" http://www.c-sharpcorner.com/authors/raj1979/raj-kumar.aspx">Raj Kumar</a></li>
<li><a href=" http://www.c-sharpcorner.com/authors/mahesh/mahesh-chand.aspx">Mahesh Chand</a></li>
<li><a href=" http://www.c-sharpcorner.com/authors/iersoy/ibrahim.aspx"> Ibrahim Ersoy</a></li>
<li><a href=" http://www.c-sharpcorner.com/authors/mahakgupta/mahak-gupta.aspx">Mehek Gupta</a></li>
<li><a href=" http://www.c-sharpcorner.com/authors/ae35ca/karthikeyan.aspx"> Karthikeyan</a></li>
</ul>

Let's discuss these properties. The data-role attribute tells jQuery Mobile to turn this list into a mobile-friendly UI component and the data-inset and data-filter attributes set properties of that without writing a single line of JavaScript.

Getting Started

To get started with SignalR:

• Start Visual Studio
• Create a new website
• Provide the name and location of website
• Click "Next"

First of all you need to download the latest versions of jQuery and jQuery Mobile from here:

http://jquery.com/

http://jquerymobile.com/

Now add a new HTML page to your website and add a reference for these files:

<meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

Now add the following HTML5 tags:

<div data-role="page" >

<div data-role="header">
<h1>Login Screen</h1>
</div> 

<div data-role="content">

<p>

 Email: <input id="email" type="text" /><br /><br />

 Password: <input id="password" type="password" /><br />
<br <input id="Submit1" type="submit" value="submit" /></p>
</div> 

<div data-role="footer">

    <h4>Copyright Login</h4>
</div>
</div> 

Now run the application.

Image 1.

This screen is compatible in all mobile devices, it doesn't matter what resolution they have. I have attached my sample application for a better understanding.