词条统计
浏览次数:5151 次
编辑次数: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,但服务端多出一堆视图逻辑代码。这种方式用的比较少,不举例。


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



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



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



总体上,第四种方案实现起来简单快速,而且适用范围广,所以我记录框架对其做了封装。

你只要在页面打上相关class/css,其余判断当前tab的工作(视图逻辑)就由js框架自动完成。



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


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


<div class="tagToolbar">

    <span><a href="#{recentLink}" class="right10 strong">按时间排</a></span>

    <span><a href="#{countAscLink}" class="right10 strong">由少到多</a></span>

    <span><a href="#{countDescLink}" class="right10 strong">由多到少</a></span>

</div>



2)设计样式

    <style>

    .currentLink a{color:Red; font-size:18px;}

    .otherLink a{font-size:12px;}

    </style>

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


3)使用makeTab方案

    

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


    <script>

    $(document).ready( function() {

        wojilu.tool.makeTab( '.tagToolbar', 'currentLink', 'otherLink' );

    });

    </script>


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

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