JQuery Mobile Web (6) _jquery

jquery Mobile's event type for mobile-end devices.

1.touch event.

Tap quickly touches the screen and leaves, similar to a complete click operation.
Taphold Touch the screen and keep it for a while.
Swipe is triggered when the 30px screen pixel is moved horizontally within 1 seconds.
Swipeleft slide to the left.
Swiperight like the right slide.

2. Direction Change Event

Orientationchange event function when the direction of the mobile device changes, the second parameter in the callback function of the event returns a parameter to identify the current direction.
The parameter has two return values: Portrait (Portrait) Landscarp (Landscape).

3. Scrolling events,

The event is triggered when the Scrollstart starts scrolling.
This event is triggered when the scrollend scroll ends.

4. Show/Hide

Pagebeforeshow triggers an event before the view is displayed on the screen by animating the effect.
Pagebeforehide triggers an event before the view begins to hide through the animation effect.
Pageshow triggers an event when the view is displayed after the screen through an animated effect.
Pagehide is triggered when the view is hidden by an animation effect.

Sample code:

$ ("div"). Live ("Pageshow", function (event,ui) { 
alert ("This page just hidden" +ui.prevpage)
})

　　5. Simulate Mouse events

Vmouseover handles touch and mouse hover events uniformly.
Vmousedown Unified handling of touch and mouse press events.
Vmousemove handles touch and mouse movement events uniformly.
Vmouseup Unified handling of touch and mouse button release events.
Vclick handles touch and mouse click events uniformly.
Vmousecancel handles touch and mouse L leave events uniformly.

Page view Accessibility tools

1. $.mobile.changepage

Change the effect of two views through functional programming. You usually customize the toggle effect when you click the hyperlink or submit the form.

Syntax:

$.mobile.changepage (to,options);
To is a required parameter, the type of parameter that can be passed includes a string, an object.
 option, passing a JSON data format object,
 usage: The following example will change the decondpage.html page effect
 $.mobile.changepage ("Secon Dpage.html ", { 
transition:" Slidedown "

　　　Form Submit Action　　　

$.mobile.changepage ("submit.php", { 
type: "POST");
data:$ ("Form#add"). Seriaize ();
})

2.$.mobile.loapage

The main function is to load the external page and insert it inside the DOM element of the current page.
$.mobile.loadpage (url,options);
The URL is a required parameter, passing an absolute or relative URL address
Options optional parameter, passing a JSON data object.

　　Example:　　

$.mobile.loadpage ("secomdpage.html");
Submit the form and load the results page:
 $.mobile.loadpage ("result.php", { 
type: "Get",
data:$ ("Form#search"). Serizlize ();
})

Data storage:

1.jqmData () method;

You can bind arbitrary data on an element.

$.mobile.jqmdata (Element,key,value)
Element parameters are elements that specify the data that needs to be bound;
Key requires a property name that binds the data.
Value-bound data.

2.jqmRemoveData () method:

The method is to remove the data that is bound to the element.
$.mobile.jqmremovedata ([name])
Name is an optional parameter that specifies which data property you want to remove, and if you do not wear parameters, you need to remove all data on the element.

3.jqmHasData () method

To determine if there is bound data on the element,
$.mobile.jqmhasdata (Element);
An element parameter is a DOM element that is checked for data.

Address Path Accessibility tool:

1. Resolve URL address

The $.mobile.path.parseurl function resolves a URL designation and returns an object that contains all the parameter values, making it easy to access the parameter properties on the URL address.

syntax for parseurl functions

$.mobile.path.parseurl (URL);
The URL parameter is a relative or absolute URL address, and must be selected for incoming arguments.
The parseURL function returns an object that contains rich attributes.
Attributes: Hash Description: #号后面的所有的字符内容, the equivalent of location hash
Properties: Host Description: URL hostname and port number
Properties: Hostname Description: Returns the host name that contains only the URL.
attribute: HREF Description: Returns the entire URL address.
Properties: Pathname Description: Returns the associated path to a file or directory
Properties: Port Description: Request port number to return URL
Properties: Portocol Description: Returns a protocol that requests URL addresses, such as HTTP HTTPS
Properties: Search Description: Return to the Address "? "The request parameters that follow
Properties: Authority Description: Returns the username, password, host name, port number of the address,
Properties: Directiry Description: Returns the directory path of the request URL address,
Properties: Domain Description: Returns the path composed of the Protocal protocol and the Authority
Properties: FileName Description: Returns the URL file name of the request
Properties: Hrefofhash Description: Returns a URL path that does not contain a hash value.
Properties: Hrefofsearch Description: Returns a URL path that does not contain request parameters and hash values.
Properties: Password Description: Returns the password in the request URL, such as the FTP protocol password.
Properties: Username Description: Returns the user name in the request URL, such as the user name of the FTP protocol.

Loading Show/Hide

The way to display the loading dialog box is
$.mobile.showpageloadingmse ();
The way to hide the loading dialog box is
$.mobile.hidepageloadingmse ();

3 Benefits of JQuery Mobile and HTML5

1. Quick start and support for fast iterations: In a little more than one weeks, by reading the jquery mobile document and O ' Reilly's published jquery Mobile book, I completed a preliminary version of the app that works. Before that I had no html5/jquery mobile development experience. Using jquery Mobile and HTML5 to build your UI and logic is much quicker than Android and iOS to build on your native system.

The original system: the original operating system, such as Android, is an unmodified system released by Google. In this article, a native application is a program developed directly with a system-supplied API that corresponds to a program developed by jquery Mobile.

I found that the learning curve of Apple's builder interface was steep, and it was also time-consuming to learn the puzzling Android layout system. Also, to use native code to connect a list view to a remote data source and have a beautiful look is very complex (ListView on Android, UITableView on iOS) I am able to pass the JavaScript and html/that I already know CSS knowledge quickly implements the same functionality without learning new adapter,delegate and so on, as long as you write jquery code.

2. Avoid the hassle of the application store approval process and the pain of debugging and construction: the most painful process for developing apps for mobile phones, especially iOS, is through approval from Apple's App store. To have a native application posted to iOS users, you'll need to wait a fairly long process (several days, maybe even weeks). Not only in the first release of the program to go through the ordeal, every subsequent upgrade is also the case. This complicates QA and release processes and adds additional time. Because the jquery mobile application is just a Web application, it inherits the benefits of all Web environments: When users load your site, they immediately "upgrade" to the latest version. You can fix bugs and add new features right away. Even in Android, where the demand for apps is much looser than Apple's, it's a good thing for users to get their product upgrades out of the box.

The further benefit is that it will be easier to release beta or test versions. Just tell the user to open your Web site with a browser! You don't have to think about iOS's maddening DRM, or the apk of Android.

3. Support Cross-platform and cross-device development: One of the big benefits is that my application can work on Android and iOS as well as on other platforms. As an independent developer, maintaining the underlying code for different platforms is a huge task. Writing high-quality mobile apps for a single mobile platform requires a full time job, and it takes a lot of resources to repeat similar things for each platform. It's a huge gain for me to be able to work with apps on Android and iOS devices.

Further, especially for devices that run various branches of Android, they are of different sizes and shapes, and it's a real challenge to make your app look good on a wide range of screen-resolution phones. For a demanding Android developer, it takes a lot of development time to set up a screen split (from fully minimized to maximum scaling) by screen size. Since browsers are presented in the same way on every device, you don't have to worry about that.