jQuery mobile 移动web(6)_jquery

jquery mobile event type for mobile devices.

　1.touch event.

Tap quickly touch the screen and leave, similar to a complete click operation.
Taphold Touch the screen and hold it for a period of time.
​ ​ swipe is triggered when the screen pixel moves horizontally by 30px within 1 second.
​ ​ swipeleft Slide to the left
​ ​ swiperight like sliding to the right.

　2. Direction change event

The orientationchange event function is triggered when the orientation of the mobile device changes. The second parameter in the callback function of the event returns a parameter used to identify the current orientation,
This parameter has two return values: portrait (vertical) and landscarp (horizontal).

3. Scroll event,

scrollstart This event is triggered when scrolling starts.
scrollend This event is triggered when scrolling ends.

　4. Show/Hide

Pagebeforeshow event is triggered before the view starts to appear on the screen through animation effects.
Pagebeforehide triggers an event before the view begins to hide through animation effects,
Pageshow event is triggered when the view is displayed on the screen through animation effects.
Pagehide is triggered when the view is hidden through animation effects.

Sample code:

　　$("div").live("pageshow",function(event,ui){ 
　　　　　　　　alert("this page just hidden"+ui.prevPage)
　　　　　　})

　5. Simulate mouse events

vmouseover handles touch and mouseover events uniformly.
vmousedown handles touch and mouse press events uniformly.
vmousemove handles touch and mouse movement events uniformly.
vmouseup handles touch and mouse button release events uniformly.
vclick handles touch and mouse click events uniformly.
vmousecancel handles touch and mouse leave events uniformly.

Page view aids

　1. $.mobile.changePage

Change the switching effect between two views through functional programming. Usually the switching effect is customized when clicking a hyperlink or submitting a form.

　　 Grammar: 　　

　$.mobile.changePage(to,options);
　　　　　　to 是必选参数， 可以传递的参数类型包括字符串，对象。
 　　　　　　options 可选，传递的是一个JSON 数据格式对象，
 　　　　　　用法： 以下实例将改变decondPage.html 的页面效果
 　　　　　　$.mobile.changePage("secondPage.html",{ 
　　　　　　　　transition:"slidedown"
　　　　　　}) 

　Form submission operation　

　$.mobile.changePage("submit.php",{ 
　　　　　　type:"post";
　　　　　　data:$("form#add").seriaize();
　　　　})

　2.$.mobile.loaPage

The main function is to load external pages and insert them into the DOM element of the current page.
​​​$.mobile.loadPage(url,options);
URL is a required parameter, passing an absolute or relative URL address
Options are optional parameters, passing a JSON data object.

　Example: 　

$.mobile.loadPage("secomdPage.html");
　　　　　提交表单并加载结果页面：
 　　　　$.mobile.loadPage("result.php",{ 
　　　　　　type:"get",
　　　　　　data:$("form#search").serizlize();
　　　　})

Data storage:

　 1.jqmData() method;

You can bind any data to the element.

　　$.mobile.jqmData(element,key,value)
The element parameter specifies the element to which data needs to be bound;
Key is the attribute name that needs to be bound to data,
　　　The data bound by value.

　2.jqmRemoveData() method:

This method is to remove the data bound to the element,
　　$.mobile.jqmRemoveData([name])
Name is an optional parameter that specifies which data attribute needs to be removed. If no parameter is passed, all data on the element needs to be removed.

　 3.jqmHasData() method

Determine whether there is bound data on the element,
　　　$.mobile.jqmHasData(element);
The element parameter is a DOM element for data checking.

Address path helper:

　1. Parse URL address

The $.mobile.path.parseUrl function parses a Url specification and returns an object containing all parameter values, allowing us to easily access the parameter properties on the Url address.

　　The syntax of parseUrl function

