2

Estou precisando fazer a transição desse script para usar com <select>.

Veja bem o script funcionando é assim http://callmenick.com/tutorial-demos/css-toggle-switch/

Meus selects (mais de 88) sao APENAS nesse estilo:

<select>
<option value="0">Off</option>
<option value="1" selected="selected">On</option>
</select>

Apenas com opcao de ligar e desligar (0,1)

Gostaria de poder adaptar o CSS para isso, mas vejo que é CSS3 e nao sei trabalhar com ele.. O que posso fazer?

Exemplo de como seria http://jsfiddle.net/thebestclassdsfgf/jo2hkom2/1/

1 Resposta 1

3

Esse código é feito para um input type="checkbox" e o CSS faz o trabalho todo. Ou seja se o input estiver :checked ou não, o botão mexe-se. No seu caso poderia funcionar assim também, com inputs.

Mas se quiser mesmo usar select pode fazer assim usando uma classe ligado para substituir a funcionalidade do :checked

HTML

<select id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" >
    <option value="0">Off</option>
    <option value="1" selected="selected">On</option>
</select>
<label for="cmn-toggle-1"></label>

jQuery

$('select').on('click', function () {
     $(this).val(this.value == '1' ? '0' : '1');
    this.classList.toggle('ligado');
});

CSS (somente a parte relevante)

.cmn-toggle-round.ligado + label:before {
    background-color: #8ce196;
}
.cmn-toggle-round.ligado + label:after {
    margin-left: 60px;
}

jsFiddle: http://jsfiddle.net/y8u1beek/

8
  • perfeito! Mas eu teria problemas, pois eu ja pre defino quem ta marcado ou nao usando o selected="selected" e nesse caso nao funcionou.. Commented 9/12/2014 às 23:16
  • @user3163662 ok, isso é simples, só precis de juntar mais uma linha: jsfiddle.net/7m8L2b74/2
    – Sergio
    Commented 9/12/2014 às 23:20
  • Ok, agora estou tendo problemas, ele nao altera o valor.. e como eu vou enviar por post, preciso que mude. Veja (altere o toggle e espere) jsfiddle.net/thebestclassdsfgf/7m8L2b74/3 @Sergio Commented 10/12/2014 às 12:13
  • @user3163662 e porque não fazer isso com checkbox?
    – Sergio
    Commented 10/12/2014 às 12:15
  • @Segio estou fazendo transições.. e sao muitas checkboxes Commented 10/12/2014 às 12:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .