|
This is going to be my first article on jquery mobile. In this article I will talk about header and footer toolbars of any page. Toolbars (header and footer) need not to be present in all the webpages but toolbars plays important row specially header.
Let's write code.
Step 1: Create ASP.NET MVC 4 Mobile application.
Step 2: Open HomeController.cs present in Controllers folder and replace Index method with below.
public ActionResult Index()
{
ViewBag.Message = "Here we can write long test to demonstrate the Header, Footer and Content div behavior of a page using jquery mobile along with ASP.NET MVC 4. While scrolling header and footer will be hidden. On tap header and footer will display and hide vice versa.";
return View();
}
Step 3: Open _Layout.cshtml under Views/Shared folder put footel below content div like below.
<div data-role="footer">
I am footer
</div>
Step 4: Now run the application in FireFox, keep the default user agent or change it to any other user agent of mobile.
You can see in above image footer is not visible, now scroll down.
You will able to see the footer when you scroll down as shown above.
Now let's see how to fix the header and footer.
Step 5: Open _Layout.cshtml and add data-position="fixed" to header and footer div like shown below.
< div data-role="header" data-position="fixed">
</ div>
< div data-role="footer" data-position="fixed">
</ div>
Step 6: Now run the application again and you will see header and footer in fixed place while the content of div changes. The header and footer won't be visible while scrolling, it will be visible only when scrolling is stopped.
Step 7: First click on the screen hides header and footer and second click brings header and footer back.
First image is without header and footer(first click on content) second image is with header and footer (second click on content).
If you are on top of the page, click on content div will hide and display the footer only and if you are on bottom of the page, click on content div will hide and display the header only.
Step 8: Open _Layout.cshtml and add data-fullscreen="true" to page div like below.
< div data-role="page" data-theme="b" data-fullscreen="true">
</ div>
Step 9: Now run the application again and you will notice. The whole screen of device is used to display the content of page. You will notice the opacity in header and footer as well.
This ends the article of header and footer of jquery mobile.
|