English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Corso di base Bootstrap

Estensioni Bootstrap

L'estensione Popover(Popover) Bootstrap

L'estensione Popover(Popover) è simile al Tooltip(Tooltip) e offre una vista estesa. Per attivare la finestra弹出框(popover), l'utente deve semplicemente posizionare il mouse sull'elemento. I contenuti della finestra弹出框(popover) possono essere completamente riempiti utilizzando l'API dati Bootstrap (Bootstrap Data API). Questo metodo dipende dal Tooltip(tooltip).

Se desideri utilizzare funzionalità specifiche dell'estensione, è necessario includere popover.jsdipende da l'estensione Tooltip(Tooltip). Oppure, come Panoramica delle estensioni Bootstrap come menzionato in un capitolo, puoi fare riferimento a bootstrap.js o la versione compressa bootstrap.min.js.

Uso

L'estensione Popover(Popover) genera contenuti e markup in base alle esigenze, per impostazione predefinita posiziona la finestra弹出框(popover) dietro l'elemento di attivazione. Puoi aggiungere la finestra弹出框(popover) nei seguenti due modi:

  • attraverso l'attributo data：Se si desidera aggiungere una finestra弹出框(popover)，è sufficiente aggiungere a un tag di ancora/pulsante data-toggle="popover" Il testo del title dell'ancora è il testo della finestra弹出框(popover).Per impostazione predefinita, il plugin posiziona la finestra弹出框(popover) in alto.

    <a href="#" data-toggle="popover" title="Esempio popover">
　　　　Per favore, mantieni il mouse sopra di me
</a>

  • Abilitare tramite JavaScript:Abilitare il Popover (Popup) tramite JavaScript:

    $('#identifier').popover(options)

Il plugin Popover (Popup) non è come i menu a discesa e altri plugin discussi in precedenza, non è un plugin puramente CSS. Per utilizzare questo plugin, è necessario attivarlo con jQuery (leggere JavaScript). Utilizzare lo script seguente per abilitare tutti i Popover (Popup) nella pagina:

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

Esempio online

Esempio di utilizzo del plugin Popover (Popup) attraverso l'uso delle proprietà data.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin Popover (Popup)</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="Titolo del Popover"　　
			data-container="body" data-toggle="popover" data-placement="left"　
			data-content="Alcuni contenuti del Popover sinistro">
		Il Popover laterale
	</button>
	<button type="button" class="btn btn-primary" title="Titolo del Popover"　　
			data-container="body" data-toggle="popover" data-placement="top"　
			data-content="Alcuni contenuti del Popover superiore">
		Popover superiore
	</button>
	<button type="button" class="btn btn-success" title="Titolo del Popover"　　
			data-container="body" data-toggle="popover" data-placement="bottom"　
			data-content="Alcuni contenuti del Popover inferiore">
		Popover in basso
	</button>
	<button type="button" class="btn btn-warning" title="Titolo del Popover"　　
			data-container="body" data-toggle="popover" data-placement="right"　
			data-content="alcuni contenuti della Popover di destra">
		Popover a destra
	</button>
