I would like to know how I would do to activate and deactivate a user using the same way that YouTube turns the videos on and off automatically. See the image:
I would like to know how I would do to activate and deactivate a user using the same way that YouTube turns the videos on and off automatically. See the image:
Here's the flipswitch link that I believe is what you want.
I'll be answering my own question to make a PHP solution available if you need to:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<style type="text/css">
/* Custom indentations are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
text-indent: -5.9em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
width: 8.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
padding-left: 7em;
width: 1.875em;
}
@media (min-width: 28em) {
// Repeated from rule .ui-flipswitch above
.ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
width: 1.875em;
}
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><scriptsrc="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('change', '#flip-checkbox-3', function(){
var datastring = $("#some-form").serializeArray();
var valor = $("#flip-checkbox-3 option:selected").text();
$.ajax
({
type: "POST",
url: "test.php?Key="+valor,
data: datastring
})
.done(function() {
$('#results').load("test.php?Key="+valor);
});
});
</script>
</head>
<body>
<form id="some-form">
<label for="flip-1">Flip toggle switch:</label>
<select data-role="flipswitch" name="flip-checkbox-3" id="flip-checkbox-3" data-wrapper-class="custom-size-flipswitch">
<option value="off">Desativar</option>
<option value="on">Ativar</option>
</select>
</form>
</body>
</html>
The result is the images below: