词条统计
浏览次数:6647 次
编辑次数:2次 历史版本
最近更新:2013/6/20
创建者:掷鸡蛋者

许多时候,我们需要将当前页的链接(或者tab命令)高亮显示,通常我们有4种实现方案:


1)纯客户端制作多个tab页面内容,js捕捉点击事件,显示/隐藏相关tab页面。这种方案优点是速度快,缺点是实现起来稍微复杂。在“我记录网站综合系统”的“添加采集规则”中采取了这种方案,如下图所示:




2)每次点击命令,会向服务端发送ajax请求。“我记录网站综合系统”中“修改个人资料”部分就是采取这种方案。速度也较快,但也需要稍微写两行js。如下图所示:



其中的js代码如下:

$(document).ready( function() {

wojilu.ui.ajaxUpdate(wojilu.ui.ajaxPostForm);

$('.tabHeader a').click( function() {

$('.tabHeader .currentTab').removeClass( 'currentTab' ).addClass( 'otherTab' );

$(this).parent().removeClass('otherTab').addClass( 'currentTab');

});

});




3)纯服务端实现,每个tab对应一个实际的页面(就是一个服务端action),并且在服务端判断是否当前tab,以及渲染相关样式。优点是实现起来简单,不需要写js,但服务端多出一堆视图逻辑代码。这种方式用的比较少,不举例。


bet36体育655365.com4)服务端+客户端组合。每个tab对应一个实际的页面,但“是否是当前tab”的判断以及样式的赋值都在客户端自动完成。这种方案是最简单的,基本上不需要写额外的视图逻辑。当然也有缺点,在网速较慢的情况下,当前tab样式出现会延迟。比如你的微博首页:



它还可以用在其他场合,比如微博右侧(下图“我的首页”):



在比如“我记录网站综合系统”后台tag管理部分(当前tab是“由少到多”):



总体上,第四种方案实现起来简单快速,而且适用范围广,所以我记录365最新体育网站_365体育网是假不假_365足球体育官方网站对其做了封装。

你只要在页面打上相关class/css,其余判断当前tab的工作(视图逻辑)就由js365最新体育网站_365体育网是假不假_365足球体育官方网站自动完成。



准备工作:按照平时的做法,该怎么设计链接就怎么弄,不需要额外准备。然后——


1)给所有链接包上一层span


tagToolbar
">

?? ?按时间排

?? ?由少到多

?? ?由多到少



2)设计样式

?? ?

——当前链接用currentLink样式,其余链接用otherLink样式


3)使用makeTab方案

?? ?

?? ?将链接的容器、以及两种样式传入即可。


?? ?


语法含义:makeTab : function(containerClassOrId, currentClass, otherClass)

——第一个参数所有链接的父级容器的ID或class,第二个参数是显示当前tab的class,第三个参数是显示非当前tab的class