es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo utilizar bootstrap off canvas con una fila de tabla

15 Jul, 2023 Programación

Me gustaría utilizar la barra lateral fuera del lienzo en conjunto con mi tabla. Estoy utilizando una aplicación Node.js Express y un motor de vista EJS para obtener valores dinámicos para mi tabla. No estoy seguro de cómo crear la barra lateral fuera del lienzo. Supongo que tendría que usar una etiqueta de ancla con mis filas

.

<% if (terms.length > 0) { %>
<% terms.forEach(term => { %>
<tbody>
  <tr>
    <th scope="row"><%= term.id %></th>
    <td><%= term.term %></td>
    <td><%= term.definition %></td>

  </tr>
</tbody>

<% }) %>
<% } else { %>
<div class="alert alert-danger" role="alert">
  No hay términos o definiciones para mostrar
</div>

<% } %>

Teniendo en cuenta el código anterior, quiero que el usuario pueda hacer clic en el término, que es <td><%= term.term %></td>, y luego aparezca la barra lateral con el término, el id y la definición presentados de manera ordenada en el fuera del lienzo.

Cualquier ayuda sería apreciada.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para implementar una barra lateral fuera de pantalla en conjunto con su tabla, es necesario hacer lo siguiente:

    1. Crear un botón o enlace que activará la barra lateral fuera de pantalla. Esto se puede ubicar en cada fila de la tabla junto al término utilizando una etiqueta de ancla, de la siguiente manera:
    <td><a href="#" class="off-canvas-trigger" data-target="#off-canvas-sidebar"><%= term.term %></a></td>
    1. Crear la barra lateral fuera de pantalla en su código HTML, la cual se mostrará u ocultará dependiendo de si el usuario hace clic en el disparador de la barra lateral fuera de pantalla. La barra lateral podría ser construida de la siguiente manera:
    <div class="off-canvas" id="off-canvas-sidebar">
    <div class="off-canvas-inner">
        <h3><%= term.term %></h3>
        ID: <%= term.id %>
        Definición: <%= term.definition %>
    </div>
</div>
    1. Agregar un poco de código JavaScript que manejará el disparador de la barra lateral fuera de pantalla y mostrará u ocultará la barra lateral en consecuencia. Esto se puede lograr de la siguiente manera:
    <script>
    const offCanvasTriggers = document.querySelectorAll('.off-canvas-trigger');
    const offCanvasSidebar = document.getElementById('off-canvas-sidebar');
    const offCanvasInner = document.querySelector('.off-canvas-inner');

    offCanvasTriggers.forEach(trigger => {
        trigger.addEventListener('click', (event) => {
            event.preventDefault();
            offCanvasSidebar.classList.toggle('show');
            offCanvasInner.focus();
        });
    });

    offCanvasSidebar.addEventListener('keydown', (event) => {
        if (event.keyCode === 27) {
            offCanvasSidebar.classList.remove('show');
        }
    });

    offCanvasInner.addEventListener('keydown', (event) => {
        if (event.keyCode === 27) {
            offCanvasSidebar.classList.remove('show');
            offCanvasTriggers[0].focus();
        }
    });
</script>

    Este código agrega escuchadores de eventos a cada disparador de la barra lateral fuera de pantalla que activarán la clase ‘show’ en la barra lateral cuando se haga clic, mostrando u ocultando efectivamente la barra lateral. También agrega un escuchador de eventos de teclado a la barra lateral que la ocultará cuando el usuario presione la tecla de escape. Finalmente, agrega un escuchador de eventos de teclado al contenido interno de la barra lateral que ocultará la barra lateral y volverá a enfocar el disparador de la barra lateral cuando el usuario presione escape.

    Con todo esto en su lugar, el usuario debería poder hacer clic en cualquier término de la tabla y ver la barra lateral fuera de pantalla con los datos asociados al término mostrados.

Comments are closed.