부트 스트랩 스위치 플러그인은 부트 스트랩 용으로 구현 된 스위치 버튼 컨트롤로 치수, 색상 및 기타 속성의 사용자 정의를 지원할 수 있습니다. 국내 웹 사이트에는 스위치 유형 버튼이 많지 않습니다. 부트 스트랩은 해외에서 매우 인기가 있습니다. 우리가 마음에 들지 않는지 또는 웹 사이트에 사용하기가 어려운지 모르겠습니다. 그러나이 오프닝 버튼은 휴대폰과 같은 모바일 장치에서 가장 널리 사용되며 화면의 특성은 더 나은 개발을 촉진합니다.
기능 설명 :
두 가지 형태의 Chekbox와 Radio의 간단한 사용을 소개하면 데모를 찾아내는 더 많은 효과와 기능이 있습니다. 버튼을 클릭하여 슬라이딩 방식으로 켜지거나 끄십시오.
사용 지침 :
1. CSS 및 JS 파일을 소개합니다
<link rel = "Stylesheet"href = "static/stylesheets/bootstrap-switch.css"/> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.jss"</script> <script src = "static/js/bootstrap-switch.js"> </script>
2.HTML 컨텐츠가 추가되었습니다
<div data-on = "info"data-off = "success"> <입력 유형 = "checkbox"checked> </div> <div data-on = "success"data-off = "경고"> <input type = "checkbox"checked> </div> <div data-on = "경고"데이터 오프 = "danger"> <checkbox "checkbox"<input "="deffault ""deffault ""Defoful ""Default ""div-off ". 타입 = "확인란"확인> </div>
1). DIV는 전적으로 확인란에 스타일을 추가하기위한 것입니다.
2). 입력은 매우 간단하며 일반적인 레이블입니다.
3) 메이크 스위치 : 플러그인을 사용하여 Checkbox에 CSS 스타일을 추가하십시오.
4) .data-on : CSS 스타일이 상태에있을 때.
5) .Data-Off : CSS 스타일이 오프 상태 일 때.
3. 라디오 라디오 박스 사용 :
<label for = "option11"> 옵션 1 </label> <div> <input id = "옵션 11"유형 = "radio"name = "radio2"value = "옵션 11"> </div> <label for = "option12"> 옵션 2 </label> <div> <입력 ID = "옵션 ="radio "name ="radio2 "value ="옵션 "</div> <옵션"> for = "옵션 13"> 옵션 3 </label> <div> <입력 id = "옵션 13"type = "radio"name = "raide2"value = "옵션 13"> </div>
라디오 상자 중 하나가 먼저 변경되어야하므로 라디오 라디오 상자는 동일한 방식으로 사용되므로 해당 JS 코드를 추가해야합니다.
<cript> $ ( '. radio2'). on ( 'switch-change', function () {$ ( '. radio2'). bootstrapswitch ( 'toggleradiostateallowuncheck', true); </script>4. 시작
$ ( "div [class = 'switch']"). 각 (function () {$ this = $ (this); var oncolor = $ this.attr ( "oncolor"); var offcolor = $ this.attr ( "offcolor"); var ontext = $ this.attr ( "ontext"); var eldext = $ thistt ( "offtext"); $ this.attr ( "labeltext"); var $ switch_input = $ ( ": oncolor : oncolor, offcolor, ontext : ontext, offtext, labelText});1). jQuery를 통해 모든 스위치 div를 얻으려면 해당 속성, OffColor 등을 얻습니다.
2). 그 후 즉시, div에 포함 된 자식 요소의 입력을 가져옵니다.
3). 부트 스트랩 스위치 메소드를 통해 입력을로드하십시오.
이런 식으로, 우리는 단순히 원하는 스위치 버튼 효과를 달성 할 수 있습니다.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
위의 것은 부트 스트랩 스위치 (스위치) 컨트롤 사용 방법에 관한 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.