JS Popover (popover.js)
Popover 플러그인은 툴팁과 유사하다; 그것은 사용자가 요소를 클릭 할 때 나타나는 팝업 상자입니다. 차이가 있다는 popover 많은 콘텐츠를 포함 할 수있다.
플러그인 종속성 : Popovers 툴팁 플러그인이 필요합니다 (tooltip.js) 버전에 포함될 Bootstrap .
대한 자습서 Popovers , 우리의 읽기 Bootstrap Popover 자습서 .
통해 data-* 속성
data-toggle="popover" 활성화 popover .
title 특성의 헤더 텍스트 지정 popover .
data-content 속성은 내부에 표시해야 할 텍스트를 지정 popover's 몸을.
예
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
»그것을 자신을 시도 자바 스크립트를 통해
Popovers CSS 전용 플러그인되지 않으며, 따라서 jQuery를 사용하여 초기화해야 지정된 요소를 선택하고 전화 popover() 메소드를.
예
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
»그것을 자신을 시도 Popover 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우에 옵션 이름을 추가 data- 같이 data-placement="" .
| 이름 | 유형 | 태만 | 기술 | 시도 해봐 |
|---|---|---|---|---|
| animation | boolean | true | 열고 닫을 때 CSS 페이드 전환 효과를 추가할지 여부를 지정합니다 popover
| 시도 해봐 |
| container | string, or the boolean false | false | 추가 popover 특정 요소를. 예 : 컨테이너 : 'body' | 시도 해봐 |
| content | string | "" | 내부 텍스트 지정 popover's body | 시도 해봐 |
| delay | number, or object | 0 | 이 열고 닫을 데 걸리는 시간 (밀리 초)을 지정합니다 popover . 오브젝트 구조를 사용, 개방 지연 및 폐쇄에 대한 또 다른 하나를 지정하려면 : delay: {show: 500, hide: 100} - 오픈 500 밀리 초를 취할 것입니다 popover , 만 100 밀리 그것을 닫습니다 | 시도 해봐 |
| html | boolean | false | 에 HTML 태그를 허용할지 여부를 지정합니다 popover :
거짓 (기본값)로 설정하면, jQuery의 text() 방법이 사용됩니다. 당신이 XSS 공격에 대해 걱정하는 경우에 사용 | 시도 해봐 |
| placement | string | "right" | 지정 popover 위치를. 가능한 값 :
| 시도 해봐 |
| selector | string, or the boolean false | false | 추가 popover 지정된 셀렉터 | 시도 해봐 |
| template | string | 팝 오버를 만들 때 기본 HTML은 사용할 수 있습니다. popover's 제목은 .popover 제목에 주입한다. popover's 함량은 .popover 콘텐츠에 주입한다. .arrow 될 것입니다 popover's 화살표. 최 래퍼 요소가 있어야 .popover 클래스. | ||
| title | string | "" | 의 헤더 텍스트를 지정합니다 popover | 시도 해봐 |
| trigger | string | "click" | 방법을 지정합니다 popover 트리거됩니다. 가능한 값 :
| 시도 해봐 |
| viewport | string, or object | {selector: "body", padding: 0} | 유지 popover 이 요소의 경계 내에서합니다. 예 : viewport: '#viewport' 또는 {selector: '#viewport', padding: 0} |
Popover 방법
다음 표는 사용 가능한 모든 나열 popover 방법을.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .popover( options ) | 옵션과 팝 오버를 활성화합니다. 유효한 값은 위의 옵션을 참조하십시오 | 시도 해봐 |
| .popover("show") | 쇼 popover | 시도 해봐 |
| .popover("hide") | 수피 popover | 시도 해봐 |
| .popover("toggle") | 팝 오버를 전환 | 시도 해봐 |
| .popover("destroy") | 숨 깁니다과 팝 오버를 파괴 | 시도 해봐 |
Popover 이벤트
다음 표는 사용 가능한 모든 나열 popover 이벤트를.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.popover | 경우에 발생 popover 표시되기 전에, | 시도 해봐 |
| shown.bs.popover | 경우에 발생 popover 완전히 표시됩니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.popover | 경우에 발생 popover 숨겨진 되려고 | 시도 해봐 |
| hidden.bs.popover | 경우에 발생 popover 완전히 숨겨져 (CSS 전환을 완료 한 후) | 시도 해봐 |
예
사용자 지정 Popover 디자인
의 모양 사용자 정의 CSS를 사용하여 popover :
예
/* Popover */
.popover {
border: 2px dotted
red;
}
/* Popover Header */
.popover-title {
background-color:
#73AD21;
color: #FFFFFF;
font-size: 28px;
text-align:center;
}
/* Popover
Body */
.popover-content {
background-color: coral;
color: #FFFFFF;
padding: 25px;
}
/* Popover Arrow */
.arrow {
border-right-color: red !important;
} »그것을 자신을 시도