Disable Page Transition On Data-role="header" At Jquery Mobile

Is it possible to disable page transition on data-role='header'? The goal would be to use page transition only at data-role='content'.

Solution 1:

Yes you can do this by making all your headers fixed and adding the same data-id attribute.

<divdata-role="page"><divdata-role="header"data-id="persistent"data-position="fixed"><h1>My Title</h1></div><!-- /header --><divdata-role="content"><p>Hello world</p><ahref="#page2"data-transition="slide">link</a></div><!-- /content --></div><divdata-role="page"id="page2"><divdata-role="header"data-id="persistent"data-position="fixed"><h1>My Title</h1></div><!-- /header --><divdata-role="content"><p>Page 2</p><ahref="#page3"data-transition="slide">Page 3</a></div><!-- /content --></div><!-- /page --><divdata-role="page"id="page3"><divdata-role="header"data-id="persistent"data-position="fixed"><h1>My Title</h1></div><!-- /header --><divdata-role="content"><p>page 3</p></div><!-- /content --></div><!-- /page -->

http://jsfiddle.net/codaniel/7uJfv/1/

​