[jquery] 토글 버튼은 어떻게 만듭니 까?

Program / 글쓴이

CSS를 사용하여 html로 토글 버튼을 만들고 싶습니다. 나는 당신이 그것을 클릭 할 때 밀린 상태로 유지되고 다시 클릭 할 때보 다 튀어 나오도록하고 싶습니다.

CSS를 사용하는 방법이 없다면. jQuery를 사용하여 수행하는 방법이 있습니까?

답변

좋은 의미 론적 방법은 확인란을 사용한 다음 선택 여부에 따라 다른 방식으로 스타일을 지정하는 것입니다. 하지만 좋은 방법은 없습니다. 당신은 여분의 스팬, 여분의 div를 추가하고, 정말 멋진 모습을 위해 자바 스크립트를 추가해야합니다.

따라서 가장 좋은 해결책은 버튼의 두 가지 상태를 스타일링하기 위해 작은 jQuery 함수와 두 개의 배경 이미지를 사용하는 것입니다. 테두리로 제공되는 위 / 아래 효과의 예 :

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a>

스 니펫 확장

당연히 버튼 위와 아래를 나타내는 배경 이미지를 추가하고 배경색을 투명하게 만들 수 있습니다.

답변

JQuery UI를 사용하면 토글 버튼을 쉽게 만들 수 있습니다. 그냥 넣어

<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />

귀하의 페이지에 다음 귀하의 본문 onLoad또는 귀하의 $.ready()(또는 init()ajax 사이트를 구축하는 경우 일부 객체 리터럴 기능 ..) 다음과 같이 일부 JQuery를 드롭하십시오.

$("#myToggleButton").button()

그게 다야. ( < label for=...>JQueryUI가 토글 버튼의 ​​본문에 사용하기 때문에 잊지 마세요 .)

여기에서 다른 input="checkbox컨트롤 과 마찬가지로 작업 할 수 있습니다. “이는 여전히 기본 컨트롤이지만 JQuery UI는 화면에서 예쁜 토글 버튼처럼 보이도록 스킨을 적용합니다.

답변

다음은 사용하는 예입니다 pure css.

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }
<div class="switch">
  <input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">
  <label for="cmn-toggle-1"></label>
</div>

스 니펫 확장

답변

이 답변 과 함께 모바일 설정 토글 러와 같은 스타일을 사용할 수도 있습니다.

토글 러

HTML

<a href="#" class="toggler">&nbsp;</a>
<a href="#" class="toggler off">&nbsp;</a>
<a href="#" class="toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

훨씬 더 예뻐질 수 있지만 아이디어를 제공합니다.
한 가지 장점은 jquery 및 / 또는 CSS3 Fiddler 로 애니메이션 할 수 있다는 것입니다.

답변

적절한 버튼을 원하면 자바 스크립트가 필요합니다. 이와 같은 것 (스타일링에 대한 작업이 필요하지만 요점을 얻습니다). 솔직히 말해서 너무 사소한 일에 jquery를 사용하는 것을 귀찮게하지 않을 것입니다.

<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}

.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>

<script language="javascript">
function togglestyle(el){
    if(el.className == "on") {
        el.className="off";
    } else {
        el.className="on";
    }
}
</script>

</head>

<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>

답변

toggleClass()상태를 추적 하는 데 사용할 수 있습니다 . 그런 다음 버튼 요소에 다음과 같은 클래스가 있는지 확인합니다.

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

그리고 button의미 론적 이유로 버튼 요소를 사용합니다 .

<button class="toggler">Toggle me</button>

답변

앵커 요소 ( <a></a>)를 사용하고 a : active 및 a : link를 사용하여 배경 이미지를 켜거나 끌 수 있습니다. 그냥 생각.

편집 : 위의 방법은 토글에 너무 잘 작동하지 않습니다. 그러나 jquery를 사용할 필요는 없습니다. 버튼이 눌린 것처럼 보이도록 배경 이미지를 적절하게 변경하는 요소에 대한 간단한 onClick 자바 스크립트 함수를 작성하고 플래그를 설정합니다. 그런 다음 다음 클릭시 이미지와 플래그가 되돌아갑니다. 그렇게

var flag = 0;
function toggle(){
if(flag==0){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
    flag=1;
}
else if(flag==1){
    document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
    flag=0;
}
}

그리고 html은 이렇게
<div id="toggleDiv" onclick="toggle()">Some thing</div>