jquerymobile教程：[1]helloworld

时间：2024-10-23 13:45:17

1、选择一款合适的IDE，如：DreamweaverCS6、VisualStudio、Myeclipse2014等这里笔者使用Myeclipse2014举例

2、启动Myeclipse2014，选择新建html5 手机应用工程

3、新建html5 手机应用工程，命名--》选择jquery Mobile完成

4、查看工程目录，在web app 开发时，重点关注下www目录其中index.html是程序入口，js/css文件夹分别存放js和css文件（目前已有JQM需要的库文件）

5、点开index.html，修改代码，例如：<!DOCTYPE html><html><head媪青怍牙> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content="A single-page template generated by MyEclipse Mobile Tools"/> <title>Single-Page Application</title> <link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script> <link rel="stylesheet" href="css/style.css" /></head><body> <div data-role="page"> <div data-role="header" > <h1>Single-Page Application </h1> </div> <div data-role="content" > <h1>Hello World</h1> </div> <div data-role="footer" data-position="fixed" > <h4>Footer content</h4> </div> </div></body></html>

6、选中工程，右击-》run as-》Mobile Web Simulator Application-》选择android启动

7、查看模拟器效果，如图