An introductory tutorial on developing mobile-side web apps using the jquery mobile framework _jquery

A. JQuery Mobile incremental Enhanced design and browser support
According to Wikipedia, the design of progressive enhancement includes the following points

• Basic content should be accessible to all Web browsers (all browsers should be able to access all the basics)
• Basic functionality should be accessible to all Web browsers (all browsers should be able to access all the underlying features)
• Sparse, semantic markup contains all content (everything should be within a few semantic tags)
• Enhanced layout is provided by externally linked CSS (enhanced functionality should be provided by external CSS)
• Enhanced behavior is provided by unobtrusive, externally linked JavaScript (enhanced behavior provided by external JavaScript)
• End-User Web browser preferences are respected (end user's browser habits should be respected)

If you use HTML5 technology such as Web SQL Database in actual development, the final web App will be supported less than the JQuery mobile, but two mainstream mobile browsers Android and Apple IOS System browser and Its desktop version will certainly provide the best support.

Two. HTML5 data-* Properties
JQuery Mobile relies on the HTML5 data-* property to provide a range of support (UI components, transitions, and page structures), and browsers that do not support the HTML5 property ignore the effects of these properties by default, such as adding a header to the page, which can use the following HTML:

<div data-role= "header" >
   
 

This creates a jquery mobile style header, as you can see from the figure below, that this header style is ideal for mobile devices, and after adding the data-role= header attribute, the H1 in the div is rendered to a certain style, which is jQuery Mobile convenient and fast, but also its design purposes--write less, do more.

In addition to the JQuery Mobile also has the following data-role attribute (partial attribute), has given a certain style and the user action response effect.

data-role= "Content", data-role= "button", Data-theme = "", data-role= "Controlgroup", data-inline= "true", data-role= "fi" Eldcontain ", data-role=" ListView ", Data-rel=" dialog ", data-transition=" Pop ", respectively corresponding to the main content, buttons, theme colors, edited buttons, inline buttons, form elements, List view, dialog box, page transitions.

Three. JQuery Mobile Basic Use method
1. Introduction of JQuery Mobile
With jquery mobile, you need to introduce the jquery mobile component in the page header, including the following sections
(1) JQuery Library
(2) JQuery Mobile CSS
(3) JQuery Mobile Library

You can introduce the above components with this head

<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1.5" >

&NBSP
3. Simple Page Instances
We can create a jquery mobile page after introducing the components that are required by jquery Mobile, and here's a simple example.

 <! 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.

<! DOCTYPE html>  

Four. Development principles
first of all, we need to know that a good Web App needs a nice UI and user experience (UE), although essentially as a site, content is what users need, but we still need to use a good UI and UE as content to connect with the user, so we introduce JQuery mobi Le to make UI and interaction for Web apps.

With the Web app interface, you need to interact with the data to make the app. Here you can use database such as PHP and Mysql to provide data-driven for web apps, but Kayo wants a new approach, the HTML5 approach, using the HTML5 specification for Web SQL database--a simple and powerful Javascript database APIs, which store data in a local database (such as a SQLite embedded in a browser), and also use Storage (local storage) in the HTML5 specification to store data, which reduces web App dependency on the network, and the Web apps are done with front-end technology (very shocking!). ）。

Finally have to mention the offline application cache (offline program caching), it is also HTML5 features, allowing users to run the Web app without a network connection, so we can use this feature to create Web apps that support offline use, and further reduce web The APP's reliance on the web.

1. Responsive design
response web Design by Ethan Marcotte, popular point, that is, web interface can be compatible with a variety of terminals, rather than each terminal to do an interface. Tencent and other large websites have different interfaces for different devices, for example, 3g version, touch screen version, ipad ..., this will add a lot of duplication of work, so we can design a gradual interface for the site, automatically adapt to different equipment, of course, the effect of equipment can be a gap. Here Kayo a little bit, the emergence of responsive design, largely due to the development of mobile Internet and mobile device hardware, and the development of mobile Internet relies on the upgrading of mobile hardware, so want to continue to upgrade the APP, you have to first hardware manufacturers to power.

In the end, the idea of responsive design, of course, is to be applied to the design of Web apps, and these jquery mobile has been done for developers, and jquery Mobile's default UI style has been done in response style, and it provides some additional response The method to be taken into account will be introduced in detail in future.

2. Progressive Design

"The front-end design is designed to be kayo by incremental enhancements because different platforms have different WEB environments for different devices, so it's hard to ensure that the same effect is present on every device for some excellent front-end effects, So instead of lowering the overall front-end style for the same effect on all devices, it's better to have better devices that are more effective, and the basic effect is compatible with all the devices. The same is true for JQuery Mobile, where the core features support for all devices, while newer devices can achieve better page effects. ”

The purpose of using JQuery Mobile here is obvious: to make Web apps compatible with different devices and to show better performance in more advanced devices than sacrificing good design for the sake of unification.