jQuery Mobile学习日记之HelloWorld

这里是本人学习jQuery Mobile的过程，主要用于记录，过程中有不对的地方或不严谨的地方，欢予以指出纠正，非常感谢！

1、首先是下载安装以下文件：

【Opera Mobile Emulator】 http://www.opera.com/zh-cn/developer/mobile-emulator。在PC机上模拟移动设备，但素后来发现Myeclipse2014貌似有带模拟器。

【Myeclipse2014】 http://pan.baidu.com/s/1gd4PE3D 密码：lv3v

以下我是下载了，扔到一个文件夹就没管了-_-不知道有木有影响=  =

【jQuery核心库】 http://jquery.com/download/

【jQuery Mobile】 http://jquerymobile.com/

下载地址：http: //jquerymobile.com/resources/download/jquery.mobile-1.3.2.zip

 

2、根据百度：http://jingyan.baidu.com/article/f0e83a25b2d7da22e5910107.html

3、点开，修改一下要显示的字：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8"/>
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 6     <meta name="description" content="A single-page template generated by MyEclipse Mobile Tools"/>
 7 
 8     <title>喆喆</title>
 9 
10     <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/>
11         
12     <script type="text/javascript" src="./js/jquery-1.8.3.js"></script>
13     <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script>
14     <script type="text/javascript" src="rte/cordova.js"></script>
15     <script type="text/javascript" src="rte/rte.js"></script>
16     <script type="text/javascript" src="js/main.js"></script>
17     
18     <link rel="stylesheet" href="css/style.css" />
19 </head>
20 
21 <body>
22     <div data-role="page">
23         <div data-role="header" >
24             <h1>喆喆君主页~</h1>
25         </div><!-- /header -->
26 
27         <div data-role="content" >
28             <p>HolleWorld！</p>
29                 <canvas width="" height="300"></canvas>
30         </div><!-- /content -->
31 
32         <div data-role="footer" data-position="fixed" >
33             <h4>@sucia</h4>
34         </div><!-- /footer -->
35     </div><!-- /page -->
36 </body>
37 </html>

 

4、运行（不知道为啥我的选安卓出不来，选苹果才可以，之后切换安卓又行...）

 

5、模拟器效果

 

posted @ 2015-10-15 10:18  sucia  阅读(386)  评论(0)  编辑  收藏  举报