JQuery Mobile是一个简单易用的web移动app开发框架。使用它就像使用jQuery一样，引入必要的文件就可以。

最基础的jQuery Mobile文件的结构代码例如以下：

<body>

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

  <div data-role="header">

    <h1>在此处插入标题</h1>

  </div>

  <div data-role="content">

    <p>在此处插入正文</p>

  </div>

  <div data-role="footer">

    <h1>在此处插入页脚文本</h1>

  </div>

</div>

</body>

依据上面的样例，我们首先研究一下。主要的JQuery Mobile框架的用法。

1、data-role

通过data-role，我们能够定义页面中某个部分的作用。而JQuery Mobile会依据定义的值，自己主动进行解析，为其设定对应的样式或功能。在上面的代码中。我们首先定义了一个data-role为page的div，表明这个div及其内部的全部组件都是一个单独的页面（之后会具体解说）。之后，是手机页面中很普通的结构定义：header、content以及footer,他们也各自通过data-role来实现各自的角色的定义。

2、全然的html

能够看出，JQuery Mobile在实现页面布局的时候採用html+css的形式，特表依赖在标签中的定义，和我们之前学习的Sencha Touch等框架截然不同。这决定了JQuery Mobile在使用起来更加简便，学习成本更低：没有复杂的载入机制，没有庞大的JavaScript代码，仅仅要在html内部进行标签的定义就能够实现页面的基本布局。

3、id的使用

我们为page也定义了一个id。在JQuery Mobile中，id非经常使用药。它有一个非常大的作用就是实现页面的转换。

id表明了页面。在跳转时调用就可以转到指定的界面中。

HTML5开发移动web应用—JQuery Mobile(1)的更多相关文章

  1. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  2. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  3. html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础

    这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...

  4. 移动Web框架:jQuery Mobile VS Sencha Touch

    最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...

  5. 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js

    方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is n ...

  6. HTML5开发移动web应用——SAP UI5篇(6)

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  7. HTML5开发移动web应用——Sencha Touch篇(10)

    我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...

  8. HTML5开发移动web应用——SAP UI5篇(8)

    本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...

  9. HTML5开发移动web应用——Sencha Touch篇(7)

    Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...

随机推荐

  1. 【bzoj1191】[HNOI2006]超级英雄Hero - 二分图匹配

    现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回答一道题后,才能进入下一 ...

  2. 2018.8.6 Noip2018模拟测试赛（十九）

    日期: 八月六号  总分: 300分  难度: 提高 ~ 省选    得分: 10分(MMP) 题目目录: T1:Tree T2:异或运算 T3:Tree Restoring 赛后反思: Emmmmm ...

  3. 解决 unresolved external symbol 无法解析 _send@16（转）

    (1) vc网络编程中遇到一个编译问题,原来是少了WSOCK32.LIB. 在 project-->settings-->Link-->Object/Library modules ...

  4. 转 new和malloc的区别

    传送门 new和malloc的区别 1. malloc()函数 1.1 malloc的全称是memory allocation,中文叫动态内存分配. 原型:extern void *malloc(un ...

  5. linux-3.2.36内核启动1-启动参数（arm平台 启动参数的获取和处理，分析setup_arch）【转】

    转自:http://blog.csdn.net/tommy_wxie/article/details/17093297 最近公司要求调试一个内核,启动时有问题,所以就花了一点时间看看内核启动. 看的过 ...

  6. php set_time_limit(0) 设置程序执行时间的函数

    一个简单的例子,在网页里显示1500条语句,如果未设置失效时间,则程序执行到791时结束了,如果把 set_time_limit(0); 前的注释符//去除,则程序直到1才结束.   set_time ...

  7. AC日记——魔术球问题 洛谷 P2765

    题目描述 «问题描述: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球. (1)每次只能在某根柱子的最上面放球. (2)在同一根柱子中,任何2个相邻球的编号之和为完全 ...

  8. HOJ - 2715最小费用流

    国庆八天乐,刷题也快乐. HOJ崩了,但是VJ可以把题目挂出来. 题目链接:https://vjudge.net/contest/188441#problem/A 涉及到矩阵里面的网络流,化为图来做. ...

  9. Jenkins解决Host key verification failed

    1.在没有做任何操作时,是这样报错的 a.在任务中配置远程执行命令 rsync -raz --delete --progress  target/testweb-v1.1.jar  root@10.0 ...

  10. 某考试 T3 bitboard

                    bitboardDiscription    天才发明家小K 制造了一块比特板.板子上有2^n个比特元,编号为0 ∼ 2^n−1.每个比特元