jquery Mobile Plugin Usage notes

jquery Mobile is a good framework, although I have not used the Sencha touch, but it is said that the learning cost is much larger than JQ mobile, from the current Web App UI Framework for less choice of circumstances, JQ Mobile is the best choice.

jquery itself is a mature framework, JQ Mobile as its subordinate, inheriting the write Less,do more tradition.

But as a newly arisen project, there are a lot of problems. When I applied to the project, I found the following problems and accumulated a solution.

1. Page transitions, the current page will first go back to the top, and then jump to the target page

Believe that everyone will have problems before the jquery Mobile version 1.1.0 comes out. The page is short, if the page content is very long, it is obvious that the scroll bar will automatically return to the top of the page every time you convert it, and even more frightening is that when you return to the previous page, jquery Mobile restores the location you last browsed, and the scroll bar jumps back from the top to where you were before.

The bad sense of this page seriously affects the user experience, especially on Android phones. A variety of seo/seo.html "target=" "_blank" > Search engine, once I avoid the length of the page to do more than 1 screen, but also try to modify the JQ mobile source (but the effect is not good), after a period of torture, ushered in a jquery mobile update , and then the 1.1.0 version solves the problem.

So if you are still bothered by this problem students, hurriedly to the next version of the JQ Mobile.

2. Page Transitions splash screen problem

In the page transitions, the page content is often flashing, especially for slide effect, fade words not so serious but also will be aware of flashing. This is fatal to the user experience because the mobile browser's support for CSS3 is not too good. The solution is to make the page transition effect of the time, first the content background hidden, plus the following section of CSS

Note that your jquery is best to use 1.7.1 or above version, otherwise the above CSS may still be able to splash screen.

The code is as follows	Copy Code
/* Fixed splash screen * * . ui-page { Backface-visibility:hidden; -webkit-backface-visibility:hidden; * * Chrome and Safari * -moz-backface-visibility:hidden; * * Firefox * }

The 1.7 version of jquery adds support and compatibility for CSS3, which can be said to be designed for the mobile side, and if you're developing web apps, why not?

3.position fixed problem

jquery Mobile before the 1.1.0 version, can not really achieve the fixed effect, when the header uses fixed, drag the page you will see the header flash a flash of follow down, this is actually using JS to achieve header top.

After the release of the 1.1.0 version, jquery Mobile claimed that they really implemented the header fixed, and indeed, in terms of appearance, it was the same as fixed, and we used it very well.

But here I want to explain that the real meaning of CSS position:fixed, only in iOS 5 support, iOS 4 and Android versions of browsers are not supported (other mobile operating system browser I have not tried). This is similar to IE6 's case for position:fixed. jquery Mobile's ability to make headers and footer fixed is the UI feature of its own framework, not resolving browser compatibility issues.

So if you're working on a project and there's a lot of design that needs to be fixed to do it, suggest you talk to the designers. Otherwise you will face the pain of compatibility problem, I have a deep feeling ah.

4. Page control, caching issues

jquery Mobile page mechanism is mainly divided into two, one is a single page, but more than one page.

A single page is where you put all the pages you need in an HTML page, and this time the transitions between page one can depend on the href in a tag, which is the ID that wants to go to the page.

The code is as follows	Copy Code
<a href= "#page_id" ></A>

Pages written in a single page will always exist in the DOM, so there is no caching problem, and the page conversion does not require Ajax to get the content of the newly loaded page. The disadvantage is that when the demand is relatively long, in an HTML page to write the entire app need page and the corresponding JS, the page will appear bloated and difficult to maintain.

So we're more of a multi-page mechanism, write each page separately to the different HTML pages, when you need to go to the corresponding page, only through Ajax to get the content of the page and JS, so that our app code deployment like our website development, a page an HTML file.

There is a problem, because each page is not written together like a single-page, the jquery mobile mechanism only loads the page that needs to be displayed into the DOM, and when you leave the page, the page's DOM is automatically erased, If you want to keep this page in the DOM and show it again later, you need to add the data-dom-cache= "true" attribute

The code is as follows	Copy Code
<div data-dom-cache= "true" data-role= "page" > page content </DIV>

Solve the problem of page caching, then you will encounter the JS problem in page. For example, I would like to cache the page's DOM, but I also hope that every time this page display, trigger the execution of some JS, so this time we in the corresponding page event processing, we can not use pageinit but to use the pageshow, Because Pageinit only fires when this page is loaded from the DOM, if the page is cached, then Pageinit will only be triggered the first time.

The code is as follows	Copy Code
$ (' #page_id '). Bind (' Pageshow ', function () { Every time the page shows what you need to do })

In addition to Pageshow, there are pagehide, Pageremove, Pagebeforeshow, Pagebeforehide and other event responses, can be used for different needs.