jQuery Mobile （一）hello jquerymobile

最新推荐文章于 2024-08-17 11:31:53 发布

游可

最新推荐文章于 2024-08-17 11:31:53 发布

阅读量1.3k

点赞数

分类专栏： jQuery Mobile 文章标签： jQuery Mobile 技术 html

本文链接：https://blog.csdn.net/bao990423420/article/details/13995021

版权

jQuery Mobile 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

最近因为要用到 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 服务器请求的方式进行加载，所以执行时必须保证网络畅通。