QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

我是如何去了解jquery的(五),案例之切换选项卡Tab

作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

在接下来的章节,我会以案例为主来讲述jquery的一些用法,所以你将看到一个又一个的实例,这些例子的代码量都不会太长,但很有用,前面讲的那么多理论的东西,如果不用在实际过程中,是无法融会贯通的,我尽量的去寻找一些更高效简便的解决方案来解决问题,所以每行代码都很重要。

今天要完成的功能是一般门户网站上常见的tab选项卡切换,我们先来了解为什么要用到选项卡,由于页面屏幕的可见高度限制,一屏往往看到的内容太有限,而又不希望用户用滚动条离开当前视窗,更不希望跳转翻页,这个时候tab就出现了,它的主要作用是缩小内容在页面上所占的空间。最起码你要保证各个选项内容是同级别或同类别的,不能因为要加个功能就东拼西凑,作为一个前端,有时候坚持自己的专业观点很重要,何必为五斗米折腰。

本文案例请点击这里查看

先看下效果图:

这个是从163上抄下来的,去掉了一些样式,我们先来分析下它的dom结构:

很清楚,它的三个标题分别对应了下面的三块内容,然后on这个class就是当前选中的样式。可能很多人拿到这个后,最先想到的是,给三块内容标签加上ID,然后,再点击标题上判断显示哪个ID块。这样做是不错的,但明显的问题是,会影响到这个结构,因为要加属性ID,还有个问题是不能重复使用,并且不方便扩展。然后我们在这个结构上寻找突破口,既然上面的标题和下面的内容都是一致的,那是不是说明它们的索引号(位置)也是一样的呢?明显是,如果不是,你也可以把它轻易的改成是。说到索引号,在jquery有提供一获取索引的方法index(),它的官方解释是:搜索匹配的元素,并返回相应元素的索引值,从0开始计数。

更具体的用户请参照API上的说明,我们这里只需要简单的获取点击标题li在同辈元素中的索引值即可,所以是这样的:

   $(function(){
    function clickTab(e){
         var i=$(this).index();
    }
    $(".TabList .titleBar li").click(clickTab);
   });

然后我们再根据这个索引值来得到下面选项块的内容节点。

$(".tab_content > ul").eq(i)

再我们分别给它们加上选中状态的样式class,加之前移除原先的选中状态,最终的代码应该是这样的:

function clickTab(e){
            $(".titleBar li.on").removeClass("on");
            $(this).addClass("on");
            var i=$(this).index();
            $(".tab_content > ul.on").removeClass("on");
            $(".tab_content > ul").eq(i).addClass("on");
        }
$(".TabList .titleBar li").click(clickTab3);

我靠,是不是有点太简单了,我们试下效果,也确实可行呢?不过短短四行代码就搞定了,这并不是jquery的神奇,这跟用的人有关,可能有些人认为"原生JS"(别人都这么叫)的效率会高很多,jquery只是缩短了代码量,其实不然,我们即使不谈效率问题,这个功能用"原生JS"写也不太可能超过10行,而且你不能把你的使用不当当作jquery的效率低下,就算是有效率影响也不会太大。

是否真的这样就完了呢,这种情况好像只适用于,标题结构和内容结构一致的情况,要是它内容里不是这样很清晰的结果,中间有其他元素的干扰,或者,它的顺序不是按标题的顺序排列的怎么办?正所谓天也有不测之风云,好吧,是不是上面的这种方法就没用了呢,我们还是得回到加ID上去?NO,NO,NO,我们可以继续这样写,如果他的索引是不一致的,我是否可以给他一个一致的索引,这话听起来好像有点矛盾,既然不一致,怎么又能一致呢,除非有第三者插足?恩,我们要做的就是这个第三者,给它加自定义属性,html有这样一个特性,你给节点加所有其他的属性,它都不会报错,如是乎,我就给内容块的每一块都加上一个index属性,对应标题块的顺序。如下图所示

这样,我们根据index属性等于标题上的索引值来获取就行了,如是,我们把刚才的代码改成了这样:

