一个不规则选项卡的实现

一般选项卡实现时,大多时两种状态互相切换,jquery做的时候,直接加上”.selected”这个类时,其他项去掉就搞定了。
不规则选项卡,在切换时,需要加上各自对应的选中后样式。
在添加选中样式时,用到以下的代码:

    var $tabs = $('.points_tab ul li');
    $tabs.click(function(){
        $(this).addClass(function(index,currentClass){
            var selectedClass = currentClass + "_selected"
            return selectdClass;
        }).siblings().removeClass('point_50_selected point_100_selected point_200_selected');
    })

关键点addClass中的function,语法如下:

addClass(function(index,currentClass))

这个方法是通过函数为匹配的元素增加指定的类名,其中function(index,currentClass)必须返回一个或多个空格分隔的类名,其主要接受两个参数,index参数是为对象在这个集合中的索引值,currentClass参数为这个对象原行的类名。

获取原行的类名,进行类名修改后返回。

jQuery不规则图片选项卡扩展之锚点(命名)实现

jQuery不规则图片选项卡扩展之锚点(命名),这个名字有些拗口,解释一下,需求为不同系统平台的下载页是相同的,但是进到页面后的系统平台展示的下载区块是不同的,也即图片选项卡显示的项不同。

参考:http://flowplayer.org/tools/demos/tabs/anchors.html#first

就是需要这样的效果,但是选项卡的显示不同,也需要修改,就想自己来实现试一下。

思路:获取地址栏#号后面所跟的项名,建立一个对象,以项名为键值,0~3为值。通过取对象的属性来获取值,再设置相应的选项及内容项的显示。

1、获取地址栏后的#号。通过split(将字符串分割为字符串数组,并返回此数组).代码如下:

var url = window.location.href;
var param = url.split("#")[1];

2、建立一个对象,存放值。

var tab = {symbian:0,android:1,iphone:2,wm:3};
var current = currentTab[param];

这里最开始遇到一个小问题,即通过tab.param最获取对象,但是出现的结果是未定义。又尝试字符串连接,但是得到的结果却变成了字符串,后来想到对象的属性,也可以通过[]来获取。

3、根据current的值,这里为数字(0~3),却设置相应的选项卡及内容项显示隐藏。

	$($sys_type.get(current)).addClass("selected"+current).siblings().removeClass("selected0 selected1 selected2 selected3");

$sys_type.click(function(){
	var index = $sys_type.index($(this));
	$(this).addClass("selected"+index).siblings().removeClass("selected0 selected1 selected2 selected3");
});

由于在实现过程中,遇到一点问题,就是按原来的写法,在点击的过程中会出现没有反应,后来实现这个效果,仍然引用了jquery.tools.min.js,这个jQuery插件。但是这个插件本身的点击后在CSS中添加一个current的class,不满足当前不规则的需求,所以之前的仍然要保持,就是上面脚本的第二段。

至此,这个功能实现了,但是仍然有点不足。做的过程,又温习了一些知识,且记于此。

jQuery不规则图片选项卡实现及思路

下午遇到一个不规则图片选项卡的问题,开始的时候以为一个简单的选项卡,没有考虑太多。但是去实现的时候,发现切换样式比较麻烦。

传统的选项卡,实现一般是在原tab的样式之上增加一个selected样式,

但是这个选项卡就不能简单的通过一个公用selected样式的来实现,原因是背景采用css sprite实现,即各个选项的样式是不同的,而且点击后各个选项块的样式也是不同的。就小小的纠结了。

发现单个选项,点击后的样式与点击前,仅background-position的第二个值,也就是垂直位置值不同,但是又想到没有background-position-y这样的写法,不然就简单了,无奈之下,只好换个思路了。

尝试1,首先尝试用jQuery的attr属性获取选项的class值,然后在这个值后面增加”_selected”,企图通过改变class值来实现,但是出现一个问题,在使用siblings()给其他选项恢复原样式时,发现值只能是一个。

尝试2,在css中分别设置各个选项的selected状态,命名为selected0~selected3,我这里是四个选项。这样命名的主要原因是利用jQuery的index属性,然后在jQuery里面,当单击的时候,根据索引index,添加相应的class.

经测试,发现可行。但是又出现了一个小问题,仍然在siblings给其他选项卡恢复样式时,出现了问题。想到用filter过滤等,但是都过于复杂,突然想到removeClass支持几个.class同时写,立刻测试一下,效果实现,看了一个也没有几行代码,觉得思路对了,实现就容易了。

更新一下2010/12/28:

又一次需要制作一个选项卡需要实现效果如下:

实现后,发现问题如下:

修改css如下:

.tabs{width:613px;height:36px;position:relative;}
.content{margin-top:-1px;width:611px;height:300px;background:#fff;border:1px solid #aaa;}

测试ie6/7,firefox实现。