最近飞猪一直问我map这个标签用来做什么？因为他看到腾讯的音乐频道用它来写导航，最开始的时候我没做思索就回答说，估计是个外行人做的吧，因为在我的印象中，这个就是最初的时候我用Fireworks切图的时候，直接输出html这样子产生的标签。然后后来飞猪说，他问过了鬼和greengnn，他们说这样子更语义化，而且鬼博客上的导航也使用了同样的标签。然后我就在网上查了查，说下我查到的结果。
首先是看W3C对map的解释：
The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element’s usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.
简单的说就是定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。特别注意一下最后一句话：The MAP element may be used without an associated image for general navigation mechanisms.意思是，map标签可以不去定义一个映射，而用来定义一个普通的导航。所以说，腾讯的做法还是比较有语义的，可能或许HTML5流行以后，nav要比map更语义化。另外，我觉得，导航上，干嘛非要用li，像腾讯这样子用a就蛮好滴，但是有一点我不喜欢的就是用float，既然用了a，用inline-block应该要比float更好用一些吧哈~
腾讯音乐频道的导航：
<map id="menu">
<div><a id="menu_index" href="http://music.qq.com">首页</a> <a id="menu_musicdata" href="/portal_v2/static/list/singerlist_0.html">正版音乐库</a> <a id="menu_first" href="/portal_v2/static/shoufa/shoufa_1.html">在线首发</a> <a id="menu_hit" href="/portal_v2/static/hit/hit_5_1.html">点击榜</a> <a id="menu_player" href="/portal_v2/static/player.html">播放器</a> <a target="_blank" class="hot" id="menu_green" href="http://vip.music.qq.com">绿钻专区<sup><span>hot</span></sup></a> <a id="mengniu" href="/portal_v2/static/player.html">下载播放器</a><a id="openplayer" href="http://service.qq.com/category/music.html" target="_blank">腾讯客服</a></div>
</map>
参考资料：
继续阅读 »
周末在南京玩了算是一天把。。。因为周六中午才到南京，周日中午就回来了哈~
时间有限，去了几个地方：夫子庙、瞻园、雨花台、总统府、梅园，夫子庙的小吃真狠。。。哈哈。。。瞻园不错，只是门票太贵了，里边也就一个字值得一看而已，雨花台还不错吧，比较大，就是大概走了一下，本来是想要去捡雨花石呢，不过后来想想两个大男人去捡。。。太散了。。。总统府一般把，跟长春那边的伪皇宫有一点点类似，没啥感觉哈，梅园，大概看了看张学良的经历，蛮好~其实最想去的是中山陵、明孝陵，不过没有时间，只好作罢~有机会再说把哈~
刚看完回来。。这片so散，陆川还是年轻啊！
明天去南京玩哈~期待下周的《拉贝日记》，记录一下，睡啦哈~
晚上去看了这部电影，之前很多人都说不好看，不过还是去了，因为上周没去看，上周播的《红河》，我自己实在不适合去哈。。。晚上去的时候已经7点25了，而ptu2是7点20开始啦，下一场要到8点50，所以就买了这个，晚了几分钟就晚吧。
我要再次鄙视一下那售票员，问我是一个人后，就说一个人的话30。。。鄙视。。。
然后，看完后，发觉这片子确实很差劲。。。说剧情，那个团队能配合成那样。。真没话说了。。丢人。。还是警察呢。。。最经典的台词就是那警察说：“我是打工的。。。”O(∩_∩)O哈哈~
下周期待《南京！南京！》。
2009年04月15日 | 分类：我的生活 | 评论关闭 | 427 views
今天是乖女儿的生日哈，18岁，长大了哦，乖女儿生日快乐哈！~~希望乖女儿保持好的心情，顺利考上一所好的大学哈，加油！
和乖女儿认识四年多了，真的很感谢乖女儿对我的帮助，帮我度过了那段痛苦的岁月，我会好好珍惜我们之间的这份友谊，希望乖女儿也能坚强的走下去，忘记以前那段痛苦的回忆。加油！
白天看到一则新闻，关于一个流浪数学家的。其实也不晓得该说什么，曾经我也很喜欢数学，对数学很执着，从小就沉浸在别人“数学天才”的赞美之中，当然我也很努力的在学，然而高考之后未能如愿的进入浙大数学系，反而去了吉大读管理，也许是天意吧哈，虽然在大学做了很多数学方面的努力，但毕竟已经远离了那个数学王国，曾经想考研的时候考数学系，然而在考研前一个月还是放弃了，我已经失去了，没有必要那么执着了，然后就转到了前端。
很同情这个流浪者，我不晓得他的理论是否正确，也许，他不该这么执著的，或许他的执著已经变了质，希望他会越来越好。
继续阅读 »
由于昨天遇到的一个问题，才有了这种想法。目前的YAHOO.util.Dom.getElementsByClassName仅支持一个class的寻找，如果我想寻找多个class的话就要多操作几次了，而且如果要给这些节点添加相同的事件的话，又要首先把它们放到一个数组，然后给新的数组添加事件，或者分别给各个数组添加事件，挺麻烦的，所以给YAHOO.util.Dom.getElementsByClassName做一点小改进，让它可以找到包含任何一个所给class的所有节点。
getElementsByClassName: function(className, tag, root, apply, o, overrides) {
className = lang.trim(className);
tag = tag || '*';
root = (root) ? Y.Dom.get(root) : null || document;
if (!root) {
return [];
}
var nodes = [],
elements = root.getElementsByTagName(tag),
hasClass = Y.Dom.hasClass;
if(className.indexOf('|')>0) {
var classnames = className.split('|');
//找到所有节点
for (var i = 0, len = elements.length; i < len; ++i) {
for (var j = 0; j < classnames.length; ++j) {
if ( hasClass(elements[i], lang.trim(classnames[j])) ) {
nodes[nodes.length] = elements[i];
}
}
}
//剔除相同的节点
for (var k = 0; k < nodes.length; k++) {
for(var l = k+1; l < nodes.length; l++) {
if(nodes[k] == nodes[l]) {
nodes.splice(l,1);
}
}
}
} else {
for (var i = 0, len = elements.length; i < len; ++i) {
if ( hasClass(elements[i], className) ) {
nodes[nodes.length] = elements[i];
}
}
}
if (apply) {
Y.Dom.batch(nodes, apply, o, overrides);
}
return nodes;
}
用法很简单，就是在class之间加上“|”，比如：YAHOO.util.Dom.getElementsByClassName('hehe|haha|heihei')。
继续阅读 »
YAHOO.util.Event看的我还是比较晕的，一是我这方面确实好弱，一是YUI太NB了，还是分享一下我的学习经验，谈下我遇到的问题，首先是YAHOO.util.Event.addListener。
if ( this._isValidCollection(el)) {
var ok = true;
for (var i=0,len=el.length; i<len; ++i) {
ok = this.on(el[i],
sType,
fn,
obj,
overrideContext) && ok;
}
return ok;
} else if (YAHOO.lang.isString(el)) {
var oEl = this.getEl(el);
if (oEl) {
el = oEl;
} else {
this.onAvailable(el, function() {
YAHOO.util.Event.on(el, sType, fn, obj, overrideContext);
});
return true;
}
}
this._isValidCollection(el)是判断el是否是一个数组，详细可以看下_isValidCollection这个方法，如果是数组的话，就拆分开来，调用YAHOO.util.Event.addListener。if (YAHOO.lang.isString(el))是判断是否是字符串，也就是说el是否为id，如果是的话就转换成HTMLElement，然后调用YAHOO.util.Event.addListener。其实这两个判断的目的都是为了将el转化为HTMLElement，然后再执行YAHOO.util.Event.addListener。
继续阅读 »
晚上去看了《高考1977》这个电影。。。史上最便宜的一次看电影。。。25元哈，UME4月份的票价都是半价，太爽了哈~
这片子还不错吧，中间还是蛮感人的。。。
不过我必须鄙视一下UME的售票员，每次买票都会很巧妙的把我安排的好几对情侣中间。。。每场电影并没有多少人。。。很多位置都空着。。。愁死了。。。
just so
简单记录下，因为做了一次邮件的模板，在所有的环境下都是好的，结果只在outlook中是坏掉的，百度了一下，找到一下相关的东西，分享一下~
HTML邮件应该避免浮动出现的li，如果是导航的话，最好都换成a标签，因为outlook里边不支持css的float属性。另外，不要使用背景图片，outlook里仅支持背景为颜色，但是其实这个所谓的支持的颜色也是一塌糊涂，所以最好是不用~记得邮件里写margin的时候不要写负值，outlook不支持的~msdn里写的是支持width的，但是感觉没有支持，还是自适应的~
微软有一个校验邮件格式的插件，但是我装了好久没装上，不晓得是我的dw有问题还是微软的插件有问题，如果有人用别的编辑器的话不妨试试另外的插件。。反正dw里我没成功。。。最后还是拿163邮箱发，outlook收，这样子来测试的~
提供一些邮件的参考资料：
继续阅读 »
