HTML5开发移动web应用—JQuery Mobile(1)
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)的更多相关文章
- HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚
导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...
- [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解
在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...
- html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
- 移动Web框架:jQuery Mobile VS Sencha Touch
最近常被问到是用 jQuery Mobile还是Sencha Touch,本人也比较关注这两个框架,试图从以下两方面发表点儿见解: 身家背景,都系出名门 1.jQuery Mobile 建立在jQue ...
- 【翻译】HTML5开发——轻量级Web Database存储库html5sql.js
方式1: html5sql官方网址:http://html5sql.com/ 阅读之前,先看W3C关于WEB Database的一段话: Beware. This specification is n ...
- HTML5开发移动web应用——SAP UI5篇(6)
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- HTML5开发移动web应用——SAP UI5篇(8)
本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...
- HTML5开发移动web应用——Sencha Touch篇(7)
Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...
随机推荐
- Welcome-to-Swift-24高级运算符(Advanced Operators)
除了基本操作符中所讲的运算符,Swift还有许多复杂的高级运算符,包括了C语和Objective-C中的位运算符和移位运算. 不同于C语言中的数值计算,Swift的数值计算默认是不可溢出的.溢出行为会 ...
- 【bzoj4128】Matrix 矩阵乘法+Hash+BSGS
题目描述 给定矩阵A,B和模数p,求最小的x满足 A^x = B (mod p) 输入 第一行两个整数n和p,表示矩阵的阶和模数,接下来一个n * n的矩阵A.接下来一个n * n的矩阵B 输出 输出 ...
- scrapy爬取用户信息 ---崔志才
这个实例还是值得多次看的 其流程图如下,还是有一点绕的. 总结: 1 Requst(rul=' xxx ',callback= ' '),仅仅发起 某个网页 的访问请求,没啥了.剩下的交给回调函数 2 ...
- hdu 4353 统计点在三角形内的个数
Finding Mine Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tota ...
- Install Battery Historian
1. Recommended extra packages for Trusty 14.04 $ sudo apt-get update $ sudo apt-get install \ linux- ...
- bootstrapTable 应用小例(收索)
<script src="/plugins/My97DatePicker/WdatePicker.js"></script> <!-- Content ...
- Mysql让主键归0
Mysql 相关技术 1.Mysql 让主键 归0: TRUNCATE TABLE * 2.只清空数据表,主键不归0: DELETE FROM 'TABLE' 3.重启数据库: /etc/init.d ...
- Day 17 编码+文本编辑+函数
知识点篇: #! /usr/bin/env python # -*- coding: utf-8 -*- # __author__ = "DaChao" # Date: 2017/ ...
- Gaugecontrol(测量仪器图形控件)
digital 数字类 circularfull 整圆 circularhalf 半圆 circularquarter 四分之一圆 circularThreeFourth 四分之三圆 linear h ...
- [Python Cookbook] Numpy: How to Apply a Function to 1D Slices along the Given Axis
Here is a function in Numpy module which could apply a function to 1D slices along the Given Axis. I ...