As a plug in:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<title>
letters
</title>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
jQuery.keysOf = function(obj){
var keys = []
for(keys[keys.length] in obj);
return keys
}
jQuery.fn.letters = function(speed){
var ul = jQuery(this)
var items = {}
var lis = ul.children()
var div = jQuery("<div></div>")
.prependTo(ul.parent())
lis.each(function(){
var let =
jQuery(this).hide().html().charAt(0).toUpperCase()
if (!items[let]) items[let] = []
items[let].push(this)
})
var keys = jQuery.keysOf(items).sort().reverse()
for (var i in keys){
(function(i){ // scope i
jQuery("<span>" + keys[i] +"</span>")
.css({textDecoration: 'underline',cursor:'pointer'})
.toggle(function(){
lis.hide()
jQuery(items[keys[i]]).show(speed,function(){jQuery(this).attr('style','')})
},function(){
jQuery(items[keys[i]]).hide()
})
.prependTo(div)
if (i<keys.length-1) jQuery("<span> |
</span>").prependTo(div)
})(i)
}
}
jQuery(function($){
$('ul.alpha').letters('slow')
});
</script>
</head>
<body>
<ul class='alpha'>
<li>jaime</li>
<li>nacho</li>
<li>noelle</li>
<li>andy</li>
<li>duncan</li>
<li>jake</li>
<li>junior</li>
<li>donna</li>
<li>mario</li>
<li>anna</li>
</ul>
</body>
</html>
