El complemento emergente Bootstrap proporciona una vista extendida. El complemento emergente genera contenido y etiquetas de acuerdo con los requisitos. Por defecto, las ventanas emergentes se colocan detrás de sus elementos de activación.
Un Popover es similar a una información sobre herramientas, que proporciona una vista extendida. Para activar el cuadro emergente, el usuario solo necesita pasar el elemento. El contenido del cuadro emergente se puede poblar por completo utilizando la API de datos de Bootstrap (API de datos Bootstrap). Este método se basa en información sobre herramientas.
Si desea hacer referencia a la funcionalidad del complemento por separado, debe hacer referencia a Popover.js, que se basa en el complemento ToolTip. O, como se menciona en el capítulo de descripción general del complemento Bootstrap, puede consultar bootstrap.js o versiones comprimidas de bootstrap.min.js.
1. Uso
El complemento Popover genera contenido y etiquetas basadas en necesidades. Por defecto, los popoveres se colocan detrás de sus elementos de activación. Puede agregar popovers de dos maneras:
Pase la propiedad de datos: para agregar un popover, simplemente agregue datos de datos = "Popover" a una etiqueta de anclaje/botón. El título del ancla es el texto del Popover. Por defecto, el complemento establece el Popover en la parte superior.
<a href = "#" data-toggle = "Popover"> Por favor, pasee por mi </a>
A través de JavaScript: Habilitar Popover a través de JavaScript:
$ ('#identificador'). Popover (Opciones)
El complemento Popover no es como los menús desplegables y otros complementos discutidos anteriormente, no es un complemento CSS puro. Para usar el complemento, debe activarlo usando jQuery (leer JavaScript). Use el siguiente script para habilitar todos los poblados en la página:
$ (function () {$ ("[data-toggle = 'popover']"). popover ();});
2. Ejemplos
Un cuadro emergente es hacer clic en un elemento para aparecer un contenedor que contiene el título y el contenido.
// Uso básico <botón type = "botón" data-toggle = "Popover" data-Content = "Este es un complemento de cuadro emergente"> Haga clic para aparecer/ocultar el cuadro emergente </botón> // javascript Initialize $ ('Button'). Popover ();El complemento emergente tiene muchas propiedades para configurar la visualización de indicaciones, como sigue:
$ ('Button'). Popover ({Container: 'Body', Viewport: {Selector: '#View', Padding: 10,}});Hay cuatro métodos para ejecutar a través de JavaScript.
// show $ ('button'). Popover ('show'); // esconder $ ('botón'). Popover ('escondite'); // invertir y esconder $ ('botón'). Popover ('toggle'); // escondite $ ('botón'). Popover ('destruir');Hay cuatro tipos de eventos en el complemento Popover:
// eventos, otros similares a $ ('botón'). On ('show.bs.tab', function () {alerta ('gratis al llamar al método del programa!');});Lo anterior se trata de este artículo. Espero que sea útil para todos aprender el complemento emergente Bootstrap.