jQuery Mobile : Transition Effects
Learn how to use scripts with jQuery Mobile to manage Page Navigation
jQuery Mobile: Changing the Current Page with Scripts
The jQuery Mobile changePage Method can be used change the page displayed when a button is clicked.
The Script listens for the event called tap using bind method. The Event is triggered when the user taps on the screen(or clicks on a device with no touch feature)
Example: jQuery Mobile - Changing the Page DisplayedGive it a TRY! » Note: The change method is called and the ID value is passed for jQuery Mobile Page to Display.
Table : Setting for changePage Method
|allowSamePageTransition||A value of false means changePage request will be ignored where the target is current page.|
|changeHash||A value of true means that the hash fragment in the URL bar will be upadated to the new location.|
|data||To specify the data to be used in the Ajax request used to load a document.|
|dataURL||To specify the URL used when updating the browser URL bar.|
|loadMsgDelay||To set the time in milliseconds after which the loading dialog will be displayed to the user.|
|reloadPage||To force a reloading of a page even if it is already in the DOM of the page container.|
|reverse||A value of true means transition effect will be played in backward direction, default value is false|
|showLoadMsg||To set the loading message to be displayed when a page is requested.|
|transition||To set the transition effect to be used when displaying new pages.|
|type||To specify the method (get or post)|
jQuery Mobile: Controlling the Direction of Transition Effect
When the button on the second page is clicked, the direction of the transition effect is reversed by setting the value of reverse to true
Syntax: jQuery Mobile Changing the Default Page Transition EffectGive it a TRY! » Note: The effect is not that notice able on a static page, and much more pronounced on a dynamic page.
jQuery Mobile: Controlling the Load Dialog
A dialog box displays a statement when the jQuery Mobile loads a document from a remote server for duration longer than 50 milliseconds.
jQuery Mobile allows you to configure and change the period after which the dialog box is displayed by setting a value for loadMsgDelay property.
Syntax: jQuery Mobile Controlling the Load Dialog BoxGive it a TRY! » Note: The page for 100 milliseconds before displaying the message.
jQuery Mobile: Disabling the Loading Dialog
The Dialog Box can be disabled by setting a value of false for showLoadMsg property.