GUJS

A classe SortableList é um pequeno exemplo de utilização de métodos DOM sendo utilizados para facilitar a ordenação de itens de uma lista.

Para utilizar a classe, basta importar o arquivo js e instanciar um objeto que estará associado à sua lista. Feito isso você pode criar seus próprios links para manipular os eventos de ordenação da lista (mover para cima ou para baixo). Veja o exemplo abaixo:

var bozo;

function init() { bozo = new SortableList($('list')); } //<ul id="list">

window.onload = init;

Ao instanciar o SortableList você também pode definir duas opções interessantes:

• A primeira é o “rotate”, que define se os itens vão girar ou não (true ou false), ou seja, se o primeiro da lista vai para baixo quando o usuário clicar para cima, e vice-versa, quando o último item se torna o primeira ao clicar para baixo.
• E a segunda é o onComplete, onde você pode setar uma função que será executada toda vez que a lista for reordenada. Nesta função você pode, por exemplo, fazer uma requisição Ajax que salvará a ordenação no seu banco de dados, onde você pode, para isso, acessar o atributo “list“, que contém a lista ordenada.

Exemplo | Download

This entry was posted on segunda-feira, março 26th, 2007 at 15:26 and is filed under Cross-browser, DOM, Downloads e Exemplos, Orientação à Objetos, Tutoriais Avançados. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.