Este artigo apresenta o uso do módulo suspenso de Bootstrap para sua referência. O conteúdo específico é o seguinte
1. Análise do código -fonte:
DOPDOWNS.SCSS: módulo de caixa suspensa
Javascripts/bootstrap/suspenso.js: Implementar resposta da caixa suspensa
2. Funções e princípios:
Aba para baixo, a função de exibir itens selecionados não pode ser realizada por padrão.
princípio:
1. Use a classe suspensa como ponto de ancoragem e, em seguida, deixe a lista infantil o menu suspenso posicioná-lo absolutamente. Você também precisa adicionar um ponto de cliques como a configuração de data-toggle = "suspenso" para fazer a associação.
2. Precisa de apoio do plug-in js
3. Análise do código -fonte:
1. Caret: implemente o triângulo para baixo, usando fronteiras para implementar
1.1. A cor da borda é a cor da fonte por padrão
1.2. Implementação de triângulos: a borda deve ter uma largura e, em seguida, os lados adjacentes devem ter uma largura, mas a cor é transparente; Finalmente, o elemento precisa ser um elemento de bloco na linha para fazer sua altura e largura 0.
1.3. O código é o seguinte
A cópia do código é a seguinte: <span style = "borda-esquerda: 4px sólido; top de borda: 4px Solid Transparent; borda-fundo: 4px transparente sólido; altura: 0px; largura: 0px; altura da linha: normal; exibição: bloco embutido;"> </span>
2. O tipo de escuta do evento de clique está vinculado ao documento e o tipo de escuta é Data-Toggle = "Dropdown".
3. A função do plug -in escrita pelo plug -in JS e pelo construtor de classe é usada para chamar o plug -in usando o método JS;
4. O modo de dados* chama o plug-in, que é usado para injetar eventos no documento, o código é o seguinte:
$ (document) .on ('click.bs.dropdown.data-api', clearmenus) .on ('click.bs.dropdown.data-api', '.dropdown forma', function (e) {e.stopPropagation ()}. Suspenso.Prototype.toggle) .on ('keydown.bs.dropdown.data-api', alternar, suspenso.prototype.keydown) .on ('keydown.bs.dropdown.data-api', 'suspenso-menu', suspenso.prototype.keydown)O código chama diretamente o método definido por suspensão. O design maravilhoso aqui está na estrutura do plug-in, a chamada do modo de dados e a chamada do modo de plug-in JS, enquanto esses dois modos de chamada usam o mesmo código.
5. Se você ligar para o plug-in JS, você mesmo deverá chamar os métodos básicos. Somente o evento de alternância será vinculado ao criar uma instância.
var suspenso = function (elemento) {$ (elemento) .on ('click.bs.dropdown', this.toggle)}6. Clearmenu: Somente o elemento de data-toggle = "suspenso" é liberado
7. suspenso-backdrop: usado para mover o processamento de eventos sem cliques
8. KeyDown: Quando o botão suspenso receber o foco, pressione a tecla para expandir e pressione a tecla superior para encolher.
9. Target de dados e Herf = "#ID": para obter clicar, expanda a lista suspensa especificada. O padrão é expandir os nós irmãos atrás do botão:
<ul> <li> <a> ÍNDICE </a> </li> <li> <a> Zhenglu </a> </li> <li> <a data-toggle = "suspenso" href = "#name"> ferramentas de usuário </a> </li> </ul> <d id id idan = "> <ul> <li> <a>
10. Implemente o submenu pop-up e use o fundo: 100% (posicionamento do submenu pop-up de fundo) para implementá-lo
11. Exemplos de aplicação
<div id = "suspenso"> <a id = "suspenso-btn" data-target = "#suspenso"> número </a> <ul> <li> <a> 3343 </a> </li> <li> <a> 555 </a> </li>
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.