打造个性的有序列表,基于MooTools

打造个性的有序列表,基于MooTools

在Web Designer Wall 的《jQuery Sequential List》日志中说

"当遇到有序列表的时候我们一般会用到ol+li这样的标签,因为除了符合语义外其默认样式就有序号标识,这样就免去了我们手动添加的麻烦,但由于浏览器兼容性问题(尤其是IE…)使它的实用性大打折扣,所以要实现有序列表更多的时候是用程序来解决,但通过jQuery我们完全可以在不改变现有结构的情况下打造一个个性化的有序列表."

mootools-or-jquery-sequential-list

我今天把它改为 MooTools Sequential List。

The MooTools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
window.addEvent('domready',function(){						
	$$('#step li').each(function(item, index){
		index=index+1;
		item.addClass("item"+index); 
	});
	$$('#number li').each(function (item,index) {
		index = index+1;
		item.addClass("item"+index);
    });
	$$('#commentlist li').each(function (item,index) {
		index = index+1;
		var newNumElement = new Element('span', {'class': 'commentnumber','html': '#'+index });
		//newNumElement.inject(item, 'top');
		item.grab(newNumElement,'top'); 
   });							
});

演示: MooTools Sequential List Demo

关于本文的具体教程请看 jQuery Sequential List

站点统计