西红柿爱番茄

Feed Rss

Tabview组件的优化

04.08.2010, Javascript, by .

Updates:

注解:对于网友测试过程中发现的一系列问题,比如:做连续点击的时候,有些不好用;为什么点一下当前标签 会取消高亮;我也觉得.而且,连续带内击的时候,有时候会刚刚点,就已经跳过去了。因此:对代码进行了修改,主要是修改了每个li的click事件的处理函数的代码,其他都没变化。

测试页面

前天在跟牛人谈及自己所做的Tabview的时候,也就是下面的东东:

Tabview

本来还比较自信自己做出来,而且基本功能也都有:鼠标移到内容ul停止切换,移除开始切换,默认自动切换,点击切换。看似都不错了。可是在问及实现方式的时候,不得不说是:轮询查询增删className。之后他向我提出了两个需求:能不能不使用循环判断增删className的方式;如果设置的定时器是8秒切换一次,在当前激活的tab上等待了5秒之后,鼠标移到内容ul上,之后鼠标移开,在3秒内切换到下一个tab。

很有挑战性的需求,俺思索了些时间,给了他们一个大概的实现方案。可是回来之后正式写代码的时候,还是比较棘手的问题,特别是在定时器的清空以及重启的问题上。今天重新勾画了一遍,还真有点实现了,^^。具体实现方式请查看测试页面的源码。

测试页面

Tabview组件的优化 有 2 条回应

  1. 第二个需求感觉不好啊,万一timeout时间长了,用户看到的情况是一会儿一移出去一下子切换了,一会儿又要等很久。

  2. 2010-04-10 在 11:02 Supersha

    嗯,确实有这个问题;这也算是一个需求吧,具体项目还是要交互来衡量。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>