绝对定位又一用法,做选项卡时好用。

绝对定位又一用法,做类似这样选项卡时非常好用,而且浏览器兼容性较好。

如下图演示:

本来是准备了本地的一个demo图片,利用wordpress上传图片时,注意底部灰线,这就是问题所在。发现这个选项卡,效果同理,用firebug查看源码,果然同理。

html结构:

  • 从电脑
  • 从媒体库

css样式:

.tab{position:relative;height: 26px;text-align:center;border-bottom:1px solid #000;}
.tab ul{position:absolute;bottom:-1px;left:0;height:25px;border-bottom:1px solid #f00;}

外层div设置position:relavite属性。
内层元素设置position:absolute属性,然后利用position:absolute;bottom:-1px;实现ul层次高于外层div,折叠在下边框在其z轴上面。

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实现。

jQuery中index()和get()的妙用

在处理一个选项卡的时候,如下图,开始是在最后一项添加.last类来实现清除背景。相对应的如选中状态,li的class为actived,代码采用jquery来实现。

html结构如下:

jQuery代码如下:

$(document).ready(function(){
	var $tab = $("#tab ul li");
	var $content = $("#content > div");
	$tab.mousemove(function(){
		var index = $tab.index($(this));
		$(this).addClass("actived").siblings().removeClass("actived");
		$($content.get(index)).show().siblings().hide();
		return false; 
	})
});	

基本的功能到这里已经实现了,但是发现了一个小问题,在替换的时候把last的项的竖线给显示出来了,分析原因是第一次切换的时候把.last给替换掉了,就思考解决方法。经过,查询资料,调试,问题终于解决。也发现了,get()的妙用,代码如下。

		if (index != 2){//隐藏最后一项竖线
		   $($tab.get(2)).addClass("last");
		}

添加判断来实现这个问题,解释为,当前选项卡如果不是最后一个的话,就给最后一个加上.last样式。