boottstrap switch 스위치 구성 요소 사용 방법 상세 설명

boottstrap 중국어 인터넷 에 이러한 boottstrap-switch 구성 요소 가 있 는데 매우 실 용적 입 니 다.demo 를 보고 학습 하고 기록 하 세 요.

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset=utf-8> 
    <meta name=description content=""> 
    <meta name=viewport content="width=device-width, initial-scale=1"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> 
    <link href="css/bootstrap-switch.min.css" rel="external nofollow" rel="stylesheet" /> 
     <script src="js/jquery/jquery.1.11.3.min.js"></script> 
     <script src="js/bootstrap.min.js"></script> 
    <script src="js/bootstrap-switch.min.js"></script> 
 
  </head> 
  <body> 
     <input name="status" type="checkbox" data-size="small">  
     <script type="text/javascript"> 
      $('[name="status"]').bootstrapSwitch({  
      onText:"  ",  
      offText:"  ",  
      onColor:"success",  
      offColor:"info",  
      size:"small",  
    onSwitchChange:function(event,state){  
      if(state==true){  
        alert('   ');  
      }else{  
        alert('   ');  
      }  
    }  
 
       })  
 
    </script> 
  </body> 
</html> 

Bootstrap-Switch 소스 주소:https://github.com/nostalgiaz/bootstrap-switch
Bootstrap-Switch 문서 및 Demo:http://www.bootstrap-switch.org/examples.html
상용 속성
사이즈:스위치 크기.선택 가능 한 값 은'mini','mall','normal','large'가 있 습 니 다.
onColor:스위치 에서 버튼 을 여 는 색 입 니 다.선택 할 수 있 는 값 은'primary','info','uccess','warning','danger','default'입 니 다.
offcolor:스위치 에서 끄 는 단추 의 색 입 니 다.옵션 값'primary','info','성공','warning','danger','default'
onText:스위치 에서 단 추 를 여 는 텍스트 입 니 다.기본 값 은"ON"입 니 다.
offText:스위치 에서 닫 힌 단추 의 텍스트 입 니 다.기본 값 은"OFF"입 니 다.
onInit:구성 요소 의 이 벤트 를 초기 화 합 니 다.
onSwitchChange:스위치 가 변 했 을 때의 이벤트 입 니 다.


이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기