JQuery Mobile development HTML5 Mobility applications

With the advent of mobile interconnected world, has developed into a variety of mobile operating system separatist situation, and developers need to be able to use the original development knowledge and skills, quickly and easily build mobile applications, and expect to run on different mobile phone operating platform, such as Android,ios, BlackBerry and so on.

At present, there are a number of very good support HTML5/CSS3 mobile application Development framework, the most familiar is the jquery mobile framework (http://jquerymobile.com), It allows developers familiar with the jquery framework to quickly develop mobile apps based on HTML5 and browse directly through the phone's browser. In addition, the jquery Mobile is also very scalable, and users can customize it well, and this article will guide the reader to customize the theme styles provided by jquery Mobile to create styles that meet the needs of the user.

This article assumes that the reader already has preliminary jquery mobile related knowledge, if the reader is not familiar with jquery mobile, you can learn through the following articles, the article link address is:

Unified Interface Tool jquery Mobile Introduction

Http://tech.it168.com/a2010/1210/1136/000001136835.shtml

Use jquery Mobile to implement mobile news browser

Http://tech.it168.com/a2011/0321/1168/000001168231.shtml

JQuery Mobile Implementation News Browser (2)

Http://tech.it168.com/a2011/0323/1169/000001169682.shtml

Use jquery Mobile to implement news browsers (3)

Http://tech.it168.com/a2011/0324/1170/000001170077.shtml

Topics in JQuery Mobile

In jquery Mobile, there is a proposed page template structure that includes parts such as page headers, page bodies, and footers. JQuery Mobile is defined using the Data-role attribute in HTML5, and the following code shows the frame of a principal page:

<div data-role= "page" >

<div data-role= "Header" >
</div>

<div data-role= "Content" >
<p>page content goes here.</p>
</div>

<div data-role= "Footer" >
</div>

</div>

The other suggested element is the label, which is used to specify how the browser will display the page on the phone, as follows:

&lt;meta name= "Viewport content=" Width=device-width, initial-scale=1″&gt;

<meta viewport> tags are important for displaying mobile Web pages correctly on a mobile device, and if you do not use the label, the page content may be distorted or distorted when it is displayed, or it is simply not suitable for mobile device browsing. In the following illustration, a page with a label is displayed, and you can see that the content of the page is displayed to fit the size of the mobile device.

jquery mobile Framework contains a framework of page themes that provides control over page styles. By using the HTML5 data-theme attribute tag, you can easily apply an existing jquery mobile style to a page element. There are 5 types of default theme styles, using English letters to differentiate, such as the built-in styles at the beginning of a-e, and developers can learn how to write a style file by downloading the jquery mobile code. If a developer wants to write a new style, you can use any of the f-z letters to name the newly created style, and then you can write the relevant code.