dsite.es
12jun/101

Controlar la posición de jQuery Context Menu

Después de mi artículo TinyTable v3 con jQuery Context Menu y Dialog UI y de los comentarios sobre el posicionamiento del menú contextual, he decidido hacer este pequeño artículo sobre cómo controlar su posición y evitar que salga fuera de TinyTable o de cualquier otro elemento del que dependa.

Sin las modificaciones en el código de jQuery ContextMenu pasa esto:

En el directorio jqueryContextMenu encontramos jquery.contextMenu.js dónde está el código JavaScript de menú contextual. Sólo es necesario añadir estas líneas para que quede así:

(e.pageX) ? x = e.pageX : x = e.clientX + d.scrollLeft;
(e.pageY) ? y = e.pageY : x = e.clientY + d.scrollTop;

//Código añadido
var menuW = menu.width();
var parentRightPosition = $(this).position().left+$(this).width();
if((x+menuW) > parentRightPosition)
{
     x -= menuW;
}
//fin código añadido
// Show the menu
$(document).unbind('click');
$(menu).css({ top: y, left: x }).fadeIn(o.inSpeed);

Gracias a este código se puede controlar la posición donde va a aparecer el menú contextual, que en nuestro caso es hacia la izquierda si iba a salir fuera del elemento padre:

¿Te gustó este artículo?

¡Suscríbete a nuestro feed RSS!

Comentarios (1) Trackbacks (0)
  1. muy bueno me sirvio de mucho….graciassssssss :D D


Leave a comment

(required)

Aún no hay trackbacks.