Detailed analysis of unique events and methods in jquery mobile

1, Touch screen event--touch events

Tap

Triggers after a quick, complete touch event.

I actually test the effect: Gently click, the effect and press the normal button almost.

Taphold

Triggers after the a held complete touch event (close to one second).

I actually test the effect: Hold a moment, about 1 seconds, that trigger. Very good.

Swipe

Triggers when a horizontal drag to 30px or more (and less than 20px vertically) occurs within 1 second duration.

I actually test the effect: Do not understand, will not use

Swipeleft

Triggers when a swipe event occurred moving into the left direction.

I actually test the effect: on the touch screen to the left slide, very easy to use.

PS: You can also use on the computer, hold down the mouse and drag to the left.

Swiperight

Triggers when a swipe event occurred moving to the right direction.

I actually test the effect: on the touch screen to the right slide, very easy to use.

PS: On the computer you can also use, hold down the mouse to drag right.

How to: Bind to a DOM element with live or bind, that's what I use (similar to the following):

$ (' #wlist '). Live (' Swipeleft ', function () {

Changepage (' Up ');

});

2, Gravity induction events--orientation Change event

Orientationchange

Triggers when a device orientation changes (by turning it vertically or horizontally).

When bound to this event, your callback function can leverage a second argument,

which contains a orientationproperty equal to either "portrait" or "Landscape".

These values are are also added as classes to the HTML element and allowing you to leverage them in your CSS selectors.

Note ' We currently bind to the ' Resize event when Orientationchange are not natively supported.

Corresponds to the function of gravity sensing on the phone, triggering when the display effect changes from vertical to horizontal or from horizontal to vertical. I have no use for the effect.

3, scroll bar event--scroll events

Scrollstart

Triggers when a scroll begins. Note that IOS devices freeze DOM manipulation during scroll,

Queuing them to apply when the scroll finishes.

We ' re currently investigating ways to allow DOM manipulations to apply before a scroll starts.

Personal test effect: used when the scroll bar is triggered.

Scrollstop

Triggers when a scroll finishes.

Personal Test Effect: When the scroll bar is stopped, use this to allow it to return the current scroll bar position information and record it.

$ (' body '). Live (' Scrollstop ', function () {

$ (' #hidescroll '). Val ($ (this). scrolltop);

});

The position information of the current scroll bar is saved with a shadow hidden hidden control with an ID name of Hidescroll. If you want to use the back page to return the current scroll bar position, please transfer the value of this hidescroll to the past, whether with a get or post. And remember to write on the page:

$ (document). Ready (function () {//Document.body.scrollTop = $ (' #hidescroll '). Val ();

4, Face display Shadow hidden event--page show/hide Events

Pagebeforeshow

Triggered on the page being shown and before its transition begins.

Pagebeforehide

Triggered on the page being hidden and before its transition begins.

Pageshow

Triggered on the page being shown and after its transition completes.

Pagehide

Triggered on the page being hidden and after its transition completes.

The advantage of these four events is that you can do something in the loading process of the page.

For example, add a loading screen when loading:

$ (' div '). Live (' Pagebeforeshow ', function () {$.mobile.pageloading ();});

After loading complete offline hide loading screen:

$ (' div '). Live (' Pageshow ', function () {$.mobile.pageloading (true);});

5, page creation event: Pages initialization events

Pagebeforecreate

Triggered on the page being initialized, before initialization occurs.

Pagecreate

Triggered on the page being initialized and after initialization occurs.

Sometimes you have this situation: a page that has already filled out some custom information and you need to rely on that information to initialize a new page. The example I came across is that my file list is refreshed, and clicking on any of the files can display a dialog box that displays the name of the file you clicked, and other actions. The new page does not know which file you point to, you can not query again? This time you will need page initialization events, the name of the file you clicked passed.

$ (' #aboutPage '). Live (' Pagebeforecreate ', function (event) {

Alert (' This page is just inserted into the dom! ');

});

$ (' #aboutPage '). Live (' Pagecreate ', function (event) {

Alert (' This page is just enhanced by jQuery mobile! ');

});

Above are two examples from the jquery mobile website, which allows you to manipulate a page pre-or-post initialization, creating events that only work when the page is initialized, relative to the page display/hide event.

It's worth noting that in the jquery mobile 1.0a2 version, loading dialog boxes and so on things come in, actually using the Ajax method to add the dialog box to the current page in Div role= "page" mode. The newly added Div, with an ID, saves the path to the Ajax when it comes in.

For example, my homepage mian.php has a label for a:

Simple search

Click on the result of this tag, in mian.php, by Ajax added a id= "dialog/search.php" div, this div, role= "page", its content is the contents of the body in the file search.php.

By doing so, the next time you click on the same connection, the actual equivalent of showing the page that has been loaded in, the load speed is certainly very fast. However, this means that your id attribute is no longer part of the original page, but a div for the current page, so you must remember when binding to the page, Pagecreate event (Pagebeforecreate, and so on).

The way to avoid this problem is to use class instead of ID. Fortunately, I rarely encountered this problem in my program, because I did not use page initialization events, in the initialization of some dialog boxes, I am in the home page JS, I do the action, modify the dialog box elements ( Because I know that these dialog boxes are displayed when it is already a div of the homepage, I want the ID will always find. The result of this, however, is that the Jquery mobile 1.0A3 version has caused all my dialog boxes to fail ... Forget it, elder brother does not update, wait for beta edition to come out not yet.

6. Common functions and methods

Show or hide jquery's own loading screen

Cue the page loader

$.mobile.pageloading ();

Hide the page loader

$.mobile.pageloading (TRUE);

Jump to another page

Transition to the ' About Us ' page with a slideup transition

$.mobile.changepage ("about/us.html", "slideup");

Transition to the "Search results" page, using data from a form and an ID of "search"

$.mobile.changepage ({url: "searchresults.php", type: "Get", Data: $ ("Form#search"). Serialize ());

Transition to the ' Confirm ' page with a ' pop ' transition without tracking it in history

$.mobile.changepage (".. /alerts/confirm.html "," Pop ", false, false);

Set the scroll bar position

Scroll to Y 100px

$.mobile.silentscroll (100);

Set the HTML breakpoint based on the maximum minimum information for the width displayed, I didn't use it, I guess the HTML will not show after the breakpoint. $.mobile.addresolutionbreakpoints (method) Add width breakpoints to the Min/max width classes this are added to the HTML El Ement.

Add a 400px Breakpoint

$.mobile.addresolutionbreakpoints (400);

Add 2 more breakpoints

$.mobile.addresolutionbreakpoints ([600,800]);

There are other ways that I haven't used or need to use. Wait for the Beta1 document to come out and see it.

Jqmdata (), Jqmremovedata (), and Jqmhasdata () (method)

$.mobile.path (Methods, properties) Utilities for getting, setting, and manipulating URL paths. Todo:document as public APIs is finalized.

$.mobile.base (Methods, properties) Utilities for working with generated base element. Todo:document as public APIs is finalized.

$.mobile.activepage (property)