Touch events
jquery Mobile provides the most basic touch events: Touches events
Tap
Quickly touch the screen and leave, similar to a complete click event
Taphold:
Touch the screen and keep it for a while
Swipe:
Trigger when moving horizontally above 30px pixels in 1 seconds
Swipeleft:
Slide to the left
Swiperight:
Change the event to the right sliding direction
The Orientationchange event function is triggered when the direction of the mobile device changes.
The second argument within the event callback function returns a parameter that identifies the current direction, which returns only two values: Portrait (Portrait) and Landscape (landscape)
However, this event is not supported by all browsers, so use caution.
Scrolling events
At present, jquery Mobile supports two kinds of scrolling events
Scrollstart
Trigger when scrolling starts, note that the event is unstable on iOS because iOS prevents Dom from scrolling
The DOM operation is placed in the queue and is not performed until the end of the scroll, but is estimated to be resolved now.
Scrollend
To trigger a show/hide event at the end of scrolling
In a mobile Web application based on jquery Mobile, we know that a Web page has many different views or pages, but only one is displayed at a time.
When one of the views is displayed, the rest is hidden, and every view switch triggers the show/Hide Event
Pagebeforeshow
To trigger an event before the screen is displayed with an animation effect
Pagebeforehide
Triggers an event before the view has been hidden by animation effect
Pageshow
Triggers an event when the view is displayed after the screen through an animated effect
Pagehide
Triggers an event when the view is hidden through an animation effect
The 4-clock event will be triggered without a switch to the page, for example:
When a view switches to B view, first triggers the Pagebeforeshow event of the A view and the Pagebeforehide event of B view
When the B view completes the full display on the screen after the toggle animation effect, it triggers the Pagehide event of a view and the Pageshow event virtual mouse event in B view
jquery Mobile provides a virtual Click event to integrate mouse and touch events from different devices
Vmouseover
Handle touch and mouse hover events uniformly
Vmousedown
Unified handling of touch and mouse press events
Vmousemove
Handling touch and mouse movement events
Vmouseup
Handle Touch and mouse release events
Vclick
Handle Touch and mouse click events
Vmousecancel
Handle touch and mouse left events
Simple example of a page
After introducing the components that jquery mobile needs, we can create a jquery mobile page with a simple example below.
| The code is as follows | Copy Code |
| <! DOCTYPE html> |
|
For jquery mobile, each definition of a data-role= "page" is equivalent to a page, and JQuery mobile defaults to Ajax to manipulate the DOM, automatically hiding all but the first page, when clicking on links, linking to other pages will be Aja X to load the contents of the new page, give a complete example below. In addition, we can use some HTML5 semantic tags, such as header Div can directly use the header tag, you can see the following example.
| The code is as follows | Copy Code |
| <! DOCTYPE html> <title>jquery Mobile demo</title> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <meta name= "viewport" content= "Width=device-width, initial-scale=1" > <link rel= "stylesheet" href= "Http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/> <script type= "Text/javascript" src= "Http://code.jquery.com/jquery-1.6.4.min.js" ></script> <script type= "Text/javascript" src= "Http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" ></ Script> <body> <div data-role= "page" id= "Home" > <div data-role= "Content" > <a href= "#page2" data-role= "button" > List page </a> </div> <footer data-role= "Footer" > </footer> </div> <div data-role= "page" id= "Page2" > <div data-role= "Content" > <ul data-role= "ListView" data-inset= "true" > <li><a href= "#home" > Back home </a></li> <li><a href= "#home" > Back home </a></li> <li><a href= "#home" > Back home </a></li> </ul> </div> <footer data-role= "Footer" > </footer> </div> </body> |
|
(It is recommended to use a PC Firefox, Chrome, and other modern browsers and ie9+ or Android, Iphone/ipad system browser browsing)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
