[javascript] jQuery 플러그인 부트스트랩의 콤포넌트(modal)
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-
에 옵션명을 덧붙히면 됩니다.
옵션명 | 유형 | 기본 | 설명 |
---|---|---|---|
backdrop | boolean or the string 'static' | true | 모달 배경을 포함합니다. 그렇지 않으면, 클릭 시 모달을 닫지 않는 배경을 위해 static 를 명시하세요. |
keyboard | boolean | true | Esc 키가 눌렸을 때 모달을 닫습니다. |
show | boolean | true | 초기화할 때 모달을 보여줍니다. |
remote | path | false | 이 옵션은 v3.3.0 이후로 폐기예정으로 되었으며 v4 에서는 제거될 것입니다. 우리는 대신 클라이언트측 템플릿이나 data 바인드 프레임워크를 사용하거나, jQuery.load 을 호출하는 것을 추천합니다. 만약 원격 URL 이 제공된다면, 내용은 jQuery 의 load 를 통해 불러와 모달 요소에 삽입됩니다. 만약 data 속성 API 를 사용한다면, URL 을 href 속성에 명시할 수 있습니다. 이것은 아래와 같이 사용합니다: Copy
|
메소드
.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">
에서)
이벤트 | 설명 |
---|---|
show.bs.modal | 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 발생합니다. 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
shown.bs.modal | 이 이벤트는 모달이 사용자에게 보여졌을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 만약 클릭에 의한 것이라면, 클릭된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
hide.bs.modal | 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다. |
hidden.bs.modal | 이 이벤트는 모달이 가려지는게 끝났을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). |
loaded.bs.modal | 이 이벤트는 remote 옵션을 사용하는 콘텐츠를 가진 모달이 로드되었을때 발생됩니다. |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})