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

WBOY
풀어 주다: 2016-05-16 15:04:09
원래의
1681명이 탐색했습니다.

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

이 플러그인의 기능을 별도로 참조하려면 버튼.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 학습 튜토리얼을 참조하세요.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!