Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 팝업 팝오버(Popover) 플러그인

팝업 팝오버(Popover)는 툴팁(Tooltip)과 유사하며, 확장된 뷰를 제공합니다. 팝업을 활성화하려면 사용자가 요소에 마우스를 올려놓으면 됩니다. 팝업의 내용은 Bootstrap 데이터 API(Bootstrap Data API)를 사용하여 채울 수 있습니다. 이 방법은 툴팁(tooltip)에 의존합니다.

이 플러그인의 기능을 단독으로 참조하고 싶다면, 다음을 참조해야 합니다： popover.js그것은 툴팁(Tooltip) 플러그인또는, 정확히는 Bootstrap 플러그인 개요 챕터에서 언급된 것처럼, 다음을 참조할 수 있습니다： bootstrap.js 또는 압축된 버전의 bootstrap.min.js。

사용법

팝업 팝오버(Popover) 플러그인은 요구 사항에 따라 내용과 태그를 생성하며, 기본적으로 팝오버(popover)를 트리거 요소 뒤에 배치합니다. 팝오버(popover)를 추가할 수 있는 두 가지 방법이 있습니다：

data 속성을 통해팝업(popover)를 추가하려면 단순히 하나의 앵커에/버튼 태그 추가 data-toggle="popover" 그럼 됩니다. 앵커의 title은 팝업(popover)의 텍스트입니다. 기본적으로, 플러그인은 팝업(popover)를 상단에 설정합니다.
```
<a　href="#"　data-toggle="popover"　title="Example　popover">
　　　　위에 마우스를 올려주세요
</a>
```
JavaScript를 통해:JavaScript를 통해 팝업 상자(popover) 활성화:
```
$('#identifier').popover(options)
```

팝업 상자(Popover) 플러그인은 이전에 논의된 드롭다운 메뉴 및 다른 플러그인과 달리,纯粹한 CSS 플러그인이 아닙니다. 이 플러그인을 사용하려면 jquery를 사용하여 활성화해야 합니다(JavaScript를 읽습니다). 페이지에서 모든 팝업 상자(popover)를 활성화하려면 다음 스크립트를 사용합니다:

