Page Header > Subtitle

Data 속성(Data attributes)

모든 부트스트랩 플러그인은 자바스크립트 한줄 없이 마크업 API 를 통해 사용할 수 있습니다. 이건 부트스트랩의 최고급 API 이며 플러그인을 사용할 때 첫번째 고려사항이 되어야 합니다.

그렇긴 하지만, 어떤 상황에서는 이 기능성을 끄는 것이 바람직할 수도 있습니다. 그러므로, 우리는 문서상에 data-api 로 된 네임스페이스의 모든 이벤트를 해제하는 방법으로 data 속성 API 를 끌 수 있는 기능을 제공합니다. 이것은 다음과 같습니다:

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

아니면, 특정 플러그인을 대상으로 하려면, 다음과 같이 data-api 네임스페이스와 함께 플러그인 이름의 네임스페이스 을 포함합니다:

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

자바스크립트 API(Programmatic API)

우리는 또한 당신이 순전히 자바스크립트 API 를 통해 부트스트랩 플러그인을 사용할수 있다고 믿습니다. 모든 공용 API 들은 하나로 되어있고, 연결해서 쓸 수 있는 메소드이고, 수행한 후 콜렉션을 돌려줍니다.

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

모든 메소드에는 옵션 객체나, 특별한 메소드를 대상으로 하는 문자열을 넣을 수 도 있고, 아무것도 넣지 않을 수도 있습니다(기본 옵션으로 플러그인을 실행):

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

각 플러그인은 또한 Constructor 속성에서 생성자 코드를 볼 수 있습니다: $.fn.popover.Constructor. 만약 당신이 특정한 플러그인 인스턴스를 얻으려면, 태그 요소로부터 직접 회수할 수 있습니다: $('[rel="popover"]').data('popover'). 

충돌 방지(No conflict)

때때로 다른 UI 프레임워크와 부트스트랩 플러그인을 같이 쓰기 위해 충돌을 방지할 필요가 있습니다. 이런 상황에서는, 네임스페이스 충돌이 가끔 일어납니다. 만약 그런 일이 발생하면, 당신은 noConflict 메소드를 실행하여 다른 네임스페이스를 사용할 수 있습니다.

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value

$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality

이벤트

부트스트랩은 대부분은 플러그인의 고유 액션들을 위해 맞춤 이벤트를 제공합니다. 이것들은 동사원형이나 과거완료형으로 제공되는데, 동사원형(예. show) 은 이벤트의 시작에 실행되고, 과거완료형(예. shown) 은 액션의 완료에 실행됩니다.

3.0.0 이래로, 모든 부트스트랩 이벤트는 네임스페이스를 가집니다.

모든 동사원형 이벤트는 기능적으로 preventDefault 를 제공합니다. 이것은 그것이 시작되기 전에 액션의 실행을 중지하기 위한 기능입니다.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown

})

애니메이션 제거

모달이 화면에서 페이드되는 것보다 간단하게 나타나기 위해, 모달 마크업에서 .fade 클래스를 제거하세요.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  ...

</div>

자바스크립트로

한 줄의 자바스크립트로 myModal 의 id 를 가진 모달을 불러옵니다:

$('#myModal').modal(options)

옵션

옵션은 data 속성이나 자바스크립트로 전해질 수 있다. data 속성은 data-backdrop="" 처럼 data- 에 옵션명을 덧붙히면 됩니다.

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

메소드

.modal(options)

모달을 활성화 합니다. object 를 이용해서 옵션을 넣을 수도 있습니다.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

수동적으로 모달을 토글합니다. 모달이 실제로 보여지거나 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 shown.bs.modal 나 hidden.bs.modal 이벤트가 발생하기 전에)

$('#myModal').modal('toggle')

.modal('show')

수동적으로 모달을 엽니다. 모달이 실제로 보여지기 전에 호출자에게 리턴합니다. (말하자면 shown.bs.modal 이벤트가 발생하기 전에)

$('#myModal').modal('show')

.modal('hide')

수동적으로 모달을 닫습니다. 모달이 실제로 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 hidden.bs.modal 이벤트가 발생하기 전에)

$('#myModal').modal('hide')

이벤트

부트스트랩의 모달 클래스는 모달의 기능적인 부분을 후킹하기 위한 약간의 이벤트들을 제공합니다.

모든 모달 이벤트는 모달 자신에서 발생됩니다. (다시말해서 <div class="modal"> 에서)

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...

})