JQuery Mobile is a js Code of the Mobile phone segment that supports touch screen functionality. This is also the biggest advantage of jQuery Mobile plug-in, below I have compiled some articles about how to use the jQuery Mobile plug-in.
Touch event
Jquery mobile provides the most basic touch event: touch event
Tap:
Quickly touch the screen and exit, similar to a complete Click Event
Taphold:
Touch the screen and keep it for a while
Swipe:
Triggered when the screen pixel is moved more than 30 PX horizontally within 1 second
Swipeleft:
Slide to left
Swiperight:
Slide to the right to change the event
Orientationchange event function is triggered when the direction of the mobile device changes.
The second parameter in the event callback function returns a parameter used to identify the current direction. This parameter returns only two values: portrait (portrait) and landscape (landscape)
However, this event is not supported by all browsers, so be careful when using it.
Rolling event
Currently, jquery mobile supports two types of rolling events.
Scrollstart
This event is triggered when rolling starts. It must be noted that the event on ios is unstable because the dom operation is disabled when rolling.
The dom operation will be put into the queue, and these operations will be executed after the scrolling is complete, but it is estimated that the solution is now complete.
Scrollend
Trigger the show/hide event at the end of the Scroll
In the mobile web Application Based on jquery mobile, we know that a web page has multiple views or pages, but only one is displayed at a time.
When one of the Views is displayed, the rest are hidden. Each view switchover triggers a display/hide event.
Pagebeforeshow
Trigger an event when the view starts to display before the screen through the animation effect
Pagebeforehide
Events triggered before the view starts to hide through the animation effect
Pageshow
Trigger an event when the view is displayed after the screen through the animation effect
Pagehide
Trigger an event when the view is hidden by the animation effect
If the page is not switched once, events will be triggered within four minutes, for example:
When view a switches to view B, the pagebeforeshow event of view a and the pagebeforehide event of View B are triggered first.
When the animation effect is completely displayed on the screen after B view is switched, The pagehide event of a view and the pageshow event virtual mouse event of B view are triggered.
Jquery mobile provides a virtual click event to integrate mouse and touch events on different devices.
Vmouseover
Unified handling of touch and mouse hover events
Vmousedown
Unified handling of touch and mouse pressing events
Vmousemove
Handling touch and mouse movement events
Vmouseup
Handling touch and mouse release events
Vclick
Handling touch and mouse clicks
Vmousecancel
Handling touch and mouse exit events
Simple page instance
After introducing the components required by jQuery Mobile, we can create the jQuery Mobile page. The following is a simple example.
| The Code is as follows: | Copy code |
<! DOCTYPE html> |
|
For jQuery Mobile, every time a data-role = "page" is defined, it is equivalent to a page. jQuery Mobile uses Ajax to operate the DOM by default and automatically hides all pages except the first page, when you click a link to another page, the content of the new page is loaded in Ajax mode. The complete example is provided below. In addition, we can also use some HTML5 semantic tags. For example, the header div can directly use the header tag. For details, see the following example.
| The Code is as follows: | Copy code |
| <! DOCTYPE html> <Html> <Head> <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> </Head> <Body> <Div data-role = "page" id = "home"> <Header data-role = "header"> <H1> jQuery Mobile Demo </Header> <Div data-role = "content"> <A href = "# page2" data-role = "button"> List page </a> </Div> <Footer data-role = "footer"> <H2> Footer </Footer> </Div> <Div data-role = "page" id = "page2"> <Header data-role = "header"> <H1> jQuery Mobile Demo </Header> <Div data-role = "content"> <Ul data-role = "listview" data-inset = "true"> <Li> <a href = "# home"> return to the home page </a> </li> <Li> <a href = "# home"> return to the home page </a> </li> <Li> <a href = "# home"> return to the home page </a> </li> </Ul> </Div> <Footer data-role = "footer"> <H2> Footer </Footer> </Div> </Body> </Html> |
|
(We recommend that you use Firefox, Chrome, and other modern browsers on the PC to browse systems like IE9 + or Android and iPhone/iPad)
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
