点这里

DEMO

先上最近做的一个WebApp小应用，http://iwxy.me/m.html，大家可以先去玩玩儿，在移动终端访问查看最佳效果

实现的功能是微博上偶然看到的一个小测试，动物认识真实的自己，不说测试的真实性如何，只是觉得挺有趣的，还给它取了个洋气的名字，叫 看见，自己

废话不多说，下面开始正题

WebApp

关于WebApp，很多人说好，也有很多人反对

它有很多优点，比如

  1. 全平台兼容，安卓，IOS，WindowsPhone 通用
  2. 免去了更新的麻烦，因为它根本就无需安装
  3. 无需提交到应用商店，方便、快捷地部署

缺点也非常明显

  1. 硬件要有足够的处理能力去支持图形和动画效果
  2. 网速限制，脱离了网络就无法运行
  3. 相对 NativeApp 体验较差，如果要调用相机或者文件系统也不是一件容易的事

我认为这是一个技术发展的过程，未来会变成啥样儿谁也说不清对吧

jQuery Mobile

jQuery Mobile 是一款创建移动 WebApp 的框架，同类型的框架也有很多，就不一一列举了

官网链接 http://jquerymobile.com/ ，当前最新版本是 version 1.4.5

官网下载下来的压缩包中包括了构建项目很多不必要的文件，包括很多 demo 和 images

需要的是 jquery.mobile-1.4.5.min.css 、jquery.mobile-1.4.5.min.js 和一张 ajax-loader.gif 作为加载时的图片
还有，别忘记了jQuery，支持版本 jQuery 1.8 - 1.11 / 2.1

文件加载好了，接下来就可以开始构建项目了，在JQM中，使用 HTML5 data-* 属性为移动设备创建对触控友好的交互外观，

在 jQuery Mobile 中，可以在单一 HTML 文件中创建多个页面，通过唯一的 id 来分隔每张页面，并使用 href 属性来连接彼此

<div data-role="page" id="pageone">

  <div data-role="content">

    <a href="#pagetwo">转到页面二</a>

  </div>

</div>

<div data-role="page" id="pagetwo">

  <div data-role="content">

    <a href="#pageone">转到页面一</a>

  </div>

</div>

看见，自己 全部的代码也是写在同一个文件中，但是如果要构建大型项目的话，不推荐采取这种方式，会严重影响加载时间

data-role="page" 显示在浏览器中的页面

data-role="header"创建页面上方的工具栏（常用于标题和搜索按钮）

data-role="content" 定义页面的内容，比如文本、图像、表单和按钮，等等

data-role="footer" 创建页面底部的工具栏

除了查官方文档外，W3School的教程也很详细，不过你需要将代码部署到本地来查看效果

jQuery Mobile 主题

默认有两种主题供选择，也可以自己 DIY 定制主题，http://themeroller.jquerymobile.com/

在原有的样式上进行修改并不是一件容易的事，如果认为可以给元素加一个 class 然后写样式，会发现自己写的样式将会被覆盖，因为这里的样式为动态添加

定制主题建议的方法是

  1. 通过themeroller，简单方便
  2. 找到jquery.mobile.css文件，通过复制主题a和替换每个类名称–a的后缀名定制自己的主题

看见，自己

原于微博上看到的一则小测试

head

<!DOCTYPE html>

<html>

<head>

<title>看见，自己</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="format-detection" content="telephone=no" />

<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />

<link rel="apple-touch-icon" href="/icon.png" />

<script src="/jquery.min.js"></script>

<script src="/jquery.mobile-1.4.5.min.js"></script>

</head>

视窗大小等于设备大小，初始大小为1，不允许用户缩放
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

网站开启对 web app 程序的支持
<meta name="apple-mobile-web-app-capable" content="yes" />

忽略页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

设置主屏幕图标，Safari的添加到主屏幕功能不仅方便用户快速访问，而且也使 WebApp 更像一个 NativeApp
<link rel="apple-touch-icon" href="/icon.png" />

随便画了一个非常简单的 icon

在设备上查看图标

除了这些标签，我们还需要添加一些属性来让 WebApp 看上去更像一个 NativeApp

CSS

<style type="text/css">

*{

  -webkit-touch-callout:none; //禁止弹出列表栏

  -webkit-user-select:none; //禁止用户选中元素

}

</style>

HTML

<body>

<div data-role="page" id="index">

  <div data-role="header" data-theme='b' data-position="fixed">

      <h1>看见，自己</h1>

  </div>

  <div data-role="content">

    <h4>这是一个非常有趣(wu liao)的小测试，<br>为什么这么说呢？因为真的很有趣(wu liao)...</h4>

  <p>乐活心理测试</p><hr>

  <p href="#">动物认知真实的你</p><hr>

  <center class="ready">Are you ready ？</center>

  <center class="ready">请点击下方按钮开始测试</center>

  <center class="ready">（＾∀＾）</center>

  </div>

  <div data-role="footer" data-position="fixed">

    <div data-role="navbar">

      <ul >

        <li><a href="#test" data-transition="flip">START NOW</a></li>

      </ul>

     </div>

  </div>

