I have been intensively working with jQuery Mobile during recent days. Following are some of the tips I grasp via using this library.
The first parameter is a string which specifies the relative URL of the home page resource. The second parameter is an object with one property ‘transition’, which specifies the transition to use when showing the page. Actually, you could specify more properties in the second parameter. Please refer to http://jquerymobile.com/test/docs/api/methods.html for the details.
By taking a closer look of jQuery Mobile codes, we could find out what has been done after invoking the method above. Firstly, ‘pagebeforechange‘ event is triggered prior to any page loading and transition. Then, $.mobile.loadPage is invoked to load external page ‘home.html’ via Ajax. The Ajax call looks like below.
By default, Ajax request type is ‘GET’ and data is ‘undefined’. All these default configurations could be rewritten via the second parameter of $.mobile.changePage method. In addition, cross-domain Ajax request is disallowed by default. To allow cross-domain requests, $.mobile.allowCrossDomainPages configuration option should be set to true. After the external page is successfully loaded and injected into DOM, a ‘pageload‘ event is triggered. Later on, page transition occurs. Finally, after the page transition animations complete, ‘pagechange‘ event is triggered. In addition to above events, a ‘hashchange‘ event is also triggered because the current location hash is changed.
URL path helper provide many useful utility methods. One of them is parseUrl function. It parses a URL into a structure that allows easy access to parts of the URL. It returns an object which allows us to access the sub-parts of the URL.
Additionally, path object also provides functions to get (get()) and set (set(path)) location hash, to check whether a URL is relative (isRelativeUrl(url)) or absolute (isAbsoluteUrl(url)).
Another generic way to refresh the display is to trigger ‘create‘ event. In most of the cases, it’s the easiest way to update the whole display.