评论 ”[实例] 设计基于JQM的WebApp“

点这里

DEMO

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

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

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

WebApp

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

它有很多优点，比如

全平台兼容，安卓，IOS，WindowsPhone 通用

免去了更新的麻烦，因为它根本就无需安装

无需提交到应用商店，方便、快捷地部署

缺点也非常明显

硬件要有足够的处理能力去支持图形和动画效果

网速限制，脱离了网络就无法运行

相对 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 然后写样式，会发现自己写的样式将会被覆盖，因为这里的样式为动态添加

定制主题建议的方法是

通过themeroller，简单方便

找到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“的更多相关文章

012 基于FPGA的网口通信实例设计【转载】
一.网口通信设计分类通过上面其他章节的介绍,网口千兆通信,可以使用TCP或者UDP协议,可以外挂PHY片或者不挂PHY片,总结下来就有下面几种方式完成通信: 图8‑17基于FPGA的网口通信实例设计 ...
课程设计- 基于ssm的捐赠物资分配管理系统 && 基于java的申请救援管理系统
课程设计- 基于ssm的捐赠物资分配管理系统 && 基于java的申请救援管理系统注意:该项目只展示部分功能,如需了解,评论区咨询即可. 1.开发环境开发语言:Java 后台框架: ...
业务接口+UI层的设计(基于Castle实现的Repository)
业务接口+UI层的设计(基于Castle实现的Repository) Repository层设计的文章见:[http://www.cnblogs.com/yomho/p/3297042.html] ...
mybatis 详解（三）------入门实例（基于注解）
1.创建MySQL数据库:mybatisDemo和表:user 详情参考:mybatis 详解(二)------入门实例(基于XML) 一致 2.建立一个Java工程,并导入相应的jar包,具体目录如 ...
多租户通用权限设计(基于casbin)
多租户通用权限设计(基于 casbin) 所谓权限控制, 概念并不复杂, 就是确认某个操作是否能做, 本质上仅仅就是个bool判断. 权限几乎是每个系统必不可少的功能, 和具体业务结合之后, 在系统中 ...
语法设计——基于LL(1)文法的预测分析表法
实验二.语法设计--基于LL(1)文法的预测分析表法一.实验目的通过实验教学,加深学生对所学的关于编译的理论知识的理解,增强学生对所学知识的综合应用能力,并通过实践达到对所学的知识进行验证.通过对 ...
使用 Shiro 设计基于用户、角色、权限的通用权限管理系统
一.前言在大型的信息管理系统中,经常涉及到权限管理系统下面来个 demo,很多复杂的系统的设计都来自它代码已经放到github上了,地址:https://github.com/larger5/s ...
VUE中登录密码显示与隐藏的最简设计——基于iview
目录 VUE中登录密码显示与隐藏的最简设计--基于iview 1.背景 2.实现最终效果 2.1 隐藏密码 2.2 显示密码 3.实现思路 3.1 v-if判断当前密码显示状态 3.2 密码隐藏状态 ...
HBase，以及GeoMesa设计基于HBase的设计分析，从数据模型到典型查询场景，最后进行RowKey设计
GeoMesa设计基于HBase的设计分析,从数据模型到典型查询场景,最后进行RowKey设计一.HBase 基本概念理解KeyValue KeyValue多版本列定义(1) 列定义(2) Co ...

随机推荐

shell括号操作符
以下以bash环境下做解说一.单小括号() 二.双小括号(()) 可作数值条件操作,也可作数值运算使用(近似于 let 命令) 如 C 语言语法一样,支持运算符:<<.<<= ...
VPN错误800、错误789
VPN突然无法连接解决方法: 1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它:HKEY_LOCAL_MACHINE\System\C ...
数据库事务故障恢复undo日志检查点
checkpoint 检查点 checkpoint,即检查点.在undolog中写入检查点,表示在checkpoint前的事务都已经完成commit或者rollback 了,也就是检查点前面的事务 ...
Oracle Database Gateway 安装
在[Oracle HS (Heterogeneous Services)深入解析及协同Gateway工作流程]一文中主要主要介绍了HS的工作原理,及其如何协同Gateway一起工作.那么了解Gate ...
windows phone 新手引导
说到windows phone 新手这个问题,当初我们纠结了很久,网上大致有两种解决方案:一种是通过动画的方式:另一种简单的方式就是通过pivot 在第一种方式里面我们的实现思路就是监测手势的滑动方向 ...
go again
Introducation (1)How to organize go code (2)How to develope go package (3)How to use go tool How to ...
Labview实现字符串加密
Labview实现字符串加密对字符串进行加密,规则是每个字母后移5 位例如A 变为F,b 变为g,x 变为c,y 变为d- 实现效果后端实现
Qt 读取txt文件乱码的解决办法
Qt 读取txt文本乱码问题 2015-05-20 15:46 方法一:使用QString的fromLocal8Bit()函数复制代码 QFile txtfile(filePath); ...
How to compile and install NCAR Command Language on IBM PowerPC 64 --- NCL编译安装步骤
作者:Sinsonglew 出处:http://www.cnblogs.com/sinsonglew 欢迎转载,也请保留这段声明.thanks :) 注记:NCL官方依赖安装包全集列表.官方源码编译指 ...
[Android Training视频系列] 8.3 Dealing with Audio Output Hardware
用户在播放音乐的时候有多个选择,可以使用内置的扬声器,有线耳机或者是支持A2DP的蓝牙耳机.(补充:A2DP全名是Advanced Audio Distribution Profile 蓝牙音频传输模 ...

评论 ”[实例] 设计基于JQM的WebApp“

DEMO

WebApp

jQuery Mobile

jQuery Mobile 主题

看见，自己

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

随机推荐

热门专题