jquery Mobile Custom WebApp Development Example (i)--preface

With jquery Mobile for a period of time WebApp development, ready to use their own a small demo to do a modular sharing

Click Demo Demo

Mobile phone demo QR Code:

This demo is already a relatively old version, the user experience fluency does have a lot of problems, but after I write this series of WebApp development examples, will solve most of the problems

here are some points to be written about later:

1: Talk about some common problems with the jquery mobile solution.(FAQ's resolution View)2:jquery Mobile implements a multi-page jump (not the page in a. html file, but each page is separated into a different. html file) 3: Custom jquery Mobile and custom jquery Mobile theme Styles
4:iscroll implementing a pull-down refresh, customizing the ScrollBar Effect 5: Support left and right swipe to open closed Panels Panel 6: Adaptive swipe auto-play full-screen carousel ad effect 7: Menu navigation content more when left and right swipe Toggle 8: Start Page effect like app, swipe to the last image and go to homepage , or set the number of seconds to go home 9: Customize the jquery mobile form and form validation prompt message display for several seconds auto-hide 10:HTML5 audio Custom Add click Sound and HTML video custom player
11: Responsive design (already has a small demo on response design) 12:ajax page Jump parameter pass and get 13: Picture delay loading speed up 14:webapp HTML5 offline cache

That's almost all .... This instance will all take the jqm1.4.2 version

It says a lot, and now I'm going to talk about JQM page jump:

page Jump Goto () function code:

function goTo(page) {$.mobile.changePage(page, {  transition: "slide"});}

This method invokes the JQM object Changepage () method to implement the page jump,

Transition: The value of "slide" can be modified to the desired page transition effect if: Pop flip flow and so on, these values can be found in the jquery mobile Chinese API

page Jump a tag, href do not like the original page jump that write, directly do not write anything, jump with the onclick event called Goto () function to achieve the jump

<a href="" onClick="goTo(‘myPageTwo.html‘)">change to myPageTwo</a>

Note: The value of the Goto () method incoming is the path to the page plus the file name, and do not forget to write. html

Page Switch Demo download

Learn more about WebApp Development tips please follow Wei detached personal website