jQuery aList

Simple plugin that adds basic hover and key-press actions to a list.

by th3uiguy

HTML

<script src="https://raw.github.com/th3uiguy/jquery-alist/master/jquery.alist.js"></script>
<h1>jQuery aList Demo</h1>
<ul class="aList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

body{ font-size: 0.9em; font-family: Arial, Verdana, sans-serif; color:#555; }
h1{ margin-top: 0; }
fieldset{ background: #eee; border: 1px solid #ccc; padding:0.5em 0.8em; }
ul{ list-style: none; margin: 0; padding: 0; background-color: #fff; }
ul li{ border: 1px solid #ccc; border-bottom: none; padding:0.3em 0.5em; }
ul li:last-child{ border-bottom: 1px solid #ccc; }

/* jquery.alist.css */
.al-item-clickable{
    cursor: pointer;
}
.al-item-active{
    background-color: #ffd;
}

JavaScript

$('ul.aList').alist({
    select: function(element, event){
        alert("Selected " + $(element).html());
    }
});