Este artigo aprende principalmente a caixa de plug-up javascript.
Caso
Adicione uma pequena sobreposição ao conteúdo da página, assim como os efeitos no iPad, adicionando informações extras aos elementos da página.
Vamos dar uma olhada em algumas renderizações simples de casos estáticos
O efeito é relativamente simples, principalmente a pequena forma que aparece estaticamente, dividida no título do formulário e no conteúdo do formulário.
<div> <div> <div> </div> <h3> Popover top </h3> <div> <p> sed posuere consecteter est em lobortis. AENEANO UE LEO QUAM. Peldelesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Pentelezesque ornare sem lacinia quam venenatis. AENEANO UE LEO QUAM. Peldelesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Pentelesesque ornare sem lacinia quam venenatis vestibulum. AENEANO UE LEO QUAM. Peldelesque ornare sem lacinia quam venenatis. AENEANO UE LEO QUAM. Pentelesesque ornare sem lacinia quam venenatis vestibulum. </p> </div> </div> <div> </div>
Mas ainda precisamos definir um layout básico simples para os elementos
<estilo tipo = "text/css">. exibição: bloco; flutuar: esquerda; Largura: 240px; Margem: 20px;} </style>
Demonstração dinâmica
Vamos dar uma olhada nas renderizações primeiro
Um botão aparecerá quando você clicar no botão.
Na verdade, é muito simples ler o código.
[Code] <a id = "a2" data-posting = "Right" Data-content = "isto é, para expressar desprezo por vários comportamentos e idéias chocantes que têm características de atributo, como curta, gorda, pobre, feia, feia, estúpida e sling" Silk "Silk" Sling Silk ") pode ser dito para ter evoluído" Sling "Dead" Dead, Sling Silk ") pode ser dito para ter evoluído" Sling "Dead" Dead, Sling Silk ") pode ser dito para ter evoluído" Sling "Dead," Sling Silk "). Refere-se principalmente à maioria deles de famílias pobres, como muitas residências urbanas, sem mais origens, muitas escolas de ensino médio suspensas, foram à cidade para trabalhar ou se tornaram garçons de restaurantes, ou administradores de internet, e que costumavam ter um copo de sopa amarga na riqueza da cidade; href = "#" Data-original-title = "Significado Significado original"> Clique para alternar o popover </a> [Código]
É apenas uma etiqueta, mas fornece a classe de estilo do botão e depois fornece vários atributos, que são usados principalmente para exibir a caixa pop-up:
O primeiro: título de origem de dados-título-título
O segundo: Content-Content-Content
Terceiro: posição de colocação de dados (para cima, inferior, esquerda, direita)
Mas agora, se você executá-lo, o botão o possui e a caixa pop-up quando você clicar no botão não aparecerá. Acabou sendo muito simples, ou seja, ainda não inicializamos, assim como a dica de ferramenta na seção anterior.
Basta adicionar código JavaScript simples.
<script type = "text/javascript"> $ ("#a1"). Popover (); </script>Quatro direções
<div style = "margin-left: 200px; margin-top: 100px; margem-bottom: 200px;"> <div> <button type = "button" data-container = "body" data-toggle = "popover" data-postum = "esquerda" data-content = "vivamus sagittis lacus lacus lacus bulueet laoreets rutum = esquerdo" data-content = "vivamus sagittis lacus lacus lacus" augueet lioreets rutum = "esquerda" data-content = "vivamus sagittis lacus lacus lacus" augueet lioreets rutum = "esquerda" data-content = "vivamus sagittis lacus lacus lacus" augueet lomaretum = "esquerda" countent = "vivamus sagittis lacus lacus bulueet lioreet rutumrums type = "Button" Data-container = "Body" Data-Toggle = "Popover" Data-posting = "Top" Data-content = "Vivamus sagittis lacus velugue laoreet rutrum faucboBus"> a caixa pop-up superior "POPOVER" </botão <butão = "Data-PontaiR =" corpo "Data-toggle =" Data-up "" Data-Pontaint = "Body-Containt =" Body-Toggle = "Data-to-up" Popver "PoPover" <butão> <butão "" Data-PontaiR = "Body"-toggle = "Data-up" "Data-Pontaint =" Body-Containt = "Body-toggle =" Data-toggle "PoPover" PoPover "</botão" " lacus velugue laoreet rutrum faucibus. "> a caixa pop-up inferior </button> <button type =" button "data-container =" body "data-toggle =" popover "data-posting =" direita "diva-content =" vivamus sagittis lacus augue laoreet rutrum/bull bullingt) <bustent> bull bullingt <bustent> latet lacus lacus lacus bulleet) </bull bullumt) <bustent> bull bulling e lacus lacus lacus bull/bull)/bull bullumt) <bustent> bull bouxtent) <bustent> sagitt lacus lacus laeeet rutrum rutrum <lumin> <bustent> lateret)
Em seguida, use JavaScript para ativar
<script type = "text/javascript"> $ ("#a1"). Popover (); $ ("[Data-toggle = Popover]"). Popover (); </script>Função de adição seletiva
Para considerações de desempenho, a API de atributo de dados de dicas de ferramentas e componentes pop-up é opcionalmente adicionada, o que significa que você deve inicializá-las.
Configurações adicionais são necessárias quando as caixas pop-up são usadas em grupos de botões e grupos de caixas de entrada
Quando a caixa de prompt é usada em conjunto com .btn-group ou .input-group, você precisa especificar o contêiner: a opção 'corpo' (consulte a documentação abaixo) para evitar efeitos colaterais indesejados (por exemplo, quando a caixa pop-up aparecer, os elementos da página que cooperam com ela podem se tornar mais largos ou desperdiçados).
Ao usar caixas pop-up em elementos de página proibidos, você precisa adicionar um elemento extra para embrulhá-lo
Para adicionar uma caixa pop -up a um elemento desativado ou. Disabled, embrulhe o elemento de página que precisa ser adicionado à caixa pop -up em um <div> e aplique uma caixa pop -up a este elemento <div>.
uso
Ativar caixas pop-up via JavaScript:
$ ('#exemplo'). Popover (opções)
Opções
As opções podem ser passadas através de propriedades de dados ou JavaScript. Para o atributo de dados, você precisa colocar o nome da opção após os dados, por exemplo, dados-animação = "".
método
$ (). Popover (opções)
Inicializa a caixa pop-up para um conjunto de elementos.
$ ('#elemento'). Popover ('show')
Mostra a caixa pop-up.
$ ('#elemento'). Popover ('hide')
Esconda a caixa pop-up.
$ ('#elemento'). Popover ('alterna')
Mostre ou oculte a caixa pop-up.
$ ('#elemento'). Popover ('Destroy')
Esconda e destrua a caixa pop-up.
evento
$ ('[Data-Toggle = Popover]').Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.