</div>

<div data-role="page" id="test">

  <div data-role="header" data-position="fixed" data-theme="b">

    <h1>看见，自己</h1>

  </div>

  <div data-role="content">

  <center>请<span class="number">依序</span>选出你心目中最喜欢的三种动物<br><br>必须是你的第一直觉<br></center>

    <div id="animal" data-role="controlgroup" data-type="vertical" data-mini="true">

      <a data-role="button">狗</a>

      <a data-role="button">猴子</a>

      <a data-role="button">猫</a>

      <a data-role="button">狮子</a>

      <a data-role="button">马</a>

      <a data-role="button">松鼠</a>

      <a data-role="button">羊</a>

      <a data-role="button">兔子</a>

      <a data-role="button">熊</a>

      <a data-role="button">企鹅</a>

    </div>

  </div>

 <div data-role="footer" data-position="fixed">

     <div data-role="navbar">

      <ul id="choose">

        <li><a id="choose_first">1</a></li>

        <li><a id="choose_second">2</a></li>

        <li><a id="choose_third">3</a></li>

      </ul>

     </div>

  </div>

</div> 

<div data-role="page" id="result">

  <div data-role="header" data-position="fixed" data-theme="b">

    <h1>看见，自己</h1>

  </div>

  <div data-role="content">

    <h4>最喜欢的动物 - 代表你希望自己给别人的印象</h4><hr>

    <p id="mostLike"></p>

    <h4>排名第二的动物 - 代表别人对你的看法</h4><hr>

    <p id="secondLike"></p>

    <h4>排名第三的动物 - 代表你真正的样子</h4><hr>

    <p id="thirdLike"></p>

  </div>

  <div data-role="footer" data-position="fixed">

       <div data-role="navbar">

        <ul>

          <li><a id="testAgain">重新测试</a></li>

        </ul>

       </div>

  </div>

</div>

</body>

JS

<script type="text/javascript">

  $(document).ready(function(){

    var n = 1;

    $("#animal a").click(function(){

      if(n == 1){

        var t1 = $(this).text();

        $("#choose_first").text(t1).css({"color":"white","background":"#16a085"});

        $("#mostLike").append(showResult(t1));

        n++;

      }

      else if(n == 2){

        var t2 = $(this).text();

        $("#choose_second").text(t2).css({"color":"white","background":"#16a085"});

        $("#secondLike").append(showResult(t2));

        n++;

      }

      else if(n == 3){

        var t3 = $(this).text();

        $("#choose_third").text(t3).css({"color":"white","background":"#16a085"});

        $("#thirdLike").append(showResult(t3));

        n=0;

        setTimeout("location.href='#result'",500);

      }

    }) 

    function showResult(a){

      var i = 0;

      var animal = [

      {"no":1,"name":"狗","mean":"个性温和，善解人意，为朋友竭心尽力，不怕麻烦，是忠诚度极高且富有同情心的人，为人正直，不会做出背叛朋友的事，是可以信赖的人"},

      {"no":2,"name":"猴子","mean":"幽默、容易亲近，在一起不会让人感到厌倦，喜欢照顾别人，头脑灵活，好奇心强"},

      {"no":3,"name":"猫","mean":"神秘、捉摸不定的人，忠于自己的步调，崇尚自由，不喜欢受束缚，而且非常自我，对很多事都保持着既定的想法"},

      {"no":4,"name":"狮子","mean":"有威严，在人群中特别受瞩目，最具有领袖气质的人，重荣誉及社会地位，有时难免偏于虚荣，因此，自尊心也很强"},

      {"no":5,"name":"马","mean":"带点稚气，为人爽快，即使是女性也不会要求特别的待遇，是个个性活泼、干脆，在穿着上也很讲究的人"},

      {"no":6,"name":"松鼠","mean":"有一点孩子气，外表给人软弱的印象，实际上却是个能干且牢靠的人，不过有些三心两意，另外崇尚自由，脑筋也很灵活"},

      {"no":7,"name":"羊","mean":"外表柔弱，实际上却很顽固，是个勤奋不懈的努力派，以及重秩序、讲义气的人，朋友的事看得比自己还重要"},

      {"no":8,"name":"兔子","mean":"是个可爱，颇具美丽的人，由于这个特质，常让周遭的人兴起想保护你的欲望，另外个性温和优雅，很讨人喜爱"},

      {"no":9,"name":"熊","mean":"温和亲切，是可以依赖的人，心地善良，个性单纯、率直，做事谨慎，给人平稳、宜家的印象"},

      {"no":10,"name":"企鹅","mean":"谨慎、保守、朴素型的人，有时会给人一种沉静中带点危险的感觉，对很多事都无动于衷"}

      ]

      for(;i <= 10;i++){

        if(a == animal[i].name){

          return animal[i].name+" ："+animal[i].mean;

        }

      }

    }

    $("#testAgain").click(function(){  //页面跳转

      location.replace("#index");

      location.reload(); //刷新脚本

    })

  })

</script>

WebApp 开发的流程差不多就是这样子了，Demo 很简单

