Weight and health related risks.


Try it and it's free. PC and mobile version can be found on my website Healthfirst.

 

jQuery Mobile at glance


jQuery mobile is a subset or library of jQuery core with a unified user interface that works seamlessly across all popular mobile devices platforms. In other words, jQuery mobile is designed to target different mobile devices regardless to their operating systems or SDK. This concept can be seen as " write once and use many". That means the application that you created will run on the devices such as Android, iPhone, iPad, BlackBerry, Nokia, windows mobile and so on. I guess this is enough theory so let's start and see how we can achieve this.

First, I start showing you the general stracture of a simple and basic jQuery mobile page also called view. Take a look at the code below.




<!DOCTYPE html>
<html>
   
<head>
/*
It's here where you add references to the ressource.
I will show you a full example shortly.
*/
   
</head>
   
<body>
       
<div data-role="page" id="myfirstpage">
           
<div data-theme="b" data-role="header">
               
<h3> header </h3>
           
</div>  <!-- Header div -->
           
<div data-role="content">
/* this the body of your mobile page */
           
</div>  <!-- content div -->
            
<div data-theme="b" data-role="footer">
                   
<h3>Footer</h3>
           
</div>   <!-- Footer div -->

       
</div>  <!-- page div -->
   
   
</body>
</html>

Now let's go through the code and see what it does mean.

<!DOCTYPE html>
!DOCTYPE indicates HTML5. But not all the devices supports HTML5. Don't worry, if the device does not support HTML5 it will just ignore it and
run a version that it supports.

Before jumping to the rest of the code I would like to mention that data- attributes are HTML5.

<div data-role="page" id="myfirstpage">

This defines a page  with "myfirstpage" as id which can be used later to reference your page. The id can be any name you choose.

<div data-theme="b" data-role="header">

This defines your page header with blue color which is defined by data-theme="b". To see other color, try to change "b" in data-theme with a,c,d,e which are
themes already exist in jQuery mobile. The data-theme is not mandatory, you can ignore it. If you wish more themes then you can create custom ones.

<div data-role="content">

This defines the area where all your page contents go.

<div data-theme="b" data-role="footer">

This defines your page footer with blue color which is defined by data-theme="b". To see other color, try to change "b" in data-theme with a,c,d,e which are
themes already exist in jQuery mobile. If you wish to add your own themes then you can create custom ones.

In general a jQuery mobile page has the following components: header, content and footer.

Here is a full example that you can test on your device. You can copy and paste the code below in any text editor and save it under any name you wish with
.html extension. Example save it as index.html

<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
<!-- the meta "viewport" tag sets the screen width to the pixel width of the device  -->
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<!-- the line below refernces the jQuery mobile css (Cascading Style sheet) -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
 
<!-- the line below refernces the jQuery core library -->
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<!-- the line below refernces the jQuery mobile library -->
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

</head>
<body>

<div data-role="page" id="myfirstpage">
           
           
<div data-theme="b" data-role="header">
              
<h3> My page header </h3>
           
</div>  <!-- Header div -->
              
    
<div data-role="content">
       
<p>
This is the first paragraph of the content of my page !!!
</p>
 
<p>
This is the Second paragraph of the content of my page !?
</p>
 
    
</div>  <!-- content div -->
           

    
<div data-theme="b" data-role="footer">
               
<h3>My page Footer</h3>
    
</div>   <!-- Footer div -->

</div>  <!-- page div -->
      
   
</body>
</html>







Related resources and tutorials.

You may be interested in:




This concludes today's tutorial and I hope this helps you. In next tutorial, I'll explain a site with multiple pages.