Get best of the week

Opção de seleção de estilo (quase) sem JavaScript

O estilo de alguns elementos padrão é uma tarefa bastante não trivial.

Obviamente, um bom especialista pode estilizar qualquer coisa, mas tudo depende da complexidade dessa ação.

Vai demorar um pouco de tempo para estilizar botões de opção e caixas de seleção - a idéia de estilizar um rótulo com entrada oculta não é nova e há muito tempo é usada em qualquer lugar.

Para estilizar o resto - existe JavaScript.

Hoje, quero falar sobre como é relativamente simples criar listas suspensas com código JavaScript mínimo (de 0 a 26 linhas) e marcação HTML adicional mínima.

Fácil seleciona sem JavaScript (quase)

No outro dia, como muitas vezes acontece, eu precisava criar uma lista suspensa. No entanto, tornou-se uma lista suspensa apenas na versão móvel, antes disso se comportava como o grupo mais comum de botões de opção.

E então, quando eu estava quase terminando de escrever outra construção assustadora projetada para substituir o infeliz Select, eu tinha uma pergunta:

Por quê?

Normalmente, essa pergunta leva à procrastinação sábia, a uma repensar a vida etc., mas desta vez algo deu errado, e eu percebi que a pergunta era realmente boa e, mais importante, útil.


Um pequeno programa educacional:

Então, para aqueles que estão no tanque, bem como aqueles para quem as listas suspensas causam tanta dor que eles decidiram esquecê-los como um pesadelo, lembrarei um pouco (realmente) o que é.

As listas suspensas consistem em 2 elementos principais :

  1. Selecionar - container para a lista inteira
  2. Opção - item da lista

Às vezes, o OptGroup (um grupo de itens da lista) também é usado, mas sua implementação até o momento permanece em JavaScript.

A principal funcionalidade da lista suspensa é o envio de informações sobre os itens selecionados para o servidor.

Para completar, aqui está uma lista de atributos do elemento (para que você possa estimar quantos deles serão implementados):

  1. Selecione - desativado , forma , múltiplo , nome , necessário , tamanho
  2. Opção - desabilitada , etiqueta , selecionada , valor

Nisto, talvez, terminaremos com a descrição e seguiremos para a implementação .


Muitas palavras já foram escritas, portanto - mais perto do código:

<form>
  <div class="content">
    <h3 class="title"> 0 </h3>

    <input id="selectName0" type="radio" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="radio" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="radio" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Então, para que serve esse código? (tudo o que pode ser dispensado durante a explicação foi removido especialmente)

Vamos observar quais itens da funcionalidade Selecionar e Opção se tornaram automaticamente possíveis devido ao uso do rótulo input +:

  1. Selecionar - formulário, nome, obrigatório
  2. Opção - desabilitada, etiqueta, selecionada, valor

E isso é tudo o que precisa ser implementado:

  1. Selecionar - desativado, múltiplo, tamanho
  2. Opção - totalmente implementada

Apenas adicionando os pacotes de entrada + rótulo, reduzimos a lista de funcionalidades necessárias de 10 pontos para 3. Nada mal, mas esse não é o fim, certo?

Para implementar o item Select.multiple (múltipla escolha) - faça o seguinte:

<form>
  <div class="content">
    <input id="selectName0" type="checkbox" value="0" name="selectName" />
    <label for="selectName0"> 0 </label>
    <input id="selectName1" type="checkbox" value="1" name="selectName" />
    <label for="selectName1"> 1 </label>
    <input id="selectName2" type="checkbox" value="2" name="selectName" />
    <label for="selectName2"> 2 </label>
  </div>
</form>

Apenas mudamos o tipo de entrada de Radio para Checkbox e obtemos um analógico quase completo de múltiplos .

A diferença é que, para seleção múltipla, você não precisa pressionar a tecla Ctrl (bem, se alguém quiser imitar completamente a funcionalidade - JavaScript para ajudar).

O que resta?

  1. Selecionar - desativado, tamanho
  2. Opção - totalmente implementada

Bem, o Select.disabled e o Select.size são extremamente simples de implementar usando CSS:

  • Select.size - qual o tamanho que você definir. Você só precisa adicionar o contêiner.
  • Select.disabled - para o contêiner, você precisa adicionar eventos-ponteiro: nenhum para cancelar a reação a qualquer ação do usuário (passar o mouse, cliques etc.), bem, você pode torná-lo um pouco transparente.

Então, a principal funcionalidade é. O que está faltando?

Você também precisa adicionar o preenchimento automático de cabeçalho ao menu suspenso com a única opção e também haverá um problema ao redefinir o formulário (botão Redefinir ), porque o título não será redefinido. Mas mesmo isso é completamente solucionável (usando JavaScript).


E agora - exemplos:

Um pouco de implementação (menu suspenso com uma única opção):


E um pouco mais (não um menu suspenso com várias opções):


Bônus: não sei por que fiz isso, mas ... um menu suspenso com uma única opção e uma redefinição de cabeçalho baseada em CSS:





Por que isso é necessário?

Devido ao fato de que, a julgar pelos comentários, nem todo mundo entende por que esse código será útil, considero necessário dar alguns esclarecimentos.

Ao estilizar listas suspensas do formulário:
<select>
  <option> 1</option>
  <option> 2</option>
</select>

Existem sérias limitações de estilo. Portanto, eles são substituídos por listas simples:
<ul>
  <li> 1</li>
  <li> 2</li>
</ul>

com o qual toda a funcionalidade necessária é suspensa usando JavaScript.

Como as listas inicialmente não interagem com os formulários de maneira alguma , isso causa problemas.

Não é apenas necessário implementar todas as funcionalidades básicas:

  • pontos de comutação e sua interação
  • estado (marcado, desativado)
  • vinculação ao formulário e envio de dados ao servidor
  • inicialização de dados iniciais (preenchimento automático)
  • redefinição de formulário (quando você clica no botão "redefinir", a lista deve retornar ao estado durante a inicialização)


De fato, se algo quebra no JavaScript, isso não importa, porque o script não carregou, um bug surgiu, fez alterações - se ocorrer algum problema, a lista suspensa se transforma em ... algo que se parece com uma lista suspensa, mas não funciona.
Geralmente. De jeito nenhum.

Para o usuário, ele terá a seguinte aparência: existe uma lista suspensa, mas você não pode trabalhar com ela.

Para o servidor, isso parecerá ainda mais divertido - chegou um formulário no qual não há dados suficientes. É bom que essa situação tenha sido prevista com antecedência no desenvolvimento ... Afinal, estava prevista, certo?


Prós da solução resultante:

  • ( ), . JavaScript ( ). , — . , — / — html ( JS), .
  • . , , ( ). ul — li , .



(. , , JavaScript' / ):

  • tab
  • ( select -)
  • ( , )
  • select ( select . select)
  • , (JS )
  • ( OptGroup) (, )


Como você pode ver, nenhuma das desvantagens acima é crítica para a grande maioria das listas e, se necessário, é implementada usando JavaScript e , portanto, ...


Bem-vindo ao mundo em que suas bibliotecas para criar listas do tipo Select-Option ficarão um pouco menores, e trabalhar com essas listas sem bibliotecas será quase confortável!



UPD: como se viu, no caso de caixas de seleção, o atributo necessário não funciona corretamente e também precisa ser emulado usando JavaScript (no momento, todas as caixas de seleção marcadas como necessárias se tornam obrigatórias e somente elas)

More articles:


All Articles