Colleagues,
I do not know if my title was clear, but here on the site I got a toogle, but I need to put the word Yes and No inside it. The word Yes I was able to put, but it was almost out of toogle and the word No is not working. I do not know if I was clear in my doubt, so I'll put the photo and the code.
Thecodefollowsbelow:
CSS
.onoffinput.toggle{display:none;}.onoffinput.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);
});
});
}//]]>