on/off 스위치 css 유지하는법
본문
안녕하세요 db값에 따라 on/off를 나타내고싶습니다
https://stackoverflow.com/questions/39846282/how-to-add-the-text-on-and-off-to-toggle-button
참고해서
<!-- custom style -->
<style>
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 20px;
top : 100%;
margin-left: -27px;
margin-top : 25px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #CCC;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: var(--BASE_COLOR);
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(35px);
-ms-transform: translateX(35px);
transform: translateX(35px);
}
/*------ ADDED CSS ---------*/
.check_on
{
display: none;
}
.check_on, .check_off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .check_on
{display: block;}
input:checked+ .slider .check_off
{display: none;}
.slider.round {
border-radius: 32px;
}
.slider.round:before {
border-radius: 50%;}
</style>
css부분이고,
<? php
$temp = $row5[' - ']; //db에서 on/off를 가져옴
?>
<div class="container" display: table-cel; vertical>
<div class="item">
<a href="#">
<div style="float:right;">
<form name = "p_alert" id="p_alert" method="POST" onclick="javascript:checkForm(document.p_alert);">
<label class="switch">
<?php if($temp=="Y"){?> // DB에 저장된게 Y이면,
<input type="checkbox" id="togBtn" name = "togBtn" value = "true">//DB내용을 수정
<div class="slider round">
<span class="check_on" type="push">ON</span> //스위치 ON
</div>
<?}else if($temp=="N"){?> //DB에 저장된게 N이면,
<input type="checkbox" id="togBtn" name = "togBtn" value = "false">//DB내용을 수정
<div class="slider round">
<span class="check_off" type="push">OFF</span> // 스위치 OFF
</div>
<?}?>
</form>
</div>
</label>
</div>
</a>
이런식으로 구현했습니다
스위치를 클릭했을때 DB갱신은 되는데 DB값에 따라 스위치가 ON/OFF 상태가 유지가 되지 않네요 ㅜㅜ
혹시 참고할만한 홈페이지나 내용 알고 계신분 알려주시면 감사하겠습니다..!
!-->!-->답변 2
jquery 로 클릭 이벤트를 가지고 해당 css를 변경하셔야 합니다.
$(document).ready(function(){
$(".check_off").click(function(){
$(this).removeClass("check_off");
$(this).addClass("check_on");
});
});
이런식으로요..
원하시는 내용이 맞을지 모르겠네요.
도움이 되었으면 합니다~
|
답변을 작성하시기 전에 로그인 해주세요.