Jquery.mobile Mobile Website Brief

First, the final effect:

Recently made a Web application accessed with a mobile browser, using the more popular HTML5, in order to improve development efficiency and save time decided to adopt the existing open source framework, eliminate the design and compatibility.

Some of the more excellent frameworks: 10 excellent mobile Web application Development Framework recommendations

The final choice is jQuery Mobile, official address: http://jquerymobile.com

JQuery Mobile is a Web development framework for touch-screen smartphones and tablets. Can work on existing mainstream smartphones and tablets, and build on jquery and jquery UI libraries, with minimal HTML5, CSS3, JavaScript, and AJAX scripting code to render the layout of your page.

JQuery Mobile offers a large number of practical demo instances to reduce learning costs and get started easily. For the Chinese version of the document, you can find help in the W3cschool jQuery Mobile Tutorial.

I use jquery mobile 1.3.2 like to use jquery-1.8.2.min.js to normal operation, the official website download jquery Mobile package, and then follow the guidelines to reference CSS and JS, do not forget to refer to the jquery package.

Note that in order for the width of the Web page to automatically adapt to the width of the phone screen, add the following to the head tag:

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no "/>width=device-width: Indicates width is the width of the device screen initial-scale= 1.0: Represents the initial scaling minimum-scale=1.0: Represents the minimum scale maximum-scale=1.0: represents the largest scale User-scalable=yes: Indicates whether the user can adjust the zoom ratio

Since jquery Mobile is a front-end UI, it is possible to dynamically fetch data from the background asynchronously, one that can be combined with WCF or webservice, without having to build a local background, or using ***HANDLER.ASHX to return JSON or XML data.

For a ListView control, a refresh action is required after dynamic binding to display, Listview.listview ("refresh");

Each component Refresh method:

check box:

$ ("input[type= ' checkbox ']"). Prop ("checked", true). Checkboxradio ("refresh");

Radio Box:

$ ("input[type= ' Radio ')"). Prop ("checked", true). Checkboxradio ("refresh");

Drop-down menu:

var myselect = $ ("#selectfoo"); Myselect[0].selectedindex = 3;myselect.selectmenu ("refresh");

Sliders:

$ ("input[type= ' range ']"). val. Slider ("Refresh");

Switch:

$ ("#selectbar"); Myswitch[0].selectedindex = 1;myswitch.slider ("refresh");

For some components may not meet the personalization requirements, such as date control on the phone side of the choice, you can choose the matching plug-in to complete: share 15 of jquery Mobile custom plug-ins

Note jquery Mobile to the page definition, a page has multiple pages under the tab, the switch between the different tags, the page load only load the content under the specified page, including JS, if the need to load JS is not included in the head tag, it will not be loaded, Causes the page to switch and not achieve the desired effect.

Special Problem Solving methods:

Data-tap-toggle= "false" header and footer do not disappear when the page scrolls

data-position= "fixed" after the effect is: page scrolling when the header and footer disappear

JQuery Mobile's resources in CSDN

JQM Summary of common error resolution methods