1. Need to run jquery MobileMobile Application page, you need to download jquery Mobile 3 related plug-in files (multiple versions), JQUERY.MOBILE-1.2.0.MIN.CSS, Jquery-1.8.3.min.js, Jquery.mobile-1.2.0.min.js,jquery Mobile official Address: http://jquerymobile.com
2, load the plug-in file into the page, pay attention to their loading order, statements such as：
Copy Code code as follows:
<link href= "Css/jquery.mobile-1.2.0.min.css" rel= "Stylesheet" type= "Text/css"/>
<script src= "js/jquery-1.8.3.min.js" type "Text/javascript" ></script>
<script src= "Js/jquery.mobile-1.2.0.min.js" type= "Text/javascript" ></script>
3, Hello World sample code is as follows：
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "viewport" content= "width=device-width,initial-scale=1"/>// Set the width of the page to the same screen width as the mobile device
<link href= "css/jquery.mobile-1.2.0.min.css" rel= "Stylesheet" type= "Text/css"/>
& Lt;script src= "js/jquery-1.8.3.min.js" type "Text/javascript" ></script>
<script src= "js/" Jquery.mobile-1.2.0.min.js "type=" Text/javascript "></script>
</HEAD>
<BODY>
< Div id= "Page1" data-role= "page" >
<div data-role= "header" > <div data-role= "content" class= "content" ><p>hello world!</p></div>
<div data-role= "Footer" > </div>
</BODY>
4, since jquery Mobile has fully supported the HTML5 structure, the,<body> principal element code can also be modified to:
Copy Code code as follows:
<BODY>
<section id= "Page1" data-role= "page" >
<div data-role= "Content" class= "content" ><p>hello world!</p></div>
<footer data-role= "Footer" ></section>
</BODY>
5. To better browse jquery Mobile on the PC sideThe performance of the page in the mobile terminal, you can download Opera Mobile simulator, download address: http://cn.opera.com/, preview effect map:
