Jquery mobile framework popup example

Download at github

Introduction about jQuery mobile:

Jquery mobile is built with Jquery library. It uses HTML5, CSS3 and AJAX. It is a touch optimized web framework for creating mobile web applications that works on all latest smart phones and tablets. It only uses HTML, CSS, Javascript

Create basic view:

Elements declared using data-role attribute in DIV tag. To use Jquery mobile, you need to include 3 library files.

1. CSS file - jquery.mobile.css
2. jQuery min file – jquery.min.js
3. jQuery mobile file – jquery.mobile.js

Step1:

. In this first step, place bellow code in between head tags.

<link rel="stylesheet" href="jquery.mobile.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile.js"></script>

Step2:

Now the html is separated as 3 blocks like header, content and footer.

<div data-role="page">
  <div data-role="header">
    <h1>Page Title</h1>
  </div>
  <div data-role="content">  
    <p>Page content goes here.</p> 
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>
</div>

Now it’s ready to use in your application.