　　$.mobile.path.parseUrl(url);
The url parameter is a relative or absolute URL address, and the passed-in parameter is required.
The parseUrl function returns an object that contains rich properties.
Attribute: hash Description: All character content after the # sign is equivalent to the hash of location
Attribute: host Description: The host name and port number of the URL
Attribute: hostname Description: Returns the hostname containing only the URL.
Attribute: href Description: Return the entire URL address.
Attribute: pathname Description: Returns the associated path of the file or directory
Attribute: port Description: Request to return the port number of Url
Attribute: portocol Description: Returns the protocol of the request Url address, such as http https
Attribute: search Description: The request parameters after "?" in the return address
Attribute: authority Description: Returns the address consisting of user name, password, host name, and port number,
Attribute: directory Description: Returns the directory path of the requested URL address,
Attribute: domain Description: Returns the path composed of protocol protocol and authority
Attribute: filename Description: Returns the requested Url file name
Attribute: hrefOfHash Description: Returns the URL path that does not contain the hash value.
Attribute: hrefOfSearch Description: Returns the URL path that does not contain request parameters and hash values.
Attribute: password Description: Returns the password in the request URL, such as the ftp protocol password.
Attribute: username Description: Returns the username in the request URL, such as the username of the ftp protocol.

loading show/hide

The method to display the loading dialog box is
　　　$.mobile.showPageLoadingMse();
The method to hide the loading dialog box is
　　　$.mobile.hidePageLoadingMse();

3 Advantages of JQuery Mobile and HTML5

1. Get started quickly and support rapid iteration: In a little more than a week, by reading the JQuery Mobile documentation and the JQuery Mobile book published by O'Reilly, I completed a preliminary version of the app that works. I had no HTML5/JQuery Mobile development experience before this. Compared to Android and iOS, building your UI and logic using JQuery Mobile and HTML5 will be much faster than building under the native system.

Annotation: Native system: Original operating system, such as the Android native system, which is an unmodified system released by Google. In this article, native applications refer to programs developed directly using the API provided by the system, corresponding to programs developed by JQuery Mobile.

I found Apple’s Builder interface to have a steep learning curve, and learning Android’s convoluted layout system was also time-consuming. Additionally, connecting a list view to a remote data source and having a nice look and feel using native code is quite complicated (ListView on Android, UITableView on iOS). I was able to do this with my existing knowledge of JavaScript and HTML/CSS. Quickly implement the same function without learning new abstract concepts such as adapter, delegate, etc. You can just write JQuery code.

2. Avoid the troublesome App Store approval process and the pain caused by debugging and building: The most painful process of developing applications for mobile phones, especially iOS mobile phones, is to get approval from the Apple App Store. To get a native app released to iOS users, you need to wait a fairly long process (it can take days, maybe even weeks). Not only is the first release of a program a tribulation, but so is every subsequent upgrade. This complicates the QA and release process and adds additional time. Since a JQuery Mobile application is just a web application, it inherits the advantages of all web environments: when users load your site, they are immediately "upgraded" to the latest version. Bugs can be fixed and new features added immediately. Even in the Android system - the application market requirements are much more relaxed than in the Apple environment, it is also a good thing to complete product upgrades without users knowing.

A further benefit is that it will be easier to release a beta or test version. Just tell the user to open your URL in their browser and that's it! There is no need to consider the crazy DRM of iOS, nor the necessary APK of Android.

3. Supports cross-platform and cross-device development: A huge benefit is that my app works on Android and IOS right away, and also on other platforms. As an independent developer, maintaining code base for different platforms is a huge undertaking. Writing high-quality mobile applications for a single mobile platform requires a full-time job, and doing similar things repeatedly for each platform requires a lot of resources. The ability for the app to work on both Android and iOS devices is a huge bonus for me.

Taking it a step further, especially with devices running various forks of Android that come in all sizes and shapes, it’s really important to want your app to look good on phones with a wide variety of screen resolutions. challenges. For demanding Android developers, setting up screen splits based on screen size (zooming from fully minimized to maximized) can take a lot of development time. Since the browser will render it the same way on every device, you don't have to worry about this.