Hoje, vamos resumir a aplicação de um widget de bootstrap. Ok, não fale bobagens, vamos ao ponto.
1. Introdução ao contextoMenu
Um requisito: pedidos de linha da tabela, suporta pedidos de seleção múltipla e pode ser detectado múltiplo descontínuo. O que isso significa? Vamos dar uma olhada nas renderizações que precisam ser implementadas:
O requisito é: as linhas 6, 8 e 9 selecionadas precisam ser movidas entre a linha 2 e a linha 3. Deixando de lado os negócios, de uma perspectiva técnica, se você quiser usar a menor operação para alcançar os efeitos acima, o blogueiro pensou da função do clique com o botão direito. Se você puder clicar com o botão direito do mouse no mouse na linha 2 ou na linha 3 e mover a linha selecionada para a posição correspondente através da função do menu do clique com o botão direito, não é mais fácil? Nós apenas fazemos isso, então procuramos o componente e procuramos "Menu do clique com o botão direito do mouse". Finalmente, encontramos nosso componente contextmenu. Após um estudo cuidadoso, sentimos que o efeito estava bem, então compartilhamos aqui para referência de jardineiros que precisam usá -lo.
ContextMenu Open Source Endereço: https://github.com/sydcanem/bootstrap-contextmenu
O ContextMenu usa a demonstração: http://sydcanem.com/bootstrap-contextmenu/
2. Efeito do contexto do menu
Efeito inicial do clique com o botão direito do mouse
Aplique ao projeto
Depois de executar a função de menu
3. Exemplo de código de contexto
Na verdade, é uma coisa tão simples, vamos dar uma olhada em como usá -lo.
1. Refereça o arquivo correspondente. A chave é os dois bootstrap-contextmenu.js e prettify.js
<script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/Content/bootstrap/js/bootstrap.min.js"> </script> <script src = "contentTrap-concontextMenu/clript> src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. Preparação HTML
<div id = "context-men"> <ul role = "menu"> <li> <a tabindex = "-1" href = "#" operator = "top"> inserir acima desta linha </a> </li> <li> <a tabindex = "-1" href = "#" operator/"Bottom> <li>
3. Inicialização do JS
O código não é difícil, é apenas a lógica das operações da linha da tabela. Onde explicar:
(1) Após a execução de remover e inserir na linha da tabela, a função do menu do clique com o botão direito precisa ser reinicalizada. Caso contrário, depois de clicar com o botão direito do mouse uma vez, ele não funcionará mais.
(2) Se houver muitos itens de função de menu, você precisará usar linhas de divisão para agrupar -as. Basta adicionar <li> </li> Para fazê -lo.
<div id = "context-menu2"> <ul role = "menu"> <li> <a tabindex = "-1"> ação </a> </li> <li> <a tabindex = "-1"> outra ação </a> </li> <li> <a tabindex = "-1"> outra coisa </a> </li> <li> link </a> </li> </div>
(3) Se você deseja mover o mouse para o menu para exibir um fundo azul, precisará consultar outro arquivo CSS.
A cópia do código é a seguinte: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" Rel = "StyleSheet">
Os efeitos são os seguintes:
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 são alguns usos simples do componente Bootstrap-ContextMenu. Pode não ser perfeito, mas pode ser resolvido bem para os requisitos de menu do clique com o botão direito do mouse.