Today I am going to explain how to call multiple change page in Single HTML file when you are using jquery mobile in mobile application.
When you developing an mobile application using hybrid (Phonegap) and jQuery Mobile, you can use explained code here.
Read about: To setup SQLite for Android-Phonegap application
Let’s check code step by step:
Step 1
USE : < a href='menu.html#home' rel='external' > Text < /a> where home is the page id which you want to load the content.
Step 2
Include core jQuery and jQuery mobile into folder and add it to top of the page.
1 2 3 4 | <script src="../js/jquery-1.9.1.min.js"></script> <script src="../js/jquery.mobile-1.3.1.js"></script> |
Step 3
Now write your HTML code and into your < a href=" "> tag add your div id with #. Like here div id products passed into < a href="#contact"> .and rel=”external” is necessary to pass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <div data-role="page" id="contact"> <h1>contact</h1> <!-- Start of navigation bar --> <div data-role="navbar"> <ul> <li><a href="menu.html#home" rel="external">Home</a></li> <li><a href="menu.html#contact" rel="external">Contact</a></li> <li><a href="menu.html#aboutus rel="external"">About us</a></li> </ul> </div> </div> <div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page. <p>Welcome to my home page <p>Any stuff that will appears in the home page body must be added here. </div> <div data-role="page" id="aboutus"> <div data-role="header"> <h1>Home</h1> </div><!-- /header --> <div data-role="content"> <p>I'm first in the source order so I'm shown as the page. <p>Welcome to my home page <p>Any stuff that will appears in the home page body must be added here. You can add any HTML code, images or anything that the ordinary web pages support </div> |
That’s it. Check your code into mobile application. and You can see all as multiple pages.
Read: Save Image/File into sdcard in Android using Phonegap
Hope this article helps someone else out.As always, thanks for reading. Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.
Comments (2)