Detailed description of special events and methods in JQuery Mobile

Detailed description of special events and methods in JQuery Mobile

1. Touch Screen events-Touch events

Tap

Triggers after a quick, complete touch event.

My actual test results: click it, and the effect is similar to that of pressing the common button.

Taphold

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

My actual test result: Hold down for a while, about 1 second, that is, triggered. Very useful.

Swipe

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

My actual test results: I don't understand, I won't use it

Swipeleft

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

My actual test result: Sliding left on the touch screen is very useful.

PS: You can also use it on your computer. You can drag the mouse to the left.

Swiperight

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

My actual test result: Sliding to the right of the touch screen is very easy to use.

PS: You can also use it on your computer. You can drag the mouse to the right.

Usage: use live or bind to a dom element. I use this method (similar to the following ):

$ ('# Wlist'). live ('swipeleft', function (){

Changepage ('up ');

});

2. Gravity sensing event-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 an orientationproperty equal to either "portrait" or "landscape ".

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

Note that we currently bind to the resize event when orientationChange is not natively supported.

Corresponding to the gravity sensing function on the mobile phone, triggered when the display effect changes from vertical to horizontal, or from horizontal to vertical. I did not use this 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.

Individual test results: used when the scroll bar is triggered.

Scrollstop

Triggers when a scroll finishes.

Individual test results: this function is used when the scroll bar is stopped. You can use this function to return the position information of the current scroll bar and record it.

$ ('Body'). live ('rollstop', function (){

$ ('# Hidescroll'). val ($ (this). scrollTop );

});

The preceding figure uses a shadow hidden control named hidescroll to save the position information of the current scroll bar. If you want to return the position of the current scroll bar when using the back page, transfer the value of hidescroll together, whether it is get or post. Remember to write the following on the page:

$ (Document). ready (function () {// document. body. scrollTop = $ ('# hidescroll'). val ();});

4. Page show/hide events

Pagebeforeshow

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

Pagebeforehide

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

Pageshow

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

Pagehide

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

The benefit of these four events is that you can do something during page loading.

For example, add the loading screen during loading:

$ ('Div '). live ('pagebeforeshow', function () {$. mobile. pageLoading ();});

After loading is complete, the loading screen is shadow:

$ ('Div '). live ('pageshow', function () {$. mobile. pageLoading (true );});

5. Page creation event: Page initialization events

Pagebeforecreate

Triggered on the page being initialized, before initialization occurs.

Pagecreate

Triggered on the page being initialized, after initialization occurs.

Sometimes you may encounter this situation: a page has already filled in some custom information, you need to rely on this information to initialize a new page. In my example, when my file list is refreshed, clicking any file will display a dialog box, which will display the name of the file you clicked, and other operations. The new page does not know which file you clicked. You cannot query it again? At this time, you need the Page initialization events event to pass the name of the file you clicked.

$ ('# AboutPage'). live ('pagebeforecreate', function (event ){

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

});

$ ('# AboutPage'). live ('pagecreate', function (event ){

Alert ('This page was just enhanced by jQuery Mobile! ');

});

The preceding two examples are provided on the official jquery mobile website, which allow you to manipulate a page pre-or-post initialization, creating an event only takes effect when initializing a webpage.

It is worth noting that in Jquery mobile 1.0a2, the loading dialog box and other things come in. In fact, the ajax method is used to add the dialog box to the current page in div role = "page" mode. This newly added div stores the path of the newly added div when ajax comes in with its ID.

For example, my home page mian. php has a tag:

Simple search

The result of clicking this label is in mian. in php, an id = "dialog/search. php "div, this div, role =" page ", whose content is file search. body content in php.

In this way, when you click the same connection next time, the page that has been loaded is displayed. The loading speed is certainly fast. However, this means that your ID attribute is no longer a part of the original page, but a div of the current page, so you must remember that when bound to the page, pagecreate event (pagebeforecreate, etc ).

To avoid this problem, use class instead of id. Fortunately, I hardly encountered this problem in my program, because I didn't use the Page initialization events event at all. When initializing some dialog boxes, I performed operations in JS on the homepage, modify the elements in the dialog box (because I know that the displayed dialog box is already a div of the home page, and the id I want will always be found ). But the result is that Jquery mobile 1.0a3 makes all of my dialogs invalid ...... Forget it. You can't wait for the beta version to come out.

6. common functions and methods

Display or shadow 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 with 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 position of a rolling record

// Scroll to Y 100px

$. Mobile. silentScroll (100 );

Set the html breakpoint based on the maximum and minimum width of the display time. I have never used it. I guess it will not display the html after the breakpoint. $. Mobile. addResolutionBreakpoints (method) Add width breakpoints to the min/max width classes that are added to the HTML element.

// Add a 400px breakpoint

$. Mobile. addResolutionBreakpoints (400 );

// Add 2 more breakpoints

$. Mobile. addResolutionBreakpoints ([600,800]);

There are other methods that I have never used or need to use. Wait for the beta1 document to come out.

JqmData (), jqmRemoveData (), and jqmHasData () (method)

$. Mobile. path (methods, properties) Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.

$. Mobile. base (methods, properties) Utilities for working with generated base element. TODO: document as public API is finalized.

$. Mobile. activePage (property)