Biblioteca de JavaScript de menú contextual ligero-justContext. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: minxoma
Views Total: 2,844
Sitio oficial: Ir a la web
Actualizado: May 13, 2016
Licencia: MIT

Vista prévia

Biblioteca de JavaScript de menú contextual ligero-justContext. js

Descripción

justContext. js es una pequeña biblioteca de JavaScript que enlaza un menú contextual altamente personalizable y fácil de estilo en el evento de clic derecho.

Características

  • 2 temas incorporados: blanco y negro.
  • Animaciones de fundido de salida.
  • Posición automática para ajustarse al tamaño de la pantalla.
  • Ligero y fácil de usar.

Funcionamiento

Cargue justcontext. CSS y justcontext. js en el documento HTML.

<link href="justcontext.css" rel="stylesheet">
<script src="justcontext.js"></script>

Cree un área donde debería aparecer el menú contextual.

<div class="jctx-host jctx-id-demo">Right-click Me</div>

Agregue vínculos personalizados al menú contextual y especifique la acción mediante el atributo ' Data-Action '.

<ul class="jctx jctx-id-demo jctx-black jctx-black-shadow">


<li data-action="back">Back</li>


<li data-action="forawrd">Forward</li>


<li data-action="refresh">Refresh</li>


<hr>


<li data-action="save">Save As</li>


<li data-action="print">Print</li>


<li data-action="disable" class="disabled">Disabled Item</li>
</ul>

Cambie el tema predeterminado a ' blanco '

<ul class="jctx jctx-id-demo jctx-white jctx-white-shadow">


<li data-action="back">Back</li>


<li data-action="forawrd">Forward</li>


<li data-action="refresh">Refresh</li>


<hr>


<li data-action="save">Save As</li>


<li data-action="print">Print</li>


<li data-action="disable" class="disabled">Disabled Item</li>
</ul>

El código JavaScript para controlar las acciones personalizadas.

function handleMenuAction(evt) {

alert("Action required: " + evt);
}

Te puede interesar: