HTML 5 Front-End Framework jquery Mobile tutorial

Source: Internet
Author: User
Tags min

1. Introduction

JQuery Mobile is a front-end development framework for Web applications of touch-screen smartphones and tablets, co-sponsored by (MT) Media temple, a combination of mobile device vendors and software companies.

The jquery mobile builds on the well-known jquery and jquery UI class libraries, providing front-end developers with a unified UI interface system that is compatible with all major mobile device platforms. Excellent flexibility, lightweight, and progressive enhancement features and accessibility.

The JQuery Mobile Framework is designed to follow the "write less, do-more" idea, through which users can develop unified, Cross-platform, HTML5 applications that do not need to develop application code separately for each device and operating system. The systems and devices currently supported by jquery Mobile are: IOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian.

2. Download and use

JQuery Mobile emphasizes semantic tagging, which is very easy to use. As long as basic HTML is used, you can quickly build Web applications based on jquery mobile. The latest stable version of jquery Mobile is V1.2.0, which can be downloaded via the jquery Mobile official website http://jquerymobile.com/.

jquery Mobile is easy to use, open any text editor you like, create a new file and name it: test.html, add the jquery Mobile framework code at the beginning of the file:

<! DOCTYPE html>
    

Save the file and open it in the browser to browse.

Let's implement a Hello World example where the contents of the <body> tag are replaced with the following code.

<body>
    
     
    
<center data-role= "page" >
    
     
    
     <center data-role= "header" >
    
         

In this code, we first use a data-role to depict the page and use Hello as our header data-role. In the content label, we fill in the <p>hello world</p>. These specific data-role-defined HTML5 attributes are used in jquery Mobile to quickly build an enhanced-style user interface.

Save the code and open it in the browser, with the following effect:

Figure 1 Hello World Operation effect

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.