$(function　()　{　$("[data-$('[data-toggle="popover"]').popover();　});

온라인 예제

다음 예제는 data 속성을 사용하여 팝업 상자(Popover) 플러그인의 사용법을 보여줍니다.

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　팝업 상자(Popover) 플러그인</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:　100px　50px　10px;" >
	<button type="button" class="btn btn-default"　title="Popover　title"　　
			data-container="body" data-toggle="popover" data-placement="left"　
			data-content="좌측의 Popover에 포함된 일부 내용">
		좌측의 팝오버
	</button>
	<button type="button" class="btn btn-primary"　title="Popover　title"　　
			data-container="body" data-toggle="popover" data-placement="top"　
			data-content="상단의 Popover에 포함된 일부 내용">
		상단의 Popover
	</button>
	<button type="button" class="btn btn-success"　title="Popover　title"　　
			data-container="body" data-toggle="popover" data-placement="bottom"　
			data-content="하단의 Popover에 포함된 일부 내용">
		하단의 Popover
	</button>
	<button type="button" class="btn btn-warning"　title="Popover　title"　　
			data-container="body" data-toggle="popover" data-placement="right"　
			data-content="좌측의 Popover에 포함된 일부 내용">
		오른쪽의 Popover
	</button>
</div>
<script>
$(function　()　{　
	$('[data-$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>

테스트 보기 ‹/›

결과는 다음과 같습니다:

옵션

某些选项是通过 Bootstrap 데이터 API(Bootstrap Data API) 추가되거나 JavaScript를 통해 호출됩니다. 다음 표는 이러한 옵션을 나열합니다:

옵션 이름	타입/기본 값	Data 속성 이름	설명
animation	boolean 기본 값: true	data-animation	CSS 투명도 전환 효과를 팝업 상자에 적용합니다.
html	boolean 기본값: false	data-html	팝업에 HTML을 삽입합니다. false라면 jQuery의 text 메서드가 DOM에 내용을 삽입하는 데 사용됩니다. XSS 공격에 대한 우려가 있으면 text를 사용하십시오。
placement	string\|function 기본값: top	data-placement	팝업을 정위치하는 방법을 지정합니다(즉, top\|bottom\|left\|right\|auto)。 지정되면 auto 의 경우, 팝업을 동적으로 조정합니다. 예를 들어, placement이 "auto left"로 지정되면 팝업은 가능한 한 왼쪽에 표시되고, 상황이 허용되지 않을 경우 오른쪽에 표시됩니다。
selector	string 기본값: false	data-selector	선택자를 제공하면 팝업 객체가 지정된 목표에 위임됩니다。
title	string \| function 기본값: ''	data-title	지정되지 않으면 title 프로퍼티가 지정되면 title 옵션은 기본 title 값이 됩니다。
trigger	string 기본값: 'hover focus'	data-trigger	팝업을 트리거하는 방법을 정의합니다： click\| hover \| focus \| manual여러 트리거를 전달할 수 있으며, 각 트리거는 공백으로 구분됩니다。
delay	number \| object 기본값: 0	data-delay	팝업 표시 및 숨기 지연 밀리초 - manual 자동 트리거 유형에 적용되지 않습니다. 숫자를 제공하면 표시 및 숨기에 대한 지연이 적용됩니다. 객체를 제공하면 다음과 같은 구조를 가집니다： delay: {　show:　500,　hide:　100　}
container	string \| false 기본값: false	data-container	지정된 요소에 팝업을 추가합니다。 예제: container: 'body'

메서드

아래는 팝업(Popover) 플러그인에서 유용한 메서드들입니다：

메서드	설명	예제
옵션: .popover(options)	요소 집합에 팝업 핸들러를 추가합니다。	$().popover(options)
Toggle: .popover('toggle')	표시/숨기 전환/요소의 팝업을 숨기십시오。	$('#element').popover('toggle')
Show: .popover('show')	요소의 팝업을 표시하십시오。	$('#element').popover('show')
Hide: .popover('hide')	요소의 팝업을 숨기십시오。	$('#element').popover('hide')
Destroy: .popover('destroy')	요소의 팝업을 숨기고 파괴합니다.	$('#element').popover('destroy')

온라인 예제

다음 예제는 팝업(Popover) 플러그인 메서드를 보여줍니다:

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　팝업(Popover) 플러그인 메서드/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding:　100px　50px　10px;" >
	<button type="button" class="btn btn-default Popover-show"　
			title="팝오버 제목" data-container="body"　
			data-toggle="popover" data-placement="left"　
			data-content="좌측의 팝오버에 대한 내용 - show 메서드">
		좌측의 팝오버
	</button>
	<button type="button" class="btn btn-primary 팝오버-hide"　
			title="팝오버 제목" data-container="body"　
			data-toggle="popover" data-placement="top"　
			data-content="상단의 Popover에 대한 몇 가지 내용 - hide 메서드">
		상단의 Popover
	</button>
	<button type="button" class="btn btn-success Popover-destroy"　
			title="팝오버 제목" data-container="body"　
			data-toggle="popover" data-placement="bottom"　
			data-content="하단의 Popover에 대한 몇 가지 내용 - destroy 메서드">
		하단의 Popover
	</button>
	<button type="button" class="btn btn-warning Popover-toggle"　
			title="팝오버 제목" data-container="body"　
			data-toggle="popover" data-placement="right"　
			data-content="오른쪽의 Popover에 대한 몇 가지 내용 - toggle 메서드">
		오른쪽의 Popover
	</button><br><br><br><br><br><br>
	<p class="popover-options">
		<a href="#" type="button" class="btn btn-warning" title="<h2>제목</h2>"　　
		　　　data-container="body" data-toggle="popover" data-content="
																	　<h4>Popover에 대한 몇 가지 내용 - options 메서드</h4>">
			Popover
		</a>
	</p>
	<script>
		$('function () { $('.popover-show').popover('show');});}}
		$('function () { $('.popover-hide').popover('hide');});
		$('function () { $('.popover-destroy').popover('destroy');});
		$('function () { $('.popover-toggle').popover('toggle');});
		$(function () { $(".popover-options a").popover({html : true　});});
	</script>
</div>
</body>
</html>

테스트 보기 ‹/›

결과는 다음과 같습니다:

이벤트

다음 표는 팝업(Popover) 플러그인에서 사용할 이벤트를 나열합니다. 이 이벤트는 함수에서 히스토리로 사용할 수 있습니다.

이벤트	설명	예제
show.bs.popover	show 메서드를 호출할 때 즉시 이 이벤트가 발생합니다。	$('#mypopover').on('show.bs.popover', function () { 　　//　일부 작업을 수행합니다... )
shown.bs.popover	팝업이 사용자에게 보이면 이 이벤트가 발생합니다 (CSS 트랜지션 효과가 완료될 때까지 기다립니다).	$('#mypopover').on('shown.bs.popover', function () { 　　//　일부 작업을 수행합니다... )
hide.bs.popover	hide 메서드를 호출할 때 즉시 이 이벤트가 발생합니다.	$('#mypopover').on('hide.bs.popover', function () { 　　//　일부 작업을 수행합니다... )
hidden.bs.popover	팝업 툴팁이 사용자에게 숨겨지면 이 이벤트가 발생합니다 (CSS 트랜지션 효과가 완료될 때까지 기다립니다).	$('#mypopover').on('hidden.bs.popover', function () { 　　//　일부 작업을 수행합니다... )

온라인 예제

아래의 예제는 팝오버(Popover) 플러그인 이벤트를 보여줍니다：

온라인 예제

예제

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap 예제　-　팝오버(Popover) 플러그인 이벤트</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div clas="container" style="padding:　100px　50px　10px;" >
	<button type="button" class="btn btn-primary 팝오버-show"　
			title="팝오버 제목" data-container="body"　
			data-toggle="popover"　
			data-content="좌측의 팝오버에 대한 내용 - show 메서드">
		좌측의 팝오버
	</button>
</div>
<script>
	$('function () { $('.popover-show').popover('show');});}}
	$('function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("표시될 때 경고 메시지");
	})});
</script>
</body>
</html>

테스트 보기 ‹/›

결과는 다음과 같습니다:

Bootstrap 경고 팝업 Bootstrap 튜토리얼 도구 플러그인