dev.chetankjain.net

Posts

Showing posts with the label data-ajax

jQuery Mobile Page Transitions with data-ajax=false

In my earlier post here , I outlined the various page transitions that are available in jQuery Mobile. In single-page template documents, jQM uses Ajax to smoothly transition between pages and when not possible, the framework does a simple HTTP request to pull in the page. Situations where Ajax transitions are not used are: When a page loaded is: from an external domain data-ajax="false" attribute is used rel="external" is specified target attribute is specified This is also well documented (with examples) . In multi-page template documents, jQM needs Ajax to transition between the multiple page containers. Now lets play with this a bit. Let us try to override this with the data-ajax attribute and see what happens. Consider below code, you can click on the link below to launch it in a separate browser tab: Launch <!DOCTYPE html> <html> <head> <title>jQuery Mobile Transitions Demo with data-ajax="false...

jQuery Mobile single-page vs multi-page template

[Updated 2012/02/09] In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them? Single Page Template: Launch - example from previous post, notice the address shown as you navigate Lighter and cleaner. Each page is a separate html file and more modular. Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM. The DOM size is relatively smaller Optional to use the "page" data-role element in the code Can turn off Ajax Navigation between pages using data-ajax="false" Recommend to use the <title> tag for page titles The <title> tag always gets precedence during page loads ...