JQM 文档很全，提供了很多友好的组件，总体来说非常容易上手，推荐给想学 WebApp 的同学进一步了解和学习

评论：

在我看来，你做的这么好，完全可以使用Romanysoft LAB的服务，搭建苹果桌面App。 (*^__^*) 嘻嘻

评论 ”[实例] 设计基于JQM的WebApp“的更多相关文章

  1. 012 基于FPGA的网口通信实例设计【转载】

    一.网口通信设计分类 通过上面其他章节的介绍,网口千兆通信,可以使用TCP或者UDP协议,可以外挂PHY片或者不挂PHY片,总结下来就有下面几种方式完成通信: 图8‑17基于FPGA的网口通信实例设计 ...

  2. 课程设计- 基于ssm的捐赠物资分配管理系统 && 基于java的申请救援管理系统

    课程设计- 基于ssm的捐赠物资分配管理系统 && 基于java的申请救援管理系统 注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境 开发语言:Java 后台框架: ...

  3. 业务接口+UI层的设计(基于Castle实现的Repository)

    业务接口+UI层的设计(基于Castle实现的Repository) Repository层设计的文章见:[http://www.cnblogs.com/yomho/p/3297042.html]   ...

  4. mybatis 详解（三）------入门实例（基于注解）

    1.创建MySQL数据库:mybatisDemo和表:user 详情参考:mybatis 详解(二)------入门实例(基于XML) 一致 2.建立一个Java工程,并导入相应的jar包,具体目录如 ...

  5. 多租户通用权限设计(基于casbin)

    多租户通用权限设计(基于 casbin) 所谓权限控制, 概念并不复杂, 就是确认某个操作是否能做, 本质上仅仅就是个bool判断. 权限几乎是每个系统必不可少的功能, 和具体业务结合之后, 在系统中 ...

  6. 语法设计——基于LL(1)文法的预测分析表法

    实验二.语法设计--基于LL(1)文法的预测分析表法 一.实验目的 通过实验教学,加深学生对所学的关于编译的理论知识的理解,增强学生对所学知识的综合应用能力,并通过实践达到对所学的知识进行验证.通过对 ...

  7. 使用 Shiro 设计基于用户、角色、权限的通用权限管理系统

    一.前言 在大型的信息管理系统中,经常涉及到权限管理系统 下面来个 demo,很多复杂的系统的设计都来自它 代码已经放到github上了,地址:https://github.com/larger5/s ...

  8. VUE中登录密码显示与隐藏的最简设计——基于iview

    目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...

  9. HBase，以及GeoMesa设计基于HBase的设计分析，从数据模型到典型查询场景，最后进行RowKey设计

    GeoMesa设计基于HBase的设计分析,从数据模型到典型查询场景,最后进行RowKey设计 一.HBase 基本概念 理解KeyValue KeyValue多版本 列定义(1) 列定义(2) Co ...

随机推荐

  1. QPBOC扩展应用交易流程

    1 Q扩展部分数据 增加3个DGI,分别为:A001,8020,9020 9103中增加DF60(9F38中),DF61 增加DF62,DF63 1.1  A001扩展应用配置 DGI 长度 值(示例 ...

  2. greenDao生成的实体类无法存放JsonArray的解决方法

    今天在解析Json数据的时候,发现我们用greenDao生成的实体类只能是基本数据类型,而我请求回来的json数据里面还包含了jsonArray. 下面是json的数据格式 "content ...

  3. hdu 5224 Tom and paper

    题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=5224 Tom and paper Description There is a piece of pa ...

  4. Hadoop之Hive UDAF TopN函数实现

    public class GenericUDAFTopNRow extends AbstractGenericUDAFResolver { @Overridepublic GenericUDAFEva ...

  5. Mysql海量数据存储和解决方案之一—分布式DB方案

    1)  分布式DB水平切分中用到的主要关键技术:分库,分表,M-S,集群,负载均衡 2) 需求分析:一个大型互联网应用每天几十亿的PV对DB造成了相当高的负载,对系统的稳定性的扩展性带来极大挑战. 3 ...

  6. file_get_contents函数和curl函数不能用

    某天file_get_contents()突然不能用了,检查了下php配置文件 allow_url_fopen=on 没问题   各种重启也没用 最后在ssh下执行 chmod 755 /etc/re ...

  7. Qt窗体关闭时,如何自动销毁窗体类对象

    Qt窗体关闭时,如何自动销毁窗体类对象     要对你的窗口设置WA_DeleteOnClose属性,默认的情况下关闭窗口仅仅意味着隐藏它 ImgWindow1->setAttribute(Qt ...

  8. UIGestureRecongnizer 手势检测 swift

    // // ViewController.swift // UILabelTest // // Created by mac on 15/6/23. // Copyright (c) 2015年 fa ...

  9. 几种常见的排序方法（C语言实现）

    #include <stdio.h> #include <stdlib.h> #include <Windows.h> //直接插入排序 void InsertSo ...

  10. c语言中static 用法总结(转)

    惨痛教训: 假设在test.h中定义了一个static bool g_test=false; 若test1.c和test2.c都包含test.h,则test1.c和test2.c分别生成两份g_tes ...