매일매일 배워야 할 부트스트랩 js 플러그인_javascript 기술

1. 부트스트랩 플러그인 개요

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

2. JavaScript 플러그인 가져오기

부트스트랩에는 풍부한 웹 구성 요소 외에도 앞서 소개한 드롭다운 메뉴, 버튼 그룹, 탐색, 페이징 등이 포함되어 있습니다. 또한 일부 JavaScript 플러그인도 포함되어 있습니다.

Bootstrap의 JavaScript 플러그인은 개별적으로 또는 한 번에 페이지로 가져올 수 있습니다. Bootstrap의 JavaScript 플러그인은 모두 jQuery 라이브러리에 의존하기 때문에 개별적으로 가져오든 한꺼번에 가져오든 먼저 jQuery 라이브러리를 가져와야 합니다.

일회성 가져오기:

Bootstrap은 Bootstrap의 모든 JavaScript 플러그인, 즉 bootstrap.js(압축 버전: bootstrap.min.js)가 포함된 단일 파일을 제공합니다.

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>

개별 가져오기:

특수 효과 파일을 쉽게 별도로 가져올 수 있도록 Bootstrap V3.2는 다음과 같은 12개의 JavaScript 플러그인을 제공합니다.

🙌 애니메이션 전환: 해당 플러그인 파일 “transition.js”

✓ 모달 팝업 창(Modal): 해당 플러그인 파일 "modal.js"

🙌 드롭다운 메뉴(드롭다운): 해당 플러그인 파일 "dropdown.js"

🙌 스크롤 감지(Scrollspy): 해당 플러그인 파일 "scrollspy.js"

✓ Tab: 해당 플러그인 파일 "tab.js"

✓ 툴팁: 해당 플러그인 파일 "tooltop.js"

✓ 팝업 상자(Popover): 해당 플러그인 파일 "popover.js"

✓ 경고 상자(Alert): 해당 플러그인 파일 "alert.js"

🙌 버튼: 해당 플러그인 파일 "button.js"

🙌 접기/아코디언(접기): 해당 플러그인 파일 "collapse.js"

✓ 이미지 캐러셀 캐러셀: 해당 플러그인 파일 "carousel.js"

✓ 부표 자동 찾기 첨부: 해당 플러그인 파일 "affix.js"

3. 데이터 속성

JavaScript 코드를 한 줄도 작성하지 않고도 데이터 속성 API를 통해서만 모든 Bootstrap 플러그인을 사용할 수 있습니다. 이는 Bootstrap의 최고 수준 API이며 첫 번째 선택이 되어야 합니다.

그리고 또 이 기능을 꺼야 하는 상황이 발생할 수 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 이벤트를 data-api 네임스페이스와 바인딩 해제하고 문서에 바인딩하는 방법도 제공합니다. 이렇게:

$(document).off('.data-api')

특정 플러그인을 닫아야 하는 경우 아래와 같이 data-api 네임스페이스 앞에 플러그인 이름을 네임스페이스로 추가하기만 하면 됩니다.

$(document).off('.alert.data-api')

4. 프로그래밍 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('popover').

5. 네임스페이스 충돌 방지

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

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

6、事件

Bootstrap 为大多数插件的独特行为提供了自定义事件。一般来说，这些事件有两种形式：
动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

以上就是本文的全部内容，希望对大家的学习有所帮助。