-
Notifications
You must be signed in to change notification settings - Fork 5
Popover
팝오버는 사용자가 일련의 옵션에서 선택할 수 있습니다 슬라이드 대화창 입니다.
backdrop 을 탭핑하가나, 테스트탑 테스트에서 키보드 ESC키를 클릭하여 취소할 수 있습니다.
- 스크립트 위치 : rc-component.js > Popover.js
- [기본 사용법(Usage)](#기본 사용법(Usage))
- 옵션(Options)
- 메소드(Methods)
- 이벤트(Events)
- 응용방법
팝오버는 요구에 따라 data 속성이나 자바스크립트를 통해 숨겨진 콘텐츠를 토글 합니다.
자바 스크립트 없이 시트를 활성화합니다. 버튼같은 태그에 data-toggle="Popover" 을 추가하고, data-target="#foo" 나 href="#foo" 와 같이 토글할 특정한 시트를 정해주면 됩니다
<button type="button" data-toggle="Popover" data-target="#myPopover">
Launch Popover
</button>
한 줄의 자바스크립트로 myPopover의 id 를 가진 시트를 불러옵니다.
$('#myPopover').popover(options)
data 속성이나 javaScript를 통해 타켓에 원하는 옵션을 전달할 수 있습니다.
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
| show | boolean | true | 시트를 호출하는 역할을 합니다. 기본값이 true 이기 때문에 호출시 설정하지 않아도 됩니다. |
| title | string | null | 시트와 브라우저의 타이틀로 사용됩니다. |
| history | boolean | true |
window.history 객체에 기록되어 스마트폰의 back 버튼을 사용해서 시트를 닫을 수 있게 해줍니다. |
| url | string | null | URL을 변경할 수 있습니다. history 옵션이 true 인 경우에만 적용됩니다 |
| template | string | null | 시트를 호출한 후에 외부의 파일을 load 해야 할 경우 사용하면 됩니다. |
| backdrop | boolean or the string | true | 배경을 포함합니다. 시트를 닫지 않는 배경이 필요할 경우 static 를 명시하세요. |
- 용도 : 시트의 타이틀과 브라우저의 타이틀을 동적으로 변경할 수 있습니다.
- 유형 : string
- 기본값 : null
- 적용방법 :
data-title="값"으로 값을 전달하고 출력을 원하는 엘리먼트에data-role=”title”로 받아서 출력합니다.
<button data-toggle=”popover” data-title=”값”>
$(‘#foo’).popover({
title :'값'
});
- 용도 : 시트호출 시
window.history객체에 기록되어 스마트폰의 back 버튼을 사용해서 시트를 닫을 수 있게 해줍니다. - 유형 : boolean
- 기본값 : ture
히스토리를 기록하지 않는 방법은 아래와 같이 2가지 방법이 있습니다. 시트 호출 시에 히스토리를 기록하지 않은 경우, 닫기 버튼에 data-dismiss="popover"를 적용해 주세요.
<button data-toggle=”popover” data-history=”false”>
$(‘#foo’).popover({
history :'false'
});
- 용도 : 시트 호출시 URL을 지정 또는 변경할 수 있습니다.
- 유형 : string
- 기본값 : null
- 유의사항 : 값이 없는 경우 '#'(기본값) 이 적용되며 history 옵션이
true인 경우만 작동됩니다.
<button data-toggle=”popover” data-url=”값”>
$(‘#foo’).popover({
url :”값”
});
- 용도 : 시트 본문에 원격으로 파일을 load 할 경우 사용합니다.
- 유형 : string
- 기본값 : null
<button data-toggle=”popover” data-template=”파일경로”>
$(‘#foo’).popover({
template :'파일경로'
});
- 용도 : 시트 호출시 배경을 제어합니다. 시트를 닫지 않는 배경을 위해
static를 명시하세요. - 유형 : boolean 또는 string ( true | false | static )
- 기본값 : true
<button data-toggle=”popover” data-backdrop=”false”>
$(‘#foo’).popover({
backdrop :'false'
});
시트를 활성화 합니다. object 를 이용해서 옵션을 넣을 수도 있습니다.
$('#myPopover').popover({
backdrop : false
})
수동적으로 시트를 토글합니다. 시트가 실제로 보여지거나 숨겨지기 전에 호출자에게 리턴합니다. (말하자면 shown.rc.popover 나 hidden.rc.popover 이벤트가 발생하기 전에)
$('#myPopover').popover('toggle')
수동적으로 시트를 엽니다. 시트가 실제로 보여지기 전에 호출자에게 리턴합니다. (말하자면 shown.rc.popover 이벤트가 발생하기 전에)
$('#myPopover').popover('show')
수동적으로 시트를 닫습니다. 시트가 실제로 닫히기 전에 호출자에게 리턴합니다. (말하자면 hidden.rc.popover 이벤트가 발생하기 전에)
$('#myPopover').popover('hide')
| 이벤트 타입 | 설명 |
|---|---|
| show.rc.popover | 이 이벤트는 show 인스턴스 메소드가 호출되는 즉시 발생합니다. 만약 터치에 의한 것이라면, 터치된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
| shown.rc.popover | 이 이벤트는 시트가 사용자에게 보여졌을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). 만약 터치에 의한 것이라면, 터치된 요소는 이벤트의 relatedTarget 속성으로 가능합니다. |
| hide.rc.popover | 이 이벤트는 hide 인스턴스 메소드가 호출되는 즉시 실행됩니다. |
| hidden.rc.popover | 이 이벤트는 시트가 가려지는게 끝났을 때 실행됩니다 (CSS 전환이 완료되기를 기다릴 것입니다). |
| loaded.rc.popover | data-template 값으로 정해진 원격 마크업이 load 된 후 실행되는 이벤트 |
HTML5 가 시멘틱을 정의하는 방법에 따르면, autofocus HTML 속성은 RC 팝업에는 효과가 없습니다.
거의 같은 시트를 작동시키는 몇개의 버튼을 가지고 싶으세요? 버튼이 터치 됨에 따라 달라지는 내용을 위해서 event.relatedTarget 와 HTML data-* 속성을 사용하세요. relatedTarget 에 자세한 것은 팝업 이벤트 문서를 보세요.
시트호출을 탭(tap) 아닌 더블탭(double tap)이나 프레스(press)로 변경할 수 있습니다.