function clickTab2(e){
            $(".titleBar li.on").removeClass("on");
            $(this).addClass("on");
            var i=$(this).index();
            $(".tab_content > ul.on").removeClass("on");
            $(".tab_content ul").filter("[index='"+i+"']").addClass("on")
        }

我们对比下,与刚才的区别是什么,只是在最后一行,第一次的写法是用eq获取到和标题一致的索引内容,而现在,我们用filter筛选出属性index等于标题的索引值的内容项,filter的用法是添加更多的查询条件,你可以直接$(".tab_content ul[index='"+i+"']")这样写,为了更直观,我把它分成了两块查询。不会增加查询成本的哦,亲。

或许到这里,你终于松了一口气,功能完美了。no,no,no,离完美还差得很远,起码现在不是, 为什么呢?你可以试试,在一个页面里添加多个这样的选项卡时,它是否还能正常工作,答案是否定的,你不管点其中任何一个,另一个都会受到影响,这是为什么呢,亲们?这是因为你在改变状态时,查询的范围是针对的整个页面,而不是当前的选项卡class=TabList,那要该怎么做呢?还记得我在《我是如何去了解jquery的(三),事件之点击事件,光棍节特献 》里的全选反选表格操作吗?我有这样一段代码,不知道细心的您有没有发现呢?

$(".list [name='chkAll']").click(function(){
    $(this).closest("table").find(":checkbox").not($(this)).attr("checked", $(this).attr("checked"));
});

在这里,我用closest查到它的容器,然后对容器内的节点进行筛选操作,这样就不会引起其他容器的操作了,不信你看我再加一个表格上去,请点击这里查看。那是否我们这里也要用closest然后再find子孙节点呢,这其实不是必须的,在jquery不知道什么版本里,至少在jquery1.4.1里,有了更简洁的一种写法,就是给查询语句第二个参数,这个参数表示,第一个参数的查询条件是针对第二个参数来作范围限定的。所以我们可以改成如此:

        function clickTab3(e){
            var currentContent=$(this).closest(".TabList");
            //$(".titleBar li.on",currentContent).removeClass("on");
            currentContent.find(".titleBar li.on").removeClass("on");
            $(this).addClass("on");
            var i=$(this).index();
            $(".tab_content > ul.on",currentContent).removeClass("on");
            //currentContent.find(".tab_content > ul.on").removeClass("on");
            currentContent.find(".tab_content ul").filter("[index='"+i+"']").addClass("on")
        }

看到了没,亲,注释了的才是简洁的写法呢,不要看错了哦,错过了就木有了。到这里功能就算基本上完成了,似乎一个简单的功能,我们却用了三个方法来分析它,有没有变复杂呢?好像还是很简单的嘛,那说明你的智商其实不是你想象的那么低。那我们就继续喽。我们发现需求是在变化的,不变的是结果,现在需求又要变了,我不要点击了才切换,我要鼠标移上去就换,这个是否更简单了呢,我们只需要把clcik换成mouseover即可,好吧,我还要变,我希望这个功能由我来决定是点击还是滑鼠,这个要求真是太过份了,我们无视它,真是太得寸进尺了。不过我们可以做个这样的演示当作练习嘛。代码如下:

html:
<input type="button" value="click" toggleEvent="mouseover" id="btntoggle">

js: 
$("#btntoggle").click(function(){        
        $(".TabList .titleBar li").bind($(this).val(),clickTab3);
        $(".TabList .titleBar li").unbind($(this).attr("toggleEvent"));
        var temp=$(this).val();//临时变量存储即将要变化的值value;
        $(this).val($(this).attr("toggleEvent"));
        $(this).attr("toggleEvent",temp);
    })

bind是绑定事件,对应的unbind是移除绑定,详情请见API,如果你有任何的疑问都不要问我,请重复再重复阅读本文。或加入我的Q群70210212进行讨论。

本文案例请点击这里查看

posted @ 2011-11-16 14:38 田想兵 阅读(...) 评论(...) 编辑 收藏
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com