HTML5与JQuery.Mobile（一）

最新推荐文章于 2024-05-20 21:21:56 发布

Soloman

最新推荐文章于 2024-05-20 21:21:56 发布

阅读量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>

Soloman

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5与JQuery.Mobile（一）

这个系列主要讲解在HTML5中添加JQuery.Mobile支持；本系列内容大部分来自于VTC.COM.JQUERY.MOBILE.FRAMEWORK教程。对于一个简单的HTML5页面我们需要做一些改造：无标题文档应用程序标题应用程序内容应用程序脚注栏下面把我们需要掌握的知识点罗
复制链接

扫一扫