Bootstrap Plug-in_javascript 스킬에 대한 자세한 설명

이전 레이아웃 구성요소 장에서 설명한 구성요소는 시작에 불과합니다. Bootstrap에는 기능을 확장하고 사이트에 더 많은 상호 작용을 추가하는 12개의 jQuery 플러그인이 함께 제공됩니다. 고급 JavaScript 개발자가 아니더라도 Bootstrap의 JavaScript 플러그인 학습을 시작할 수 있습니다. Bootstrap Data API를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 실행할 수 있습니다.

사이트에서 Bootstrap 플러그인을 참조하는 방법에는 두 가지가 있습니다 :

별도 참조: Bootstrap의 개별 *.js 파일을 사용하세요. 일부 플러그인과 CSS 구성요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 참조하는 경우 먼저 해당 플러그인 간의 종속성을 확인하세요.
컴파일(또한) 참조: bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 사용하세요.
" bootstrap.js와 bootstrap.min.js 모두에 모든 플러그인이 포함되어 있으므로 두 파일을 동시에 참조하려고 하지 마십시오.

모든 플러그인은 jQuery에 의존합니다. 따라서 jQuery는 플러그인 파일 앞에 인용되어야 합니다. 현재 Bootstrap에서 지원하는 jQuery 버전을 보려면 bower.json을 방문하세요.

1. 데이터 속성
JavaScript 코드를 한 줄도 작성하지 않고도 데이터 속성 API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있습니다. 이는 Bootstrap의 최고 수준 API이며 첫 번째 선택이 되어야 합니다.
그러다가 이 기능을 꺼야 하는 상황이 발생할 수도 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 이벤트를 data-api 네임스페이스와 바인딩 해제하고 문서에 바인딩하는 방법도 제공합니다. 이렇게:
$(document).off('.data-api')
특정 플러그인을 닫아야 하는 경우 아래와 같이 data-api 네임스페이스 앞에 플러그인 이름을 네임스페이스로 추가하기만 하면 됩니다.
$(document).off('.alert.data-api')

2. 프로그래밍 API
우리는 모든 Bootstrap 플러그인에 순수 JavaScript API를 제공합니다. 모든 공개 API는 개별 또는 체인 호출 메서드를 지원하고 해당 메서드가 작동하는 요소 컬렉션을 반환합니다(참고: 호출 형식은 jQuery와 일치합니다). 예:

$(".btn.danger").button("toggle").addClass("fat")

모든 메소드는 아래와 같이 선택적 옵션 객체를 매개변수 또는 특정 메소드를 나타내는 문자열로 받아들이거나 매개변수 없이 받아들일 수 있습니다(이 경우 플러그인은 기본 동작으로 초기화됩니다).

// 初始化为默认行为
$("#myModal").modal()  
 // 初始化为不支持键盘       
$("#myModal").modal({ keyboard: false }) 
// 初始化并立即调用 show
$("#myModal").modal('show') 

또한 각 플러그인은 생성자 속성인 $.fn.popover.Constructor에 원래 생성자를 노출합니다. 특정 플러그인의 인스턴스를 얻으려면 페이지 요소를 통해 직접 얻을 수 있습니다:
$('[rel=popover]').data('팝오버').

3. 네임스페이스 충돌 방지
때때로 Bootstrap 플러그인을 다른 UI 프레임워크와 함께 사용해야 할 수도 있습니다. 이 경우 네임스페이스 충돌이 발생할 수 있습니다. 불행하게도 이런 일이 발생하면 플러그인의 .noConflect 메소드를 호출하여 원래 값을 복원할 수 있습니다.

// 返回 $.fn.button 之前所赋的值
var bootstrapButton = $.fn.button.noConflict()
// 为 $().bootstrapBtn 赋予 Bootstrap 功能             
$.fn.bootstrapBtn = bootstrapButton      

4. 이벤트
Bootstrap은 대부분의 플러그인의 고유한 동작에 대한 사용자 정의 이벤트를 제공합니다. 일반적으로 이러한 이벤트는 두 가지 형태로 제공됩니다.

동사 부정사: 이벤트 시작 시 발동됩니다. 예를 들면 다음과 같습니다. 부정사 이벤트는 PreventDefault 기능을 제공합니다. 이를 통해 이벤트가 시작되기 전에 작업 실행을 중지할 수 있습니다.

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
 if (!data) return e.preventDefault()
})

과거분사형: 동작이 실행된 후에 실행됩니다. 예를 들면 다음과 같습니다.

위 내용은 Bootstrap 플러그인에 대한 간략한 개요입니다. Bootstrap 플러그인을 이해하는 모든 분들에게 도움이 되기를 바랍니다.