Como criar uma interface Ordenável em CSS3

Certos tipos de classificação são fáceis para os computadores para fazer, e você quer que sua codificação CSS3 para criar essa situação. Por exemplo, um computador pode colocar itens em ordem alfabética muito mais rápido que um ser humano pode, especialmente quando a lista é longa.

No entanto, o tipo nem sempre são lógicas. Você pode querer que o usuário classificar uma lista de itens por preferência pessoal ou outros critérios que o computador não consegue nem entender. Nesses casos, você precisa de um meio de permitir que os tipos manuais - e este exemplo dá-lhe apenas o que você precisa.

O exemplo a seguir permite que um usuário itens de classificação por critérios não especificados. (Você pode encontrar o código completo para este exemplo no Chapter pasta 06 interações do código para download como SortContent.HTML).

$ (Function () {$ ( "# SortMe") classificável () -.}) ShowResults function () {// Criar o ouput string.var Output = "A ordem de classificação é: n" - // Localize cada um dos os itens e // necessários adicioná-los à string $ ( "# SortMe p") cada (function (índice, elemento) {saída + = element.innerHTML.substr (74) -}) -.. // exibe o resultado .alert (saída) -}

A chamada classificáveis ​​() é tudo o que você precisa fazer para fazer a lista visivelmente classificáveis. O usuário pode colocar os elementos, o que quer que esses elementos podem ser, em qualquer ordem desejada. Para fazer este trabalho chamada, no entanto, você precisa criar um recipiente - uma

etiquetas. O id SortMe vai com o

Acessando os itens em ordem também é uma exigência. Caso contrário, não há nenhum ponto em deixar o usuário classificar os itens. Neste caso, é realmente mais fácil de usar outras funcionalidades jQuery para obter a lista de elementos na ordem em que eles aparecem e processá-los dessa forma.

ShowResults () demonstra uma técnica para executar esta tarefa. Você começa criando o selector apropriado, que começa com a

marcá-lo contém. A função anônima recebe tanto um índice e um argumento elemento. Ao verificar a propriedade innerHTML do elemento, é possível obter o apelido para esse

tag. O resultado é exibido em uma caixa de diálogo.

Este exemplo também faz uso de um estilo especial CSS jQuery UI. Este estilo cria uma seta de duas pontas que ajuda o usuário a entender que cada item pode mover para cima ou para baixo na lista. Criá-lo usando um como isso:

Você pode encontrar uma lista destes ícones na Framework jQuery UI CSS. É importante criar ícones que correspondem a forma como a sua lista é exibido na tela.