站长论坛

标题: 用jQuery实现个性有序列表 [打印本页]

作者: sunhw0725 时间: 2009-12-26 10:53
标题: 用jQuery实现个性有序列表
当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决。

但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表.

先来看Demo

实现起来也很简单,看看第一个例子,首先是载入javascript代码

<script type=“text/javascript” src=“js/jquery-1.3.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){

$(“#step li”).each(function (i) {
i = i+1;
$(this).addClass(“item”+i);
});
</script>
经过jQuery处理后,原来的代码将发生变化,jQuery为每个li增加了一个有序的不同类:

有了类之后就好办了,为每个类定义不同的样式表(我为item1,item2…增加了不同的背景图片):

#step .item1 {
  background: url(step1.png) no-repeat;
}
#step .item2 {
  background: url(step2.png) no-repeat;
}
#step .item3 {
  background: url(step3.png) no-repeat;
}
最后的效果:

当然除了图片也可以增加任意你想要的代码,比如第三个例子就是在li中增加一个容器

<script type=“text/javascript”>

$(“#commentlist li”).each(function (i) {
i = i+1;
$(this).prepend(‘<span class=”commentnumber”> #’+i+‘</span>’);
});

});
</script>
jQuery处理过程:

样式表:

#commentlist li {
  position: relative;
}

#commentlist .commentnumber {
  position: absolute;
  right: 0;
  top: 8px;
}
最终效果:

欢迎光临站长论坛 (http://www.tzlink.com/bbs/)