Hoy, resumamos la aplicación de un widget de bootstrap. Ok, no hables tonterías, vamos al punto.
1. Introducción al contextmenu
Un requisito: el pedido de la fila de tabla, admite el orden de selección múltiple y puede ser discontinuo seleccionado múltiples. ¿Qué significa? Echemos un vistazo a las representaciones que deben implementarse:
El requisito es: las líneas seleccionadas 6, 8 y 9 deben moverse entre la fila 2 y la fila 3. Dejando de lado el negocio, desde una perspectiva técnica, si desea utilizar la menor operación para lograr los efectos anteriores, el blogger pensó en la función de clic derecho. Si puede hacer clic derecho en el mouse en la línea 2 o la línea 3, y mover la línea seleccionada a la posición correspondiente a través de la función del menú de clic derecho, ¿no es esto más fácil? Simplemente lo hacemos, por lo que buscamos el componente y buscamos "menú de bote de bote derecho". Finalmente, encontramos nuestro componente contextMenu. Después de un estudio cuidadoso, sentimos que el efecto estaba bien, por lo que lo compartimos aquí como referencia de los jardineros que necesitan usarlo.
Contextmenu Open Source Dirección: https://github.com/sydcanem/bootstrap-contextmenu
Contextmenu utiliza demostración: http://sydcanem.com/bootstrap-contextmenu/
2. ContextMenu Effect
Efecto inicial de clic derecho
Aplicar al proyecto
Después de ejecutar la función de menú
3. Ejemplo de código contextmenu
En realidad, es algo tan simple, echemos un vistazo a cómo usarlo.
1. Referencia al archivo correspondiente. La clave son las dos bootstrap-Contextmenu.js y Prettify.js
<script src = "/scripts/jQuery-1.9.1.min.js"> </script> <script src = "/content/bootstrap/js/bootstrap.min.js"> </script> <script src = "/content/boottrap-ContextMenu/bootstrap-contextmenu.js"> </script <script < src = "http://cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"> </script>
2. Preparación HTML
<div id = "context-menu"> <ul role = "menú"> <li> <a tabindex = "-1" href = "#" operator = "top"> insertar arriba de esta línea </a> </li> <li> <a tabindex = "-1" href = "#" Operator = "Bottom"> Insertar debajo de esta línea </a> </li> </ul> </Diviem>
3. Inicialización JS
El código no es difícil, es solo la lógica de las operaciones de la fila de tabla. Dónde explicar:
(1) Después de ejecutar eliminar e insertar en la fila de la tabla, la función del menú de clic derecho debe reinicializarse. De lo contrario, después de hacer clic derecho una vez, ya no funcionará.
(2) Si hay muchos elementos de función de menú, debe usar líneas divisorias para agruparlos. Simplemente agregue <li> </li> para hacerlo.
<div id = "context-Menu2"> <ul role = "menú"> <li> <a tabindex = "-1"> Acción </a> </li> <li> <a tabindex = "-1"> otra acción </a> </li> <li> <a tabindex = "-1"> algo más aquí </a> </li> </li> <a <a Tabindex enlace </a> </li> </div>
(3) Si desea mover el mouse al menú para mostrar un fondo azul, debe consultar otro archivo CSS.
La copia del código es la siguiente: <link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel = "Stylesheet">
Los efectos son los siguientes:
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Los anteriores son algunos usos simples del componente Bootstrap-ContextMenu. Puede que no sea perfecto, pero se puede resolver bien para los requisitos generales del menú de clic derecho.