HTML5与JQuery.Mobile（一）

最新推荐文章于 2024-03-17 00:09:41 发布

Soloman

最新推荐文章于 2024-03-17 00:09:41 发布

阅读量2.8k

点赞数

分类专栏： Android移动开发 HTML5/CSS/JavaScript 文章标签： html5 header stylesheet 浏览器 css html

Android移动开发同时被 2 个专栏收录

77 篇文章 0 订阅

订阅专栏

HTML5/CSS/JavaScript

36 篇文章 0 订阅

订阅专栏

这个系列主要讲解在HTML5中添加JQuery.Mobile支持；本系列内容大部分来自于VTC.COM.JQUERY.MOBILE.FRAMEWORK教程。

对于一个简单的HTML5页面我们需要做一些改造：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 告知浏览器页面如何展现，这里的值表示页面宽度与设备宽度一致，初始化不放大，且最大放大比例为1（即永远不放大）-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>无标题文档</title>
<!-- jQuery.Mobile的css和js文件-->
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.css" />
<script src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
<!-- data-role分别指定了page、header、content、footer对象 -->
<section id="homepage" data-role="page">
  <header data-role="header">
    <h1>应用程序标题</h1>
  </header>
  <section data-role="content">应用程序内容</section>
  <footer data-role="footer">
    <h1>应用程序脚注栏</h1>
  </footer>
</section>
</body>
</html>

下面把我们需要掌握的知识点罗列一下：

默认情况下我们可以将多个page放置于同一个html文件中，此时仅有第一个page显示对象显示，其余的对象hidden="true"；
我们通常情况下通过添加导航对象将各个页面联系起来；
页面的导航功能经常是通过一个data-role=navbar的nav对象来实现的；
为了给导航按钮添加特效，我们使用class="ui-btn-active ui-state-persist"；
为了给页面切换添加特效，我们使用data-transition="slideup"；
为了弹出对话框，我们使用data-rel="dialog"；
为了在页面中添加一个列表对象，我们使用data-role="listview"表示列表对象，使用data-role="list-divider"表示分割线；
为了在页面中添加返回按钮，我们使用data-back-btn-text="返回"；
为了预取链接内容，我们使用data-prefetch="true"；
为了使得页面缓存，我们使用data-dom-cache="true"；

示例代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 告知浏览器页面如何展现，这里的值表示页面宽度与设备宽度一致，初始化不放大，且最大放大比例为1（即永远不放大）-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>测试页面</title>
<!-- jQuery.Mobile的css和js文件-->
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.1.css" />
<script src="jquery.mobile/jquery-1.8.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.1.1.min.js"></script>
</head>

<body>
<!-- data-role分别指定了page、header、content、footer对象 -->
<section id="homepage" data-role="page">
  <header data-role="header">
    <h1>应用程序标题</h1>
  </header>
  <section data-role="content">
    <p>想了很久，还是决定把自己知道的一些事情说出来，由于本人在几家食品公司都做过质检员，所以我现在说出来的情况，请大家还是多琢磨一下。大家看看就是了，至于还会不会去购买，就不是我能管的事情了。很可能会有人说我是某某利益集团的人派来抹黑谁的，对不起，我只是凭良心说话！首先一个，大家最不应该去购买的就是野山椒泡椒凤爪!重庆现有的生产凤爪的还能上眼的厂家有优友(这个是大品牌，但往往外表越光鲜，里面就越烂)、巧媳妇(位于重庆歌乐山，近年来越做越大，有争龙头老大的架势，但还是只有当受气媳妇，被前面那个庞然大物压制)、黄巢(就是一个农民企业生产作坊)。</p>
    <!-- 打开对话框画面 -->
    <a href="#gallery" data-rel="dialog">打开对话框</a>
    <p>泡脚凤爪的原材料是鸡爪，这个谁都知道，可是有多少人见过还没有变成凤爪的鸡爪(既原料)，相信你们看了之后就会决定不买那东西吃了，重庆所有的泡脚凤爪的主材鸡爪都是从外地运来的，全部是饲料鸡。而且大部分是非正常死亡的鸡的爪子!可能会有人问为什么我说的这样肯定，因为所有的鸡爪都是冰冻运来的，而且鸡爪里面还有血水，也就是说，这个爪子不是鸡在被放了血之后宰下来的，我这样说，大家懂了吧，而且大部分鸡爪还伴随得有鸡毛、老皮和鸡粪!没有做过任何的处理就这样宰下来，说到这里了，大家还会觉得那个爪子不是死鸡瘟鸡病鸡的爪子嘛？ </p>
  </section>
  <!-- data-position="fixed"用于固定footer对象 -->
  <footer data-role="footer" data-position="fixed" data-id="main"> 
    <!-- 添加导航工具栏 -->
    <nav data-role="navbar" class="navmain">
      <ul>
        <!-- 添加导航按钮的状态显示-->
        <li><a href="#homepage" class="ui-btn-active ui-state-persist">主页</a></li>
        <!-- 添加页面切换时的动画效果 -->
        <li><a href="#gallery"  data-transition="slideup">相册</a></li>
        <li><a href="#contact" data-transition="flip">联系</a></li>
      </ul>
    </nav>
  </footer>
</section>
<!-- 添加返回按钮 -->
<section id="gallery" data-role="page" data-add-back-btn="true" data-back-btn-text="返回">
  <header data-role="header">
    <h1>应用程序标题</h1>
  </header>
  <section data-role="content"><p>第二个页面内容</p>
  <ul data-role="listview">
  <li data-role="list-divider">分割线</li>
  <li><a href="#">测试内容</a></li>
  <li><a href="#">测试内容</a></li>
  <li><a href="#">测试内容</a></li>
  <li><a href="#">测试内容</a></li>
  <li data-role="list-divider">分割线</li>
  <li><a href="#">测试内容</a></li>
  <li><a href="#">测试内容</a></li>
  <li><a href="#">测试内容</a></li>  
  </ul>
  </section>
  <!-- data-position="fixed"用于固定footer对象 -->
  <footer data-role="footer" data-position="fixed" data-id="main">
    <nav data-role="navbar" class="navmain">
      <ul>
        <li><a href="#homepage">主页</a></li>
        <li><a href="#gallery" class="ui-btn-active ui-state-persist">相册</a></li>
        <li><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </footer>
</section>
<!-- 缓存页面 -->
<section id="contact" data-role="page" >
  <header data-role="header">
    <h1>应用程序标题</h1>
  </header>
  <section data-role="content"><p>第三个页面内容</p>
  </section>
  <!-- data-position="fixed"用于固定footer对象 -->
  <footer data-role="footer" data-position="fixed" data-id="main" >
    <nav data-role="navbar" class="navmain">
      <ul>
        <li><a href="#homepage">主页</a></li>
        <!-- 导航到其他页面，注意这里预取了页面 -->
        <!-- 页面缓存需要设置page的data-dom-cache="true"-->
        <li><a href="#other.html" data-prefetch="true">相册</a></li>
        <li><a href="#contact" class="ui-btn-active ui-state-persist">联系</a></li>
      </ul>
    </nav>
  </footer>
</section>
</body>
</html>