月度归档:2012年07月

JS判断委派的事件源

事件委派有利于性能提升,其中各浏览器兼容的获取事件源的可以如下写:

/* 获得事件源dom对象 */
function getTarget(e) {
    e = e || window.event;
    var el = e.target || e.srcElement;
    return el;
};

/* 判断事件源是某个标签 */
function isTag(el, tagName) {
    return el.parentNode.tagName.toLowerCase() == tagName;
};

在stack overflow看到一个解释,关于ie下的事件:

The problem is that in IE, the event object is not sent as an argument of the handler, it is just a global property (window.event)

在ie下有个问题,event对象不会作为参数传递,而是全局window对象下的属性。

地址:http://stackoverflow.com/questions/2642095/access-event-target-in-ie8-unobstrusive-javascript

网页设觉设计师,你做好准备了吗

网页的视觉设计,个人认为必须要考虑到的因素: 一是视觉,二是交互。

纯视觉,无需多言。有些却必须考虑到交互。说到交互,拿最常见的select举例。
select是css无法过多控制ui表现的标签之一。

实现一个被设计的很好看的select功能的组件: 一是js替换原生select标签,生成html模仿。二是纯html模仿select,不写select标签。

再看看原生select有什么可能操作,首先原生事件onchange,onfocus, onblur,其次互相联动的一组select,再者还有原生属性multiple,size,disabled等,最后select不是孤单的,它还有配套的子元素option,option的操作可能有 增减option项目,诸多原生事件onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup,原生属性selected,disabled等。

这些操作或属性等用原生select很好实现。但是如果设计给一个很好看的下拉ui,就需要用上述所说的两种实现方式选1个来实现。

那么实现出来,还必须能够有原生select会有的操作。成本:

1、ui实现成本。2、原生js事件模仿响应成本。3、交互实现成本。4、手持设备适应。5、对新员工培训使用成本。6、各种未预料情况的修订成本,比如tab控制表单元素切换。

是不是每个项目都有一套不同的ui?那么实现多次?

视觉设计并不仅仅是视觉感官,放到网页设计中来,就需要考虑到交互因素,而且是很重要的因素。
网页设计不是平面设计,涉及交互可以算是一大区别。

单一功能型ui,还是表单密集型ui,单一交互ui,还是复杂交互ui。哪个适合定制设计,哪个适合原生元素,考虑清楚再做设计,要抛弃所谓的UI设计唯我独尊。

只要是项目中的一员,都应该对项目做出考虑,尤其设计属于一个产品靠前的一个步骤。为表单密集或交互复杂的功能去设计一套为了好看和统一的ui,将影响整个项目的进度和实施,增加很多成本。

 援引一句话(http://bbs.meizu.com/viewthread.php?tid=3875466):

在做flyme1.0的时候,我们曾因为顶部条的配色问题改过很多很多个方案,我们一个小改动都是需要花很多时间去跟进后续的东西(比如交互方案,视觉效果等等),但的确我们还是因为想琢磨出满意的方案而折腾了很多很多天。

网页视觉设计师,你做好准备了吗?

Meta告知IE浏览器兼容模式

在html的head头内如下写法,节选自http://www.xingzai.org/html-note/meta-tag-usage-order.html:

<!--x-ua-compatible(浏览器兼容模式)
仅对IE8+以效
告诉浏览器以什么版本的IE的兼容模式来显示网页
<meta http-equiv="X-UA-Compatible" content="IE=5" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上Emulate模式
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
Emulate模式后则更重视<!DOCTYPE>
(细心的人会注意到,用IE9去访问带有x-ua-compatible的页面时是不会出现兼容视图按钮的)
-->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />