Latest web development tutorials

Bootstrap cuadro emergente de widgets (Popover)

cuadro emergente (Popover) información sobre herramientas (información sobre herramientas) Del mismo modo, se proporciona una vista ampliada. Para activar el cuadro emergente, los usuarios simplemente se ciernen sobre el elemento puede ser. El contenido de la ventana emergente se puede llenar completamente el uso de la API de datos de rutina de carga (Bootstrap API de datos). El método se basa en la información sobre herramientas (información sobre herramientas).

Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia apopover.js, que depende del tapón (Tooltip) punta de la herramienta .O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.

uso

cuadro emergente (Popover) plug-generada contenido y las etiquetas en la demanda, es el cuadro emergente predeterminado (popover) detrás de sus elementos activos. Hay dos formas de agregar un cuadro emergente (popover):

  • A través de los datos de atributos: Para agregar un cuadro emergente (popover), justo complemento de palanca de datos = "popover"ser un ancla de etiquetas de botón /. El título es el cuadro de texto emergente de anclaje (popover). Por defecto, el cuadro emergente de plug-in (popover) se fija en la parte superior.
    <a href="#" data-toggle="popover" title="Example popover">
    	Por favor, coloque por encima de mí </a>
    
  • Por JavaScript: Habilitar cuadro emergente (popover) a través de JavaScript:
    $ ( '# Identificador'). Popover (opciones)
    

cuadro emergente (Popover) enchufe a diferencia de los anteriores menús desplegables y otros plug-ins discutidos anteriormente, no es un plugin CSS puro. Para utilizar este plugin, debe activarlo usando jQuery (leer javascript). Utilice la siguiente secuencia de comandos para permitir a todas las páginas cuadro de pop-up (popover):

$ (Function () {$ ( "[Datos de palanca = 'popover']") popover ();.});

Ejemplos

El siguiente ejemplo muestra el uso del cuadro emergente de widgets (Popover) por los datos de atributo de uso.

Ejemplos

<Div class = "contenedor" style = "padding: 50px 100px 10px ;" > <Botón type = "button" class = "btn btn-default" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "left" datos-content = "Popover queda de algunos de los contenidos"> Popover izquierda del botón </> <Botón type = "button" class = "btn btn-primaria" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "top" datos-content = "Popover en la parte superior de algunos de los contenidos"> top Popover </ botón> <Botón type = "button" class = "btn btn-éxito" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "inferior" datos-content = "Popover en la parte inferior de algunos de los contenidos"> Popover inferior </ botón> <Botón type = "button" class = "btn btn de alerta" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "right" datos-content = "Popover derecha de la parte del contenido"> Popover lado derecho </ botón> </ Div> <Script>
$ (Function () {$ ( "[. Datos de palanca = 'popover']") popover ();});
</ Script> </ Div>

Trate »

Los resultados son los siguientes:

cuadro de pop-up de widgets (Popover)

opciones

Hay algunas opciones a través del API de datos de rutina de carga (Bootstrap API de datos) o mediante la adición de llamada de JavaScript. En la siguiente tabla se muestran las siguientes opciones:

选项名称类型/默认值Data 属性名称描述
animationboolean
默认值:true
data-animation向弹出框应用 CSS 褪色过渡效果。
htmlboolean
默认值:false
data-html向弹出框插入 HTML。如果为 false,jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击,请使用 text。
placementstring|function
默认值:top
data-placement规定如何定位弹出框(即 top|bottom|left|right|auto)。
当指定为auto时,会动态调整弹出框。例如,如果 placement 是 "auto left",弹出框将会尽可能显示在左边,在情况不允许的情况下它才会显示在右边。
selectorstring
默认值:false
data-selector如果提供了一个选择器,弹出框对象将被委派到指定的目标。
titlestring | function
默认值:''
data-title如果未指定title属性,则 title 选项是默认的 title 值。
triggerstring
默认值:'hover focus'
data-trigger定义如何触发弹出框: click| hover | focus | manual。您可以传递多个触发器,每个触发器之间用空格分隔。
delaynumber | object
默认值:0
data-delay延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字,那么延迟将会应用于显示和隐藏。如果提供的是对象,结构如下所示:
delay:
{ show: 500, hide: 100 }
containerstring | false
默认值:false
data-container向指定元素追加弹出框。
实例: container: 'body'

camino

Estas son algunas de la caja emergente (Popover) plug-in de maneras útiles:

方法描述实例
Options:.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')

Ejemplos

El siguiente ejemplo demuestra el cuadro emergente (Popover) enfoque de plug-in:

Ejemplos

<Div class = "contenedor" style = "padding: 50px 100px 10px ;" > <Botón type = "button" class = "btn btn-default popover -show" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "left" datos-content = - Popover "algún contenido Popover izquierdo de la demostración del método de"> en el lado izquierdo </ botón> <Botón type = "button" class = "btn btn-primaria popover -hide" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "top" datos-content = "algunos elementos en la parte superior Popover - Método ocultar"> top Popover </ botón> <Botón type = "button" class = "btn btn-éxito popover -destroy" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "inferior" datos-content = "algún contenido Popover la parte inferior del - método destroy"> Popover parte inferior botón </> <Botón type = "button" class = "btn btn-advertencia popover -toggle" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" técnica de colocación = "right" datos-content = "algún derecho Popover contenido del - método de palanca"> Popover lado derecho </ botón> <br> < br> <br> <P class = "popover-options"> <A href = "#" type = "button" class = "btn btn de alerta" title = "<h2> Título < / h2>" datos de contenedor = "cuerpo" datos de palanca = "popover" datos-content = "<h4> Popover algunos de los contenidos - Opciones de método </ h4>"> Popover < / a> </ P> <Script>
$ (Function () {$ ( '.popover-Show' ) popover ( 'show') ;.}); $ (function () {$ ( '.popover-Hide. ') Popover ( 'ocultar');}); $ (function () {$ ( '.popover-Destruye' ) popover ( 'destruir') ;.}); $ (function () {$ ( '.popover-Alternar' ) popover ( 'alternar') ;.}); $ (function () . {$ ( ".popover-Options a") popover ({html: true });});
</ Script> </ Div>

Trate »

Los resultados son los siguientes:

cuadro de pop-up (Popover) Método de plug-in

evento

La siguiente tabla muestra el cuadro emergente (Popover) plug-in para ser utilizado en el evento. Estos eventos se pueden utilizar cuando la función de enlace.

事件描述实例
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 () {
  // 执行一些动作...
})

Ejemplos

El siguiente ejemplo muestra los sucesos de widget cuadro emergente (Popover):

Ejemplos

<Div clas = "contenedor" style = "padding: 50px 100px 10px ;" > <Botón type = "button" class = "btn btn-primaria popover -show" title = "del título Popover" datos de contenedor = "cuerpo" datos de palanca = "popover" datos-content = - Popover "algún contenido Popover izquierdo de la demostración del método de"> en el lado izquierdo </ botón> </ Div> <Script>
$ (Function () {$ ( '.popover-Show' ) popover ( 'show') ;.}); $ (function () {$ ( '.popover-Show' ). En ( 'shown.bs.popover', function () { alert ( "Advertencia Cuando el mensaje");}) });
</ Script> </ Div>

Trate »

Los resultados son los siguientes:

cuadro de pop-up (Popover) Plug-in de eventos