小强的HTML5移动开发之路
文章平均质量分 87
一起来学html5吧,开启我们的开心之旅。。。
lxq_xsyu
这个作者很懒,什么都没留下…
展开
-
小强的HTML5移动开发之路(53)——jQueryMobile页面间参数传递
在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递。1、GET方式:在前一个页面生成参数并传入下一个页面,然后在下一个页面中进行GET内容解析。2、通过HTML5的Web Storage进行参数传递。3、建立当前页面变量,在前一个页面将所需传递的参数内容赋值到变量中,在后一个页面从变量中将参原创 2014-05-06 10:33:45 · 7065 阅读 · 3 评论 -
小强的HTML5移动开发之路(52)——jquerymobile中的触控交互
当使用移动设备进行触控操作时,最常用的就是轻击、按住屏幕或者手势操作,jQuery Mobile可以通过绑定的触控事件来响应使用者的特定触控行为。一、轻击与按住直接上代码(一切皆在代码中,细细品吧!)练习<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.原创 2014-05-05 17:22:02 · 6333 阅读 · 0 评论 -
小强的HTML5移动开发之路(51)——jquerymobile中改善页面访问速度
在使用jQuery Mobile进行开发的时候可以选择单页模版和多页模版,在使用单页模版的时候从一个页面跳转到另一个页面的时候需要从服务器请求,用户会感到略有停顿。使用多页模版,可以改善页面跳转之间的流畅性,但是多个页面要一次性下载,所以下载时间变长,用户体验也会受到影响。在基于预取技术的开发中,当第一个页面的DOM对象加载完成后,jQuery Mobile会对标记data-prefetch的链接原创 2014-05-05 14:53:18 · 6410 阅读 · 0 评论 -
小强的HTML5移动开发之路(50)——jquerymobile页面初始化过程
为了方便说明和更加直观的展示jquerymobile的页面初始化过程以及各个事件的触发过程,我绘制了一幅流程图:图中用红色框圈起来的是界面中的事件,测试代码如下:练习<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;原创 2014-05-05 14:06:12 · 5242 阅读 · 0 评论 -
小强的HTML5移动开发之路(49)——HTML5开发神器HBuilder
今天给大家介绍一款开发HTML5的神器——HBuilder.下载地址:http://www.dcloud.net.cn/一、新建文件可以看到支持web app开发和普通网站前端开发,我们首先建立一个移动App项目注释:HTML5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距。HTML5+规范是一个开放的规范,在W3C中国的指导下,由HTML5中国产业联盟运作(www.原创 2014-04-17 14:03:33 · 8332 阅读 · 1 评论 -
小强的HTML5移动开发之路(48)——(小练习)新闻订阅系统【1】
一、总体设计二、数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_iconurl varchar(50), news_catname varchar(5), news_cat原创 2014-04-16 13:46:34 · 5772 阅读 · 3 评论 -
小强的HTML5移动开发之路(47)——jquery mobile基本的页面框架
一、单容器页面结构 Jquery mobile 基本页面框架 标题 内容部分 页脚 说明:设置浏览器的缩放宽度与等级,可以使页面的宽度与移动设备的屏幕宽度相同。二、多容器页面结构 Jquery mob原创 2014-04-15 15:11:15 · 5068 阅读 · 0 评论 -
小强的HTML5移动开发之路(46)——汇率计算器【2】
在上一篇中我们完成了汇率计算页面,下面来完成汇率设置页面的显示。 100美元 = 人民币 100日元 = 人民币 100里尔 =原创 2014-04-14 11:24:15 · 4147 阅读 · 0 评论 -
小强的HTML5移动开发之路(45)——汇率计算器【1】
这两天看了《PhoneGap实战》上面有一个汇率计算器的例子,个人觉得比较好,就拿出来和大家分享一下,在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。一、在DrameWeaver中新建站点,如图:二、编写汇率计算页无标题文档原创 2014-04-14 10:43:16 · 6686 阅读 · 4 评论 -
小强的HTML5移动开发之路(44)——JqueryMobile中的按钮
一、链接按钮 jQuery Mobile Web 应用程序 链接按钮 二、表单按钮 链接按钮 提交按钮 三、图形按钮 图像按钮1:原创 2014-04-08 18:07:26 · 4764 阅读 · 0 评论 -
小强的HTML5移动开发之路(43)——JqueryMobile页眉、工具栏和标签栏导航
一、页眉1、添加页眉默认的页眉在屏幕的顶部边缘显示,而且在在屏幕滚动时,页眉会滑出屏幕之外,通过添加data-position属性可以创建一个固定的页眉可以使用date-theme属性来调整页眉的主题,默认主题是黑色data-theme="a"原创 2014-04-08 16:22:15 · 5171 阅读 · 1 评论 -
小强的HTML5移动开发之路(42)——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于“章——节——小节”这样的层次结构来进行。在HTML4中的描述方式: 第一章 小强的HTML5移动开发之路 1.1 HTML5概述 1.1.1 HTML5是什么? 1.1.2 HTML5和HTML4的区别 1.2 HTML5快速入门 1.2.1 HTML与XHTML 上面代码,勉强可以看出文档的原创 2014-03-31 17:11:27 · 4800 阅读 · 1 评论 -
小强的HTML5移动开发之路(41)——jqMobi中Side Menu实现(类似人人网)
记得以前在做Native App的时候类似于人人网侧边滑动的效果非常的热,很多app仿照该效果进行开发,在jqMobi中也有类似的效果被称为Side Menu.下面我们来一步一步实现该效果。首先新建一个html文件,引入jqMobi的框架,如下:Side Menu 接下来再添加一个panel如下Side Menu原创 2014-02-11 13:21:59 · 7493 阅读 · 7 评论 -
小强的HTML5移动开发之路(40)——jqMobi中实践header定义的几种方式
一、定义全局的header这个header是所有panel默认的header,需要在内部,也就是和同一级的位置添加一个header 标签,并且id必须是header例如: jqMobi Back Single Page App原创 2014-02-11 09:53:59 · 5397 阅读 · 0 评论 -
小强的HTML5移动开发之路(39)——jqMobi插件json格式ActionSheet
在上一篇中我们学会了ActionSheet的使用,细心的朋友可能会发现其中创建列表的格式是HTML的,代码如下:function showCustomHtmlSheet() { $("#afui").actionsheet('BackShow Alert 3Show Alert 4');}这一篇我们来研究一下json格式的ActionSheet,其实很简单,和上一篇中的分析方法原创 2014-01-25 09:45:58 · 6259 阅读 · 1 评论 -
小强的HTML5移动开发之路(38)——jqMobi插件ActionSheet
现在在手机客户端上Action Sheet非常常见,比如微信中的分享按钮菜单,下面我们使用jqMobi实现一个Action Sheet,如下:首先右击上面的按钮选择审查元素(我用的是Chrome浏览器,先按F12)Show Custom Html Sheet然后Ctrl + F查找 showCustomHtmlSheet()方法代码贴出如下: fun原创 2014-01-23 18:12:02 · 7372 阅读 · 0 评论 -
小强的HTML5移动开发之路(37)——jqMobi快速入门
在《小强的HTML5移动开发之路(33)—— jqMobi基础》中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下:拷贝上面的/css目录、/plugins目录、/ui目录、/appframework.js文件,如下图所示。如果需要也可以拷贝index.html,然后自己修改,比如上面我的index01.html和index02原创 2014-01-23 09:36:48 · 12390 阅读 · 2 评论 -
小强的HTML5移动开发之路(36)——jQuery中的DOM操作
1、查询利用选择器查找节点使用 html() / text() / attr() 输出节点文本和属性值。注意:下拉列表使用 val() $(function(){ $('#b1').click(function(){ //$('#d1').html('java'); //将节点的属性读出来 //$('#d1原创 2014-01-22 15:11:15 · 3991 阅读 · 0 评论 -
小强的HTML5移动开发之路(35)——jQuery中的过滤器详解
1,基本过滤选择器:first:last:not(selector) :selector匹配的节点之外的节点:even :偶数:odd :奇数:eq(index):gt(index) :比他大的:lt(index) :比他小的 $(function(){ $('#b1').click(function(){ //$('原创 2014-01-22 14:32:21 · 3738 阅读 · 0 评论 -
小强的HTML5移动开发之路(34)——jQuery中的选择器
一、jQuery是什么?jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多javascript高手加入其中。jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》(即《精通JavaScript》)等经典JavaScript书籍。jQuery是继proto原创 2014-01-22 12:49:49 · 5237 阅读 · 0 评论 -
小强的HTML5移动开发之路(33)—— jqMobi基础
一、什么是jqMobijqMobi是由appMobi针对HTML5浏览器和移动设备开发的javascript框架,是个极快速的查询选择库,支持W3C查询。版本jqMobi源码最初在2012年1月份推出,基于MIT/X11许可证,托管在GitHub上,开发者可参与并通过插件不断改进该框架。2012年3月13日,jqMobi 1.0版本正式发布。现在最新的版本是jqMobi 2.0原创 2014-01-17 15:35:27 · 7226 阅读 · 0 评论 -
小强的HTML5移动开发之路(32)—— JavaScript回顾7
BOM模型brower object model(浏览器对象模型),通过浏览器内置的一些对象可以操作浏览器本身。DOM是用来操作页面的,BOM是用来操作浏览器本身的。BOM是没有规范的,但是大部分浏览器都支持如下几个对象1、Window对象:表示整个窗口(1)open方法:(名字,特性,高度宽度,工具栏,滚动条)(2)setTimeout方法:setTimeout(fn, 毫秒原创 2014-01-17 13:11:02 · 3750 阅读 · 0 评论 -
小强的HTML5移动开发之路(31)—— JavaScript回顾6
HTML DOM模型: w3c dom 模型(规范)出现之前,各个浏览器自己支持的一些dom操作Select对象属性:selectedIndex:表示用户现在选择的那个选项的下标(从0开始)length:获取或者设置选项的长度options:值是一个数组,每个数组元素是option对象,表示下拉列表的所有选项Option对象属原创 2014-01-17 09:39:26 · 3264 阅读 · 0 评论 -
小强的HTML5移动开发之路(30)—— JavaScript回顾5
一、查找第一种方式:依据id查找var obj = document.getElementById(id); //document是HTMLDocument的实例 function f1(){ var obj = document.getElementById('a1'); //双引号,单引号都可以 //innerHTML属性:可以访问或者设置节原创 2014-01-17 09:23:23 · 3780 阅读 · 2 评论 -
小强的HTML5移动开发之路(29)—— JavaScript回顾4
一、变量的作用域javascript脚本的执行过程分为两个阶段:第一阶段,js引擎()先扫描整个javascript代码。当碰到时,会先创建一个全局的活动对象,将中出现的变量的声明,函数的定义保存在活动对 象里面。如果碰到函数,则创建对应的局部活动对象,将函数内部的变量的声明及函数的定义保存在该活动对象里面。第二阶段,执行javascript代码,遇到变量,会先从对应的活动对象里面原创 2014-01-17 08:52:28 · 3669 阅读 · 0 评论 -
小强的HTML5移动开发之路(28)—— JavaScript回顾3
一、基本数据类型number:数字类型string:字符串 (注意s小写:string是基本类型)boolean:布尔类型 //前三个都有对应的包装类null:空类型undefined:未定义类型测试一: function f1(){ //number类型 /*有返回值时也不能function void f1(){}*/原创 2014-01-16 23:36:08 · 3867 阅读 · 2 评论 -
小强的HTML5移动开发之路(27)—— JavaScript回顾2
Javascript面向对象基础知识1、如何定义一个类,使用如下语法来创建一个类 function Person(name, age){ //习惯上第一个字母大写 //this修饰的变量称为属性 this.name = name; this.age = age; //如果属性值是一个函数,则这个属性就是一个方法 this.play = function(原创 2014-01-16 23:11:40 · 3576 阅读 · 0 评论 -
小强的HTML5移动开发之路(26)—— JavaScript回顾1
很久没有怎么用过JavaScript了,感觉有点生疏,最近在看关于HTML5移动开发方面的资料,有一种直觉告诉我,JavaScript昨天、今天很重要,明天会更重要。现在好多基于JavaScript的框架给我们的开发带来了很大便利,但是要更好的使用这些工具,我们就必须对JavaScript有一个更高的认识,翻开以前的笔记,开始复习吧。一、JavaScript的作用1、数据验证2、操原创 2014-01-16 04:35:25 · 5484 阅读 · 0 评论 -
小强的HTML5移动开发之路(25)—— AppCan开发环境
一、工具下载:官方下载地址:http://www.appcan.cn/experience.html按照安装指导默认安装即可二、建立项目启动AppCan SDK建立项目填入在appcan官网上注册的账号和密码,方便后面对应用的管理。建立好的项目如下:三、使用模拟器调试右击index.html,选择预览原创 2014-01-15 12:37:12 · 5758 阅读 · 0 评论 -
小强的HTML5移动开发之路(24)—— PhoneGap Android开发环境搭建
有关JDK及Android开发环境的搭建请看我前面的博文:http://blog.csdn.net/dawanganban/article/details/9748497原创 2014-01-14 23:59:04 · 5979 阅读 · 1 评论 -
小强的HTML5移动开发之路(23)—— jQuery Mobile入门
一、下载jQuery Mobile下载地址:http://jquerymobile.com/点击Download下载如下zip包下载成功后如下图解压目录如图:点击index.html进入demo主页,这里面有很多例子。二、创建JQuery Mobile的Helloword1、新建站点2、建立成功的站点原创 2014-01-14 23:58:21 · 5832 阅读 · 1 评论 -
小强的HTML5移动开发之路(20)——HTML5 Web SQL Database
一、Web Database介绍WebSQL数据库API实际上不是HTML5规范的组成部分,而是单独的规范。它通过一套API来操纵客户端的数据库。Safari、Chrome、Firefox、Opera等主流浏览器都已经支持WebSQL DatabaseWebSQL数据库有三个核心方法:1)打开数据库openDatabase()方法:此方法创建数据库对象,既可原创 2014-01-14 12:35:20 · 5156 阅读 · 2 评论 -
小强的HTML5移动开发之路(21)—— PhoneGap
一、PhoneGap是什么PhoneGap 是一个用基于 HTML,CSS 和 JavaScript 的,创建移动跨平台移动应用程序的快速开发框架。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada 和 Blackberry 智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外 PhoneGap 拥有丰富的插件,可以以此扩展无原创 2014-01-14 11:27:51 · 7115 阅读 · 0 评论 -
小强的HTML5移动开发之路(18)——HTML5地理定位
在前面的《小强的HTML5移动开发之路(2)——HTML5的新特性》中介绍了关于HTML5的地理定位功能,这一篇我们来详细了解一下怎么使用该功能。HTML5 Geolocation API用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的,在使用该功能的时候浏览器会弹出提醒框。一、浏览器的支持Internet Explorer 9、F原创 2014-01-13 11:00:29 · 6670 阅读 · 1 评论 -
小强的HTML5移动开发之路(19)——HTML5 Local Storage(本地存储)
一、浏览器存储的发展历程本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。借用网上的一张图来看下目前主流的本地存储方案:Cookie: 在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出原创 2014-01-13 13:32:33 · 4613 阅读 · 0 评论 -
小强的HTML5移动开发之路(17)——HTML5内联SVG
一、什么是SVG可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的原创 2014-01-12 20:58:04 · 4560 阅读 · 0 评论 -
小强的HTML5移动开发之路(16)——神奇的拖放功能
在智能手机发展飞速的现在拖放功能已经成为一种时尚,但是在我们的浏览器上是不是还缺少这种方便快捷的功能?在HTML5的新标准中就有关于拖放的标准,作为HTML5标准的一部分,任何元素都可以被拖放。一、浏览器支持情况Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释:在 Safari 5.1.2原创 2014-01-12 13:43:15 · 5037 阅读 · 3 评论 -
小强的HTML5移动开发之路(15)——HTML5中的音频
浏览器虽然发展很快,但是浏览器中的标准还是不完善,在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题,音频播放也一样,直到现在,仍然不存在一项网页上播放视频和音频的标准。现在,在大多数浏览器中,音频是通过插件(比如:flash插件)来播放的。然而,不是所有浏览器都具有这样的插件,所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含原创 2014-01-12 12:58:01 · 4397 阅读 · 3 评论 -
小强的HTML5移动开发之路(14)——Video标签详解
在前面的小强的HTML5移动开发之路(5)——制作一个漂亮的视频播放器中制作了一个非常好用的播放器,有的朋友对其中的原理还不是很了解,这一篇文章将在前一篇的基础上深入剖析标签的使用。一、使用技巧在html5中可以使用或者标签播放html5媒体,使用方式如下:[html] view plaincopyprint?video src=原创 2014-01-12 12:12:10 · 8583 阅读 · 0 评论 -
小强的HTML5移动开发之路(13)——HTML5中的全局属性
一、accssskey 快捷键小强的HTML5移动开发之路Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带有快捷键的元素。有兴趣的朋友可以按住Alt + g 和 Alt + w试一下小强的HTML5移动开发之路Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带原创 2014-01-12 11:17:07 · 5942 阅读 · 1 评论