html5开发移动web应用—jquerymobile

jhcelue      2022-02-12     496

关键词:

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应用——sapui5篇

SAPUI5中支持利用Component对组件进行封装。想封装一个组件,Component的基本代码例如以下:sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){"usestrict";returnUIComponent.extend("",{init:function(){//calltheinitfunctionoft 查看详情

html5开发移动web应用——senchatouch篇

SenchaTouch中的Ext.DomHelper组件可以方便的实现对元素的追加或重写操作示例:launch:function(){functionappendDom(){Ext.DomHelper.append(‘my-div’,{id:’url-list’,tag:’ul’,//指定追加的元素种类cn:[//或children,使用数组形式定义数组内的子元素{ta... 查看详情

html5开发移动web应用——senchatouch篇

SenchaTouch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作演示样例:launch:function(){functionappendDom(){Ext.DomHelper.append(‘my-div’,{id:’url-list’,tag:’ul’,//指定追加的元素种类cn:[//或children。使用数组形式定义数组内的子元... 查看详情

html5开发移动web应用——sapui5篇

SAPUI5中支持利用Component对组件进行封装。想封装一个组件,Component的基本代码如下:sap.ui.define(["sap/ui/core/UIComponent"],function(UIComponent){"usestrict";returnUIComponent.extend("",{init:functio 查看详情

html5开发移动web应用—jquerymobile-列表

JqueryMobile中提供了制作列表的组建,它的data-view为listview。下面是一个典型的JqueryMobile列表,代码如下:<divdata-role="page"id="pageone"><divdata-role="content"><h2>有序列表:</h2>&l 查看详情

html5开发移动web应用——senchatouch篇(12)

  Sencha Touch同样可以使用地图、多媒体等插件。  1、Map组件   我们通过Ext.Map定义Map组件,其xtype为map。除了使用该插件外,还要调用Google的地图API所使用的js文件,代码如下:<script src=”https://... 查看详情

html5开发移动web应用——senchatouch篇(10)

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

html5开发移动web应用——senchatouch篇

  DataView是Sencha Touch中最重要的组件,用于数据的可视化。数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户。目前,如何更好地可视化是许多公司或框架都在追求的。通过数据的可视化可以发... 查看详情

html5开发移动web应用——senchatouch篇(10)

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

html5开发移动web应用——sapui5篇

本次对之前学习的SAPUI5框架知识进行简单小结,以及重点部分知识的梳理。1、在UI5使用过程中,命名空间的概念很重要。2、一般的sap组件引用格式如下:sap.ui.define(["sap/ui/core/UIComponent","sap/ui/model/json/JSONModel",&... 查看详情

html5开发移动web应用——sapui5篇

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

html5移动开发实战必备知识——本地存储

...缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能。我们都知道,要想打造一个高性能的移动应用,速度是关键。而在HTML5之前,只有cookie能够存储数据,大小只有4kb。这严重限制了应用文件的存储,导致we... 查看详情

html5移动开发实战必备知识——本地存储

...缓存是HTML5出现的新技术,这个技术的出现使得移动web的开发成为了可能。我们都知道。要想打造一个高性能的移动应用,速度是关键。而在HTML5之前。仅仅有cookie可以存储数据,大小仅仅有4kb。这严重限制了应用文件的存储,... 查看详情

html5开发移动web应用——sapui5篇

之前我们对于app的构建都是基于显示的,现在我们来格式化一下,引入更多的SAPUI5组件概念。这使得APP的一个界面更有层次性,更像是一个手机应用的界面,并且更好地使用SAPUI5中提供的功能。每个不同的层次都有不同的功... 查看详情

html5开发移动web应用——sapui5篇

之前我们对于app的构建都是基于显示的。如今我们来格式化一下,引入很多其它的SAPUI5组件概念。这使得APP的一个界面更有层次性。更像是一个手机应用的界面,而且更好地使用SAPUI5中提供的功能。每一个不同的层次都有不... 查看详情

html5开发移动web应用—jquerymobile-导航栏和页脚

导航栏部分的代码一般放置在data-role为header的div的内。<divdata-role="header"><ahref="#"data-role="button"data-icon="home">首页</a><h1>欢迎访问我的主页</h1>< 查看详情

html5移动端web

...onAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI移动前端开发可分为:手机网页开发。这部分跟web前端开发差别不大,使用的技术都 查看详情

html5与移动端web

...onAPI本地存储以及离线应用WebWorkers、WebWebSocketAPI移动前端开发可分为:手机网页开发。这部分跟web前端开发差别不大,使用的技术都是html+ 查看详情