K-Rise Systems

Code: Select all

<script type = "text/javascript"> $(function () {
    $("input[name^='TestCheckbox']").each(function (index, element) {
        $(this).parent("span").addClass("ToggleSwitch");
        $(this).next("label").addClass("ToggleSlider");
        $(this).next("label").addClass("ToggleRound");
        var thisId = $(this).prop('id');
        $(this).next("label").attr("for", thisId);
        var onclickFn = $(this).prop('onclick');
        $(this).next("label").attr("onclick", onclickFn);
    });
});
</script>
<style type= "text/css">
	/* The switch - the box around the slider */
	.ToggleSwitch {
		position: relative;
		display: inline - block;
		width: 50px;
		height: 25px;
	}
	/* Hide default HTML checkbox */
	.ToggleSwitch input {
		display: none;
	}
	/* The slider */
	.ToggleSlider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin - bottom: 0px;
		background - color: red;
		-webkit - transition: .4s;
		transition: .4s;
	}
	.ToggleSlider: before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 3px;
		bottom: 3px;
		margin - bottom: 0px;
		background - color: white;
		-webkit - transition: .4s;
		transition: .4s;
	}
	input: checked + .ToggleSlider {
		background - color: green;
	}
	input: focus + .ToggleSlider {
		box - shadow: 0 0 1px green;
	}
	input: checked + .ToggleSlider: before {
		-webkit - transform: translateX(25px);
		-ms - transform: translateX(25px);
		transform: translateX(25px);
	}
	/* Rounded sliders */
	.ToggleSlider.ToggleRound {
		border - radius: 25px;
	}
	.ToggleSlider.ToggleRound: before {
		border - radius: 50 % ;
	}
</style>