Multi-Page template in JQuery Mobile

 In my previous post I had talked about single page template in jQuery mobile. This is my another simple example for creating multiple page template using JQuery mobile.



      
      
      JQuery Mobile Multi Page Template
      
      
      
      


      

Header

This is page1

Move To Second Page
Footer

Header

This is page2

Move To First Page
Footer
 Here the init() method is my onload function, In this function I have registered the on click event for two buttons. The button "moveToPage2" present in page1 is redirect you to second page and the button "moveToPage1" button present in second page is redirect you to first page. Basically these two click event just called the "pageToMove" function with different page id. The actual redirection is happening in "pageToMove()" function. The function $.mobile.changePage function is used for redirecting you to next page, It needs the id of the page and transition as input. The following types of transition available in jQuery mobile.
1. none
2. fade
3. flip
4. flow
5. trun
6. slide
7. slidepade
8. slideup
9. slidedown

Comments

Popular Posts