0

Colegas,

não sei se meu título foi claro, mas aqui no site consegui um toggle, porém preciso colocar a palavra Sim e Não dentro dele. A palavra Sim consegui colocar, mas ficou quase fora do toggle e a palavra Não não estou conseguindo. Não sei se fui claro na minha dúvida, então vou colocar a foto e o código.

inserir a descrição da imagem aqui

O código segue abaixo:

CSS

.onoff input.toggle {
    display: none;
}

.onoff input.toggle + label {
    content: "Não";
    display: inline-block;
    position: relative;
    box-shadow: inset 0 0 0px 1px #d5d5d5;
    height: 30px;
    width: 70px;
    background: #DC143C;
    border-radius: 30px;    
}

.onoff input.toggle + label:before {
    content: "";
    display: block;
    height: 30px;
    border-radius: 30px;
    background: rgba(19, 191, 17, 0);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle + label:after {
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    top: 0;
    left: 0px;
    border-radius: 30px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: 0.1s ease-in-out;
}

.onoff input.toggle:checked + label:before {
    width: 70px;
    content: 'Sim';
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
}

.onoff input.toggle:checked + label:after {
    left: 40px;    
    box-shadow: inset 0 0 0 1px #13bf11, 0 2px 4px rgba(0, 0, 0, 0.2);
}

HTML

<div class="col-lg-12"> 
    <div class="form-group">
        <div class="onoff">                 
            <input type="checkbox" class="toggle" id="onoff1">
            <label for="onoff1"></label>                        
        </div>                  
        <!--<span id="estado"></span> -->
        <input type="hidden" name="Ativo" id="campo" value="Não">                   
    </div>
</div>

JQuery

//<![CDATA[
window.onload=function(){

var onoff = document.getElementById('onoff1');
var estado = document.getElementById('estado');

onoff.addEventListener('change', function() {

    //estado.innerHTML = this.checked ? 'Sim' : 'Não';
    estado = this.checked ? 'Sim' : 'Não';
    // alert(estado);
    // var campo = document.getElementById("campo").value = estado.innerHTML;
    var campo = document.getElementById("campo").value = estado;
     //onoff.value = estado.innerHTML;
     //alert(onoff);

     if(campo === 'Sim'){
         var campoImagem = document.getElementById("campoImagem");
         $(campoImagem).css("display", "block");
     }else{
         var campoImagem = document.getElementById("campoImagem");
         $(campoImagem).css("display", "none");
     }

    $.ajax({
       // url: "index.html?status="+estado.innerHTML,
       data: {        
           estado: this.checked,
           campo: campo
       }
   }).done(function(msg) {     
   //if (msg == 'failed') return el.checked = !el.checked; // caso o servidor retorne "failed" mudar o estado do botão
    //   else ("Info gravada: " + msg);
   });
});
}//]]>

2 Respostas 2

1

Tenta as seguintes modificações no seu CSS e essa adição no seu JS:

CSS:

/* Modificação */
.onoff.ligado input.toggle:checked + label:before {
    width: 70px;
    content: '\00a0 Sim';
    color: #FFF;
    font-family: 'Arial';
    background: #13bf11;
    line-height: 1.8rem;
    text-align: left;
}

.onoff input.toggle + label:before {
    width: 70px;
    content: 'Não \00a0';
    color: #FFF;
    font-family: 'Arial';
    background: #DC143C;  
    line-height: 1.8rem;
    text-align: right;  
}

JS

//MODIFICAÇÕES

document.getElementById ('onoff1').addEventListener ('click', function (ev) {
    ev.target.parentNode.classList[ ev.target.checked ? 'add' : 'remove'] ('ligado');
  }, false);
1
  • Obrigado Leon Freire
    – user24136
    21/02/2017 às 17:52
0

Alternativamente, sem usar javascript para controlar o comportamento:

HTML:

<label class="toggle">
  <input type="checkbox" id="onoff2">
  <div></div>
</label>

CSS:

/* .toggle é o "container" de tudo */
.toggle {
    position: relative;
    display:  inline-block;
    width:    70px;
    height:   30px;
}

/* oculta quaisquer "input"s dentro do .toggle */
.toggle input {
    display: none;
}

/* o div é o campo, vermelho ou verde, no qual o botão corre */
.toggle > div {
    position:         absolute;
    cursor:           pointer;
    width:            70px;
    height:           30px;
    border-radius:    15px;
    background-color: #DC143C;
    box-shadow:       inset 0 0 0px 1px #d5d5d5;
    transition: 0.1s ease-in-out;
}
.toggle > input:checked + div {
    background-color: #13BF11;
}

/* o div::before é o botão branco */
.toggle > div::before {
    content:          '';
    display:          block;
    background-color: #FFF;
    width:            30px;
    height:           30px;
    border-radius:    15px;
    box-shadow:       inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
    transition:       0.1s ease-in-out;
}

.toggle > input:checked + div::before {
    transform:        translateX(40px);
}

/* o div::after vai conter o rótulo propriamente dito */
.toggle > div::after {
    content:     'Não';
    line-height: 20px;
    padding:     5px;
    margin-top:  -30px;
    float:       right;
    color:       #FFF;
    transition:  0.1s ease-in-out;
}

.toggle > input:checked + div::after {
    content:     'Sim';
    float:       left;
    transition:  0.1s ease-in-out;
}

O pulo do gato é o margin-top: -30px;, já que o div::after vai acabar "na linha de baixo", então fica clipado e invisível.

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