阿辛的网志

龙年快乐！

阿辛 — Sat, 21 Jan 2012 21:26:03 +0800

先给各位朋友拜个早年！祝大家龙年快乐，健康、工作各种好！

2011年，对我来说算是比较平淡的一年，唯一的大事是把婚结了。工作上平平淡淡，忙忙碌碌，不过很多方面都有了明确的方向。

2012年，新的一年里面，希望自己能坚持自己的方向，专注，简单的去做好。对诱惑要忍得住；对错过要放得开；对鸡肋要敢舍弃！

z-index失效及onmouseout失效问题

阿辛 — Mon, 29 Aug 2011 10:16:44 +0800

两个都是小技巧问题，就写一起吧。其实并不是失效，而是用的方法不对。

先说z-index，当position为relative或者absolute或者fixed的时候，可以使用z-index指定当前元素的层级关系，值越大元素就越在上面，从而实现盖住下面元素的目的。但是遇到下面这种情况，会发现z-index值大的确盖不住值小的元素：

<style>
li { position: relative; width: 100px; height: 50px; background: blue; margin-bottom: 10px; z-index: 1; }
a { position: absolute; top: 0; left: 0; display: block; width: 80px; height: 100px; }
.a1 { background: red; width: 50px; z-index: 3; }
.a2 { background: yellow; z-index: 2; }
</style>
<ul>
    <li><a href="#" class="a1">xinple</a></li>
    <li><a href="#" class="a2">org</a></li>
</ul>

代码运行结果

可以看到，第一个li里面的a元素z-index为3，但是盖不住第二个li里面z-index为2的a元素（如果不设置li的z-index，firefox可以但IE6不行）。这是因为z-index会传递父元素的值，当第一个li中的a去覆盖第二个li里面的a时，因为父元素li的z-index值为1，所以盖不住值为2的元素了，这时候只需要设置父元素的z-index的值大于下面的a2，就实现了：

1	<li style="z-index:4"><a href="#" class="a1">xinple</a></li>

代码运行结果

如果是在同一个父元素下面，则按照z-index值大小来层叠，注意，不管父元素z-index值多大，子元素都能盖再其上面。

再来说onmouseout事件失效的问题，做下拉菜单的时候，鼠标放上去onmouseover下拉菜单出现，移开onmouseout则消失，但有时候我们会发现鼠标移动到子菜单的时候会出现闪烁问题，这个往往就是onmouseout失效的原因了。

为什么会失效？是因为javascript冒泡的问题，当从父元素移动到子元素的时候，会冒泡到父元素从而触发父元素的onmouseout事件，虽然从界面上看鼠标并没有移出父元素。查看下面的例子：

<style>
div { width: 100px; }
div span { display: block; background: green; }
ul { display: none; }
li { background: red; margin: 10px 0; }
</style>
<script>
$("div").mouseover(function(){
    $("ul").slideDown();
}).mouseout(function(){
    $("ul").slideUp();
});
</script>
<div>
    <span>下拉菜单</span>
    <ul>
        <li>子菜单1</li>
        <li>子菜单2</li>
    </ul>
</div>

代码运行结果

上面这个例子为了让效果更明显，除了增加了子菜单的margin，并使用了jQuery的slideDown动画效果，可以看到鼠标放到子菜单的时候，就闪烁了，很崩溃吧？平时没发现可能是子菜单整个覆盖了父元素，所以鼠标不够明显的从父元素移动到子元素；或者没有用动画啥的特效，其实已经经历了从消失到重新显示的过程，没发觉而已。

解决这个问题很简单，不要冒泡到父元素就行了。纯js的做法就是判断当前元素是否是子元素，是的话，就不冒泡到父元素，但是考虑到浏览器兼容问题，要分别对IE和其他浏览器hack，我js水平有限，加上代码较长，这里就不献丑。

使用jQuery就能很完美的解决这个问题，那就是jQuery支持了IE only的onmouseleave事件，查看jQuery官方API的说明就知道了。mouseleave事件不会冒泡到父元素，把mouseout换为mouseleave从而解决了这个问题。

运行查看修改后的代码可以看到，不再闪烁了

解决IE6不支持position:fixed问题

阿辛 — Wed, 24 Aug 2011 09:48:34 +0800

很少的时候，界面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用，很方便，但是万恶的IE6却不支持，下面讲两种方法解决这个问题。

方法一：

*html {/* 只有IE6支持 */
    background-image: url(about:blank); /* 使用空背景 */
    background-attachment: fixed; /* 固定背景 */
}
#box {
    /* 非IE6浏览器使用固定元素 */
    position: fixed;
    top: 0;
    left: 0;
    /* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
    _position: absolute;
    _top: expression(eval(document.documentElement.scrollTop));
}

这个方法要注意的是，*html使用固定位置空背景目的是解决滚动的时候抖动的问题，原理是这样，滚动页面浏览器重新计算出网页，然后执行css，所以固定元素产生延迟的抖动，使用固定背景之后，在滚动的时候先执行了css，再重新计算网页，所以没有抖动问题了。
document.documentElement.scrollTop是滚动条偏移的值，可以根据这个来设置位置，比如document.documentElement.scrollTop+200或者使用margin定位也行。

方法二：纯css的解决方法

html { _overflow: hidden; }
body { _height: 100%; _overflow: auto; }
.box {
    position: fixed;
    left: 10px;
    top: 180px;
    _position: absolute;
}

原理很简单，滚动条是body的滚动，固定元素是相对body定位，那么把它设置窗口那么高，不就一直是在窗口那个位置了？

最后，我选择的是方法一。
虽然第二种看起来简单，但是我想直接设置了html或者body的height和overflow可能会带来未知的界面bug，不太敢用。第一种方法感觉安全一些，而且可以查看淘宝网，也是用的第一种方法。

用HTML5重构网页

阿辛 — Wed, 27 Jul 2011 09:26:08 +0800

现在HTML5越来越流行，淘宝网很早就开始使用了HTML5的标签了。我因为工作忙一直迟迟没有使用，直到前一阵实在有点忍不住，就一口气把自己的博客用HTML5重构了。

回想五六年前的网站重构，轰轰烈烈，从table到div，从HTML4.0怪异模式到XHTML tranditional到XHTML strict重构了几遍。这次估计因为IE浏览器的限制不会那么流行。但是HTML5是发展的必然趋势，IE9和其他非IE核心的浏览器都已经支持的很好。可喜的是，现在已经有了方案使得小于IE9版本的IE浏览器支持HTML5标签：HTML5 enabling script 而且细心的朋友会发现，淘宝网也是使用的这个js。

原理就是通过Javascript的document.createElement("header");来创建标签，这样就能正常使用css来进行样式定义了(注意官方给出的调用方法，只会在小于IE9版本的IE浏览器才执行此js来创建HTML5标签)。创建的新标签没有block属性，所以我们的css reset还需要加入对新标签的定义例如：header, nav, section, article, aside, footer { display: block; }

当然，现在只是使用了HTML5标签重构了页面，很多HTML5的高级特性还没使用，比如canvas、离线存储等等，一步步慢慢来，不是吗？

我想重构的目的，并不是赶时髦，而是让页面的代码更加语义化，这就是HTML5的一个初衷之一：更加语义化的代码结构。

说道语义化，这里面包括我在内的很多朋友，对于div和section什么时候使用有点困惑，到底还要不要使用div了？查看了很多国外HTML5的网站发现，有的仍然使用div来当大容器包含各栏内容，也有人使用section代替。我看了大约十几个网站和文章之后得出结论：不要那么死板！语义化，就是让文档结构可读性加强。如果你自己认为用什么标签能表达你的内容数据，那就用好了，不要纠结。并且，在W3Schools上对于div的解释：The <div> tag defines a division or a section in an HTML document.既然div是定义一个section，那自然直接用section标签也是没问题的了。

vim学习笔记

阿辛 — Sat, 05 Mar 2011 10:36:24 +0800

目前我大部分时间是在做前端开发，对于html/css/javascript(主要是jQuery)感觉写的已经麻木了(除了手里的一个AJAX整站的web2.0项目还能在用户体验功能上做的有趣些而得到开发的乐趣)，而html5/css3由于杯具的IE不能很好的全面使用。所以我在想如果还要继续提升前端开发的乐趣，只能从写代码上面再提高一些，于是想到了vim。

虽然很久以前(大约一年)就想试试vim，但是往往因为时间不够/感觉vim上手麻烦而一直没有使用。直到这几天手里面项目多起来激发了我的热情，虽然说项目越多时间越紧张，但这种刺激却能很好的激发我学习的热情。怀着“磨刀不误砍柴工”的信念重新装了(g)vim。一研究就是三天过去了。下面总结下这几天的弯路和一些笔记。(因为有太多的vim学习资料，所以这里不会长篇大论记录什么快捷键啥的)

首先，zencoding for vim让我走了点弯路，原因是其快捷键“<c-y>,”，注意有个逗号！可郁闷的是，我在windows下的gvim里面按不出来！于是想了各种办法，把gvim的<c-y>快捷键去掉，感觉不爽，插入模式下<c-y>重做还是比较有用，然后考虑换快捷键，结果就是看到恐怖的快捷键列表几乎找不到可以用的快捷键。最后百般无奈的时候不小心按了<c-y>放开然后再按“,”，发现好了，真是比较233。所以和我一样使用windows下gvim的朋友，zencoding快捷键按不出来的时候，不要同时按“<c-y>,”，按完ctrl+y放开后立即按逗号就好了。

然后装了
css.vim (写css的时候颜色后面加上该颜色的背景，方便区分颜色)
NeoComplCache (自动完成)
NERDTree (侧边栏文件目录树)
Vim Template (以模板新建文件)
vimtweak (使窗口半透明)
xptemplate (快速插入代码片段)
(因为主要是写html/css/javascript所以ctags和taglist感觉暂时不需要，先不装了，以后慢慢来。)

于是，装了这些之后，用vim写html/css，简直就是爽死了。

update: 2011/05/24
window下gvim会在保存文件时候最后多一个回车符，导致用其他编辑器打开的时候总是发现最后多了一个空行。
vimrc里面增加：autocmd FileType * setlocal noeol binary fileformat=dos 就好了
参考：VIM Disable Automatic Newline At End Of File

婚了

阿辛 — Tue, 01 Mar 2011 09:48:52 +0800

2011年2月27日，星期天，结婚了。早晨起来很大的雨，到了8:08出门接新娘的时候无雨，等接到新娘九点多返回的时候还见到了一点阳光，直到晚上放完烟花又开始了一点雨，整个过程非常的顺。

感谢所有需要感谢的人，谢谢！

婚后，可以更加专注于事业了，本来想先立业后成家，没能实现，现在成家后立业还有机会，希望能干点有价值的事情出来。

婚后继续淡定的专注。