jQuery Mobile (一)hello jquerymobile

衡玄裳
2023-12-01
最近因为要用到 Jquerymobile 这一类东西, 所以利用一些空闲的时间开始学习Jquerymobile, 然后自己也是一边记录一边学习 。
学习每个技术都是先写hello world,所以我这次第一次写的是hello jquerymobile。代码如下
<!DOCTYPE html>
<html>
<head>
   <title>Hello World</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <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/latest/jquery.mobile.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>


</head>
<body>
<div id="page1" data-role="page">
   <header data-role="header"><h1>jQuery Mobile</h1></header>
   <div data-role="content" class="content">
      <p>Hello World!</p>
   </div>
   <footer data-role="footer"><h1>Footer</h1></footer>
</div>
</body>
</html>
这是一个很简单的页面,但是有几点需要说明一下:

想要在游览器中正常运行一个jQuery Mobile 移动应用页面,需要先获取与jQuery Mobile 相关的插件文件。其中获取的方法有两种,分别是下载相关插件文件和使用URL 方式加载相关文件,登陆jQuery Mobile 官方网站下载,这里我使用的是URL方式加载插件文件 ,只要在页面的<head>元素中加入下列代码 如下:

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

由于是通过jQuery CDN 服务器请求的方式进行加载, 所以执行时必须保证网络畅通。

 类似资料: