最近的文章列表

详解HTML5的manifest缓存,已经删除更新缓存的方法

文件cache.manifest内容如下:

CACHE MANIFEST
# 2016-2-27 14:22:16
favicon.ico
img/bg.png
css/main.min.css
js/main.min.js
index.html
page/completed.html
page/info.html
page/login.html
page/menu.html
NETWORK:
*

要使用manifest缓存,我们首先需要写一个manifest文件。这个文件有严格的格式要求,下面是个例子CACHE MANIFEST

2016/3/3 Comments:
汇总30条移动Web开发技巧【看过都觉得:老有用了】

1. 添加到主屏后的标题(IOS)
2. 启用 WebApp 全屏模式(IOS)
3. 百度禁止转码
4. 设置状态栏的背景颜色(IOS)
5. 移动端手机号码识别(IOS)
6. 移动端邮箱识别(Android)
7. 添加智能 App 广告条 Smart App Banner(IOS 6+ Safari)
8. IOS Web app启动动画
9. 添加到主屏后的APP图标
10. 优先使用最新版本 IE 和 Chrome
11.viewport模板
1、移动端如何定义字体font-family
2、移动端字体单位font-size选择px还是rem
3、移动端touch事件(区分webkit 和 winphone)
4、移动端click屏幕产生200-300 ms的延迟响应
5、什么是Retina 显示屏,带来了什么问题
6、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
7、部分android系统中元素被点击时产生的边框怎么去掉
8、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
9、webkit表单元素的默认外观怎么重置
10、webkit表单输入框placeholder的颜色值能改变么
11、webkit表单输入框placeholder的文字能换行么
12. 关闭iOS键盘首字母自动大写
13. 关闭iOS输入自动修正
14. 禁止文本缩放
15. 移动端如何清除输入框内阴影
16. 快速回弹滚动
17. 移动端禁止选中内容
18. 移动端取消touch高亮效果
19. 如何禁止保存或拷贝图像(IOS)
20.模拟按钮hover效果
21.屏幕旋转的事件和样式
22.audio元素和video元素在ios和andriod中无法自动播放
23.摇一摇功能
24.手机拍照和上传图片
25. 消除transition闪屏
26. android 上去掉语音输入按钮
1. 移动端基础框架
2. 滑屏框架
3.瀑布流框架

2015/10/29 Comments:
解决IE6、IE7、IE8、IE9不支持HTML5 placeholder属性值的方案

placeholder 是HTML5的新属性,在做input 的预设值还挺方便的,但无奈IE8以下不支持,因此需要额外做fix。在实际使用中,却遇到了很多问题:

例如在官网查到的plugin:http://plugins.jquery.com/project/input-placeholder,就不支持type="password"的结果。因为仅改变value,对应password的显示方式

以下是我找到支持度最好地plugin:

DEMO: http://mathiasbynens.be/demo/placeholder

plugin: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

2015/10/21 Comments:
Modernizr、HTML5Shiv、respond.js三者的区别?

HTML5Shiv主要解决HTML5提出的新的元素不被IE6-8识别。

Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width 特性,实现响应式网页设计(Responsive Web Design)。

Modernizr 是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。

2015/10/15 Comments:
使用FormData对象提交表单及上传图片的方法(php+html5)

今天分享一下:php+html5使用FormData对象提交表单及上传图片的方法。具体分析如下:

FormData 对象,可以把form中所有表单元素的name与value组成一个queryString,提交到后台。在使用Ajax提交时,使用FormData对象可以减少拼接queryString的工作量。

使用FormData对象

1.创建一个FormData空对象,然后使用append方法添加key/value

代码如下:
var formdata = new FormData();  
formdata.append('name','fdipzone');
2015/7/5 Comments:
Sencha Touch 2快速入门教程(ST2)

Sencha Touch2

1.什么是Sencha Touch?

Sencha Touch让您能够快速、轻松地创建基于HTML5的移动应用程序,在Android、iOS和黑莓设备中工作,并运行在浏览器中与本地应用程序一致的体验。

2014/12/15 Comments:
免费网站后台管理系统模板下载(10套)

大部分的 Web 应用和动态网站都需要一个后台管理系统用于管理前台界面的信息展示以及用户信息。管理后台的设计虽然不像前台界面那样要求设计精美,但是也需要有清晰的管理模块划分,这样使用后台管理系统的人员才能够方便的进行操作和管理。下面收集了十款非常漂亮的网站后台管理系统模板分享给大家,欢迎免费下载使用。

2014/6/25 Comments:
Android中状态栏通知Notification与NotificationManager详细介绍 HTML5桌面通知

在Android系统中,发一个状态栏通知还是很方便的。下面我们就来看一下,怎么发送状态栏通知,状态栏通知又有哪些参数可以设置?
首先,发送一个状态栏通知必须用到两个类:NotificationManager、Notification。
NotificationManager:是状态栏通知的管理类,负责发通知、清楚通知等。
NotificationManager是一个系统Service,必须通过getSystemService()方法来获取。
NotificationManagernm=(NotificationManager)getSystemService(NOTIFICATION_SERVICE);
Notification:是具体的状态栏通知

2014/5/30 Comments:
用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏

代码如下:

var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen)
2014/5/29 Comments:
跨域名访问资源的问题 HTML5 Canvas getImageData img.crossOrigin

利用 canvas 取得图片的data,如果 img.src是来自其它域名的图片,浏览器便会禁止执行
例如代码:

<canvas id="example" width="300" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
2014/5/26 Comments: