Home » jQuery Mobile

creating Header in mobile jQuery | Fixed header, content and footer section

2 March 2011 No Comment
Share on Facebook

Head section of mobile jQuery web page includes three important files

  • jQuery Mobile CSS : jquery.mobile-1.0a1.min.css
  • jQuery Framework : jquery-1.4.3.min.js
  • Jquery Mobile Framework : jquery.mobile-1.0a1.min.js

After finishing this article we achive below web page:

The sample page contains the head section with the files included.

   <head>

   <meta charset="utf-8"> 

   <title>My Mobile site</title>
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> 

   <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> 

  </head>

Page holder in Mobile jQuery:

Entire page is built inside page holder, which contains the header section, content section and the footer.

Lets see how to define a page holder.

<body>
 <div data-role="page" data-theme="b" id="my-page">

</div>
</body>

data-role=”page” states that the container act as page holder.

Header in Mobile jQuery:

The mobile header, actual header of the mobile webpage is created inside page holder.

    <div data-role="header">
        <h1>Designscripting.com</h1>
    </div>

Mobile header contains Logo, website header and Home / back button.

Note:
To keep the header even after you scroll set data-position="fixed"
<div data-role="header" data-position="fixed">
	<h1>Designscripting.com</h1>
</div>

Content Section:

The entire content to be published inside data-role=”content”.

   <div data-role="content">
        <ul data-role="listview">
		<li>Home</li>
		<li>About</li>
        </ul>
    </div>

Footer Section:

  <div data-role="footer">
      <h4> <a href="#">Privacy</a></h4>
   </div>

This generlly holds privacy, copy rights information, contact information.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.