JQuery Mobile and HTML5 Developer App Extension registration page _jquery

The combination of JQuery mobile and HTML5 can directly develop the web version of the app, so it's appropriate to write the Promotion registration page in my current app, but as long as you're familiar with Html4+jquery's combination development, then html5+ Jquerymobile you'll get to it right away.

HTML5 than HTML4 a lot of tags, especially the multimedia this piece has a good support, but if only to do the general web phone page, then most of the tag is not used, jquerymobile and jquery different points on some event names,  Of course, the package is also HTML5 of the original event, but also to say a HTML5 advocated by a rule, here jquerymobile is followed by this rule, HTML5 inside to add a few new permissions to the tag features, data-role= "page", Data-role= "header", data-role= "content", data-role= "footer", why HTML5 will add these features, I think more is to support the web version of mobile phone app development, Because HTML5 advocates the development of the Web app only to create an HTML page, and then each paragraph = a new page, I post a few div tags combined into a whole page, of course, they all add the above characteristics.

<!--data-role= "page" means that this is a HTML5 separate page that can be opened from another Div with page features-->
<div data-role= "page id=" Phoneregister ">
<!--data-role=" header "This feature you want to be the Navigationbar of the app-->
<div data-role=" header "id = "Heardid" ></div>
<!--data-role= "content" to display the contents of the page, you put a table in this tag to display-->
<div data-role= "Content" > </div>
<!--data-role= "footer" You want to be an app Tabbar--> <div
data-role= "Footer" > </div>
</div>

The above div is actually grouped into a HTML5 page.

One, the page attention matters

1. First HTML5 standard page, the first line of code in the page is not the same as HTML4,

html5:<! Doctype>

html4:<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

The purpose of this label is to tell the browser what HTML specifications to support.

2. Introduction of jquery and Jquerymobile support Library

<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>

<link rel= "stylesheet" href= "Http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" >

<script src= "Http://code.jquery.com/jquery-1.8.3.min.js" ></script>

<script src= "Http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js" ></script>

The above library is directly through the link address introduced, and so I directly paste the code, if you want to see the effect, you can directly copy code to an HTML page can be opened directly to run.

Second, whole page code

<! doctype>  

The above code is directly copy to an HTML page that can be run.

The above is a small set to introduce the jquery Mobile and HTML5 development app to promote the registration page, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!