HTML5 Boolean类型属性(如required)值的JS获取

2012年12月11日 by 张 鑫旭 阅读 85863 次, 今日 4 次

HTML5 Boolean类型属性,看上去跟普通属性没什么两个,深入处理才发现事情没有想象的那么简单,尤其最近IE10浏览器的出现,更是血雨腥风,其兼容性问题夸张地令人啧舌,甚至最新版本的jQuery都无法避免地出现了bug.

本文就将详尽展示各种条件下,Boolean类型属性(如required)值,让你可以独眼龙看告示——一目了然地知道bug出在哪里,哪些浏览器上。本文还提供各种库的的兼容性修复方案,并作了简单扩展。基本上1~2天时候的测试与处理,本文的数据相信会对您的学习有所帮助的。

阅读全文…

HTML5 number类型文本框step属性的验证机制

2012年12月7日 by 张 鑫旭 阅读 63697 次, 今日 4 次

最近花了不少功夫折腾表单验证的些东西,主要是把HTML5的些东西向下兼容。本文是引子,相关基本内容之一。内容如标题所示,还有有点内容的,了解下没有什么坏处。外甥点灯笼——照旧,demo页面,丰富的截图以及必要的源代码展示。总之,希望本文的内容能够让您在末日之前学习到一点新的东西。

阅读全文…

Page Visibility(页面可见性) API介绍、微拓展

2012年11月29日 by 张 鑫旭 阅读 120008 次, 今日 11 次

如果检测页面切页,最小化,关闭,切换选项卡,可以使用visibilitychange事件,使用visibilityState属性值。

阅读全文…

我是如何在实际项目中使用before/after伪元素的

2012年11月16日 by 张 鑫旭 阅读 96303 次, 今日 5 次

before/after伪元素相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪元素应用相当的普及以及兴盛,不过貌似我们这边前端er们普遍缺乏使用这两个伪元素的意识,要使用顶多也就是跟风的“清除浮动”应用。
我想,这可能受兼容性思维影响……

阅读全文…

小tip:FireFox下文本框/域百分比padding bug解决

2012年11月13日 by 张 鑫旭 阅读 66538 次, 今日 9 次

我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况。对于文本框或者文本域,光标最好距离左侧边缘有一定的间距。
但是,如果只考虑文本框本身(父标签无其他特殊处理),这一套在流体环境下是行不通的,因为固定的padding数组无法让文本框永远100%自适应外部的宽度,至少非现代浏览器下是如此!
目前而言,好的解决之道是……

阅读全文…

web上渐进使用jQuery Mobile中animate相关CSS

2012年11月2日 by 张 鑫旭 阅读 109026 次, 今日 10 次


animate虽然是CSS3中随时比较高级的东西,看上去与实际的web项目不搭噶,但是,这里,我要告诉你,在实际web项目中也是可以渐进使用CSS3 animation相关动画的,而且,操作难度以及兼容性处理都是很低的哦!

本文以比较实用的jQuery Mobile框架中开源的animate相关CSS代码为实例,分别展示了其中各种animate效果在实际交互中的应用。大量demo,大量截图以及源代码示意。相信本文的内容会对您的学习有所帮助的!

阅读全文…

视网膜New iPad与普通分辨率iPad页面的兼容处理

2012年10月25日 by 张 鑫旭 阅读 107710 次, 今日 4 次

本文内容多少有点含沙射影,旁击侧敲的味道。题目虽然是将new iPad与普通iPad不能显示屏上的兼容性处理,实际上,讲的是所有视网膜显示屏的一些处理;随着以后普通显示器和视网膜显示器2分天下,就是我们开发的苦日子时候。
既来之则安之,本文先打个预防针,分享点我近期iPad项目的一些处理经验。希望能对其他同行面对同样问题的时候提供一些帮助。

阅读全文…

“更多|收起”交互中渐进使用transition动画

2012年10月19日 by 张 鑫旭 阅读 142338 次, 今日 14 次

虽然,web世界中,交互动画效果N多多,但是,很多都是约定俗成的,或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码,我们可以将效果归结为这几大类:slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏,适合pop效果;绝对定位浮动层(如智能提示下拉框,自定义时间选择控件)等的呈现与隐藏使用fade效果;幻灯片播放的广告位效果一般为slide效果;点击某商品飞入页面右下角或左上角的购物车就是flip效果(类似最新FireFox浏览器关闭标签页效果)。
而对于页面上,“展开更多|收起更多”这类交互……

阅读全文…

ECMAScript 5(ES5)中bind方法、自定义及小拓展

2012年10月12日 by 张 鑫旭 阅读 139426 次

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。其中,新增了一个名叫bind函数扩展方法(),以前有提过,点击这里查看详细。
不过,之前的介绍纯粹的翻译,含糊其辞,水土不服,这里,换身接地气的装束,让大家好好了解了解……

阅读全文…

HTML5全屏API在FireFox/Chrome中的显示差异

2012年10月8日 by 张 鑫旭 阅读 138544 次, 今日 10 次

FireFox浏览器下的黑色背景就是全屏元素,其中图片的居中对齐是通过CSS控制的(:after伪类生成元素+vertical-align:middle实现),例如去掉text-align:center图片就不水平居中了;而Chrome的黑色背景属于系统的东西,其全屏元素似乎被浏览器劫持,默认状况下永远屏幕居中显示(去掉text-align:center图片依然水平居中)——脱离了常规CSS理解——如默认的display:block状态似乎变成了display:inline-block等……

阅读全文…