JQuery Mobile is a front-end open frame for both PC and mobile, and of course most of the time is primarily for mobile development. How to build a jquery mobile development environment? Actually very simple, we just need to introduce the CSS, JS and images and other resource files can be.
There are two ways to introduce these resource files:
1. Introducing JQuery Mobile from the CDN
This method is relatively simple, you just need to introduce CSS and JS files, do not need to introduce images files, they are already stored on the CDN server, of course, such a bad thing is that you can not modify the image or JS and CSS files.
<!--jQuery Mobile cdn:-->
<!--Introducing the JQuery Mobile style -<Linkrel= "stylesheet"href= "Http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!--Introducing the JQuery library -<Scriptsrc= "Http://code.jquery.com/jquery-1.11.3.min.js"></Script><!--Introducing the JQuery Mobile library -<Scriptsrc= "Http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></Script>
<!--jQuery Mobile CDN (Baidu):-->
<!--Introducing the JQuery Mobile style -<Linkrel= "stylesheet"href= "Http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!--Introducing the JQuery library -<Scriptsrc= "Http://code.jquery.com/jquery-1.11.3.min.js"></Script><!--Introducing the JQuery Mobile library -<Scriptsrc= "Http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></Script>
2. JQuery Mobile website Download resource files
: http://jquerymobile.com/download/
After downloading get a compressed file, unzip and select the files we need to put into our project.
<Head><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><Linkrel= "stylesheet"href= "Jquery.mobile-1.4.5.css"><Scriptsrc= "Jquery.js"></Script><Scriptsrc= "Jquery.mobile-1.4.5.js"></Script></Head>
Create your first jquery mobile page
<!DOCTYPE HTML> <HTML><Head><MetaCharSet= "Utf-8">
<meta name= "viewport" content= "Width=device-width, initial-scale=1" ><title>The first jquery Mobile Web</title><Linkhref= "Css/jquery.mobile-1.0.min.css"rel= "stylesheet"type= "Text/css"/><Scriptsrc= "Js/jquery-1.6.4.min.js"type= "Text/javascript"></Script><Scriptsrc= "Js/jquery.mobile-1.0.min.js"type= "Text/javascript"></Script></Head> <Body> <DivData-role= "page"ID= "page"> <DivData-role= "header"> <H1>1th page</H1> </Div> <DivData-role= "Content"> <ulData-role= "ListView"> <Li><ahref= "#page2">1th page</a></Li> <Li><ahref= "#page3">2nd page</a></Li> <Li><ahref= "#page4">3rd page</a></Li> <Li><ahref= "#page4">4th page</a></Li> </ul> </Div> <DivData-role= "Footer"> <h4>Page Footer</h4> </Div></Div><DivData-role= "page"ID= "Page2"> <DivData-role= "header"> <H1>2nd page</H1> </Div> <DivData-role= "Content">content</Div> <DivData-role= "Footer"> <h4>Page Footer</h4> </Div></Div><DivData-role= "page"ID= "Page3"> <DivData-role= "header"> <H1>3rd page</H1> </Div> <DivData-role= "Content">content</Div> <DivData-role= "Footer"> <h4>Page Footer</h4> </Div></Div><DivData-role= "page"ID= "Page4"> <DivData-role= "header"> <H1>4th page</H1> </Div> <DivData-role= "Content">content</Div> <DivData-role= "Footer"> <h4>Page Footer</h4> </Div></Div></Body></HTML>
(01) Create the first jquery mobile page