Bootstrap이 매일매일 배워야 하는 버튼 플러그인_javascript 기술

버튼은 부트스트랩 버튼 장에서 소개되었습니다. 버튼 플러그인을 사용하면 버튼 상태 제어와 같은 일부 상호 작용을 추가하거나 다른 구성 요소(예: 도구 모음)에 대한 버튼 그룹을 생성할 수 있습니다.

이 플러그인의 기능을 별도로 참조하려면 버튼.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.

1. 로딩상태

버튼에 로드 상태를 추가하려면 아래 예와 같이 버튼 요소에 data-loading-text="Loading..."을 속성으로 추가하면 됩니다.

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

2. 단일 전환

단일 버튼의 토글을 활성화하려면(즉, 버튼의 일반 상태를 누른 상태로 또는 그 반대로 변경), 다음과 같이 버튼 요소에 해당 속성으로 data-toggle="button"을 추가하면 됩니다. 아래 예 :

코드 복사 코드는 다음과 같습니다.

단일 토글

참고: Firefox에서 여러 페이지를 로드할 때 버튼은 양식에서 비활성화되거나 선택된 상태로 남아 있을 수 있습니다. 해결책은 autocomplete="off"를 추가하는 것입니다.

3. 라디오 버튼

마찬가지로, btn-group에 데이터 속성 data-toggle="buttons"를 추가하여 라디오 버튼 그룹을 만들고 라디오 버튼 그룹에 대한 토글을 추가할 수 있습니다.

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>  

                                                       

4. 확인 버튼

btn-group에 데이터 속성 data-toggle="buttons"를 추가하여 체크박스 그룹을 만들고 체크박스 그룹에 대한 토글을 추가할 수 있습니다.

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

Button 플러그인의 버튼 메소드에는 토글, 재설정, 문자열(예: 로드, 완료)의 세 가지 매개변수가 있습니다.

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})
 

Button 플러그인의 유용한 방법은 다음과 같습니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다.

Bootstrap 학습 튜토리얼을 참조하세요.