</div>
<script>
$(function () {　
	$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Opzioni

Alcune opzioni sono state aggiunte tramite l'API dei dati Bootstrap (Bootstrap Data API) o chiamate tramite JavaScript. La tabella elenca queste opzioni:

Nome dell'opzioneTipo/Valore predefinitoNome dell'attributo datiDescrizione
animationboolean
Valore predefinito: true		data-animationApplica l'effetto di transizione di sfumatura CSS alla finestra emergente.
htmlboolean
Valore predefinito: false		data-htmlInserisci HTML nella finestra emergente. Se è false, il metodo jQuery text viene utilizzato per inserire il contenuto nel dom. Se preoccupato per gli attacchi XSS, utilizzare text.
placementstring|function
Valore predefinito: top		data-placementSpecifica come posizionare la finestra emergente (cioè top|bottom|left|right|auto).
Quando specificato auto verrà dinamicamente adattato alla finestra emergente. Ad esempio, se placement è "auto left", la finestra emergente verrà visualizzata il più a sinistra possibile, e solo se non è possibile, a destra.
selectorstring
Valore predefinito: false		data-selectorSe viene fornito un selettore, l'oggetto della finestra emergente viene delegato al target specificato.
titlestring | function
Valore predefinito: ''		data-titleSe non specificato title Se l'attributo è definito, il valore predefinito dell'opzione title è il valore title predefinito.
triggerstring
Valore predefinito: 'hover focus'		data-triggerDefinisci come attivare la finestra emergente: click| hover | focus | manual. Puoi passare più trigger, separati da spazi.
delaynumber | object
Valore predefinito: 0		data-delayIl numero di millisecondi di ritardo per la visualizzazione e l'oscuramento della finestra emergente - non si applica al tipo di attivazione manuale. Se viene fornito un numero, il ritardo verrà applicato alla visualizzazione e all'oscuramento. Se viene fornito un oggetto, la struttura è come segue:
delay:
{ show: 500, hide: 100 }
containerstringa | false
Valore predefinito: false		data-containerAggiunge il Popover all'elemento specificato.
Esempio: container: 'body'

Metodi

Di seguito sono elencati alcuni metodi utili del plugin Popover:

MetodiDescrizioneEsempio
Opzioni: .popover(options)Aggiunge un gestore Popover alla raccolta di elementi.
$().popover(options)
Toggle: .popover('toggle')commuta la visualizzazione/nascondimento del Popover dell'elemento.
$('#element').popover('toggle')
Show: .popover('show')Mostra il Popover dell'elemento.
$('#element').popover('show')
Hide: .popover('hide')Nasconde il Popover dell'elemento.
$('#element').popover('hide')
Destroy: .popover('destroy')Nasconde e distrugge il Popover dell'elemento.
$('#element').popover('destroy')

Esempio online

Di seguito è riportato un esempio di come utilizzare i metodi del plugin Popover:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Metodi del plugin 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="Titolo del Popover" data-container="body"　
			data-toggle="popover" data-placement="left"　
			data-content="alcuni contenuti del Popover laterale - metodo show">
		Il Popover laterale
	</button>
	<button type="button" class="btn btn-primary popover-hide"　
			title="Titolo del Popover" data-container="body"　
			data-toggle="popover" data-placement="top"　
			data-content="Contenuto del Popover superiore - metodo hide"
		Popover superiore
	</button>
	<button type="button" class="btn btn-success popover-destroy"　
			title="Titolo del Popover" data-container="body"　
			data-toggle="popover" data-placement="bottom"　
			data-content="Alcuni contenuti del Popover in basso — metodo destroy">
		Popover in basso
	</button>
	<button type="button" class="btn btn-warning popover-toggle"　
			title="Titolo del Popover" data-container="body"　
			data-toggle="popover" data-placement="right"　
			data-content="Alcuni contenuti del Popover a destra — metodo toggle">
		Popover a destra
	</button><br><br><br><br><br><br>
	<p class="popover-options">
		<a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>"　　
		　　　data-container="body" data-toggle="popover" data-content="
																	　<h4>Alcuni contenuti di Popover — metodo 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>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Evento

La tabella sottostante elenca gli eventi utilizzati dall'estensione Popover. Questi eventi possono essere utilizzati come hook nelle funzioni.

EventoDescrizioneEsempio
show.bs.popoverQuesto evento viene scatenato immediatamente quando viene chiamato il metodo show dell'esempio.
$('#mypopover').on('show.bs.popover', function () {
　　// Eseguire alcune azioni...
}
shown.bs.popoverQuando la finestra pop-up è visibile all'utente viene scatenato questo evento (l'effetto di transizione CSS verrà aspettato).
$('#mypopover').on('shown.bs.popover', function () {
　　// Eseguire alcune azioni...
}
hide.bs.popoverQuesto evento viene attivato immediatamente quando viene chiamato il metodo hide.
$('#mypopover').on('hide.bs.popover', function () {
　　// Eseguire alcune azioni...
}
hidden.bs.popoverQuesto evento viene attivato quando il Popover viene nascosto all'utente (attendere l'effetto di transizione CSS).
$('#mypopover').on('hidden.bs.popover', function () {
　　// Eseguire alcune azioni...
}

Esempio online

Il seguente esempio dimostra gli eventi del plugin Popover (Popover):

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Plugin Popover (Popover) Eventi</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 popover-show"　
			title="Titolo del Popover" data-container="body"　
			data-toggle="popover"　
			data-content="alcuni contenuti del Popover laterale - metodo show">
		Il Popover laterale
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$((function () { $('.popover-show').on('shown.bs.popover', function () {}}))
		alert("Messaggio di avviso quando visualizzato");
	})});
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Casella di Avviso BootstrapPlugin di Strumenti di Suggerimento Bootstrap