Loading...

Tag Archive for ‘ DOM’

DOM 加载事件:addDOMLoadEvent

在很多情况下,我们使用 window.onload 事件判断页面加载完成,注意:不是 DOM。这里就会有一个问题,我们编写的 JS 代码将会在页面上所有元素加载完成之后才开始执行。打个比方,你在网页上使用了一个用来调整外观的 JS,而此刻恰好网络状况不太好,那么用户很可能在漫长地等待页面中所有图片下载完成或超时之后,才能看到脚本调整后的新外观,而在这之前,你的页面外观可能会比较尴尬。
熟悉 jQuery 的朋友知道 $(document).ready 的好处就在这里,它只等待 DOM 加载完成,而不是页面。不过我们不可能做任何应用都引入略显庞大的 jQuery 框架,所以就有国外的大牛写了这个压缩后只有 617 字节的东西:addDOMLoadEvent。本来想亲自写一大段话解释解释这个东东,却 Google 出了别人早写好的,简体中文,有兴趣的直接跳转过去看吧。
阅读全文 - 456 字

用 JavaScript 实现鼠标悬停时展开的菜单

虽然标题这样写,但实际上使用 JavaScript + DOM/CSS 组合可以实现很多强大的功能。昨天看到 fisio 提到这种鼠标悬停时展开的菜单,我原来也没有用过,经他一提醒觉得还是挺有用处的,尤其在有很多内容的页面上。
废话最后再说,直接给出代码先:
JavaScript
阅读全文 - 610 字

使用DOM折叠网页上的元素

经常来看 catch the digital flow 的朋友一定发现了, 原先侧边栏上长长的blogroll列表不见了, 取而代之的是一个可以点击折叠/展开的动态列表. 整个侧边栏都因此一下子变得简洁不少.
如果你也想把网页上某些元素折叠起来, 那就继续往下读吧!
此次借助的是一个叫domCollapse的工具包, 它的特点是可以非常简单地实现网页上任意元素的折叠, 而不需要了解JavaScript, 只要在HTML中添加class selector配合CSS就可以实现. (class selector是什么? 参考CSS扫盲(二): syntax)
阅读全文 - 995 字