All geek questions in one place

JQuery Mobile Static Headers

I have a jQM application that uses the title as a navigation bar. The problem I am facing is that page transitions (in particular, a slide) move the title along with the content as one "page". I am looking for a way to keep the title static during page transitions.

I checked the API and didn't seem to find anything. Has anyone figured out a way to do this? Is this possible with jQM?

Any help would be appreciated!

+6
source share
4 answers

You will need to create your own header, which is not part of the <div data-role="page"> element. Typically, you add your header / footer as a child of <div data-role="page"> , but this makes them jump to the rest of the page.

To remove the title from the transitions, you can absolutely place your own title at the top of the page, and then add an addition to the div elements data-role="content" so that the title does not hide any content.

 <style> #my_header { position : absolute; top : 0; left : 0; width : 100%; height : 50px; z-index : 1000; overflow : hidden; } [data-role="content"] { padding-top : 50px; } </style> <body> <div data-role="page">...</div> <div id="my_header">...</div> </body> <!-- Notice the header div is not nested within any data-role="page" divs -->

I have not tested this, but I am doing something similar for the menu on the site, and it works great. Pages should go beyond the title, and the title should remain in place.

+8
source

This link to the jquerymobile website describes how to do this "correctly." Probably new at 1.20 (I'm just on board with this, so I'm not sure). It works better than a fill solution, but only if you don't need the same static instance of the header, which was probably what it was after the OP, as it retains state. Anyway, Handy link.

+2
source

I do not think that's possible. In JQM, you work with page structures, part of which are the header and footer. Page transitions then apply to the entire page. I tend to make the page transition disappear to make it less intrusive.

0
source

You need an external library such as iScroll-4 ( http://cubiq.org/iscroll-4 ) or scrollability for an all-platform solution. I would prefer iScroll, it works smoothly and correctly.

For iOS5, you can clearly use the position: fixed in CSS for your title. In combination with overflow: touch ;.

The JQM api also allows static headers, but as they understand it, it is similar to how you describe it, the headers and footers disappear and reappear because it recalculates the screen size to adapt the position of the header / footer. http://jquerymobile.com/demos/1.0/docs/toolbars/bars-fixed.html

In addition, there is a good topic in the global menu (adapts to the global title): What is the best way to create menus in jQueryMobile in their ideal link: http://www.roughlybrilliant.com/three_ways_to_implement_a_global_menu_in_jquery_mobile

Does it help?

0
source

Source: https://habr.com/ru/post/902140/

More articles:


All Articles