Pero por que hacer un menú contextual?... muchas veces nos cansamos de tener 2,3 o mas botones en cada fila del grid.. y que mejor q un menú contextual apra tener todas las opciones en el mismo sitio..!!
Como primero quiero mostrarles como va a quedar nuestro menú.
Bueno ya sabemos como debe quedar, ahora manos a la obra.
Lo primero que necesitamos son dos librerias de jquery (en el ejemplo adjunto las encuentran), las agregamos a nuestro proyecto y posteriormente las referenciamos en nuestra página... es decir, no debe quedar algo asi:
<script src="Scripts/jquery-1.4.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.contextMenu.js" type="text/javascript"></script>
y alli lo q estamos haciendo es referenciando los archivos de script a la página.
Ahora, el menú contextual no es nada más que una simple lista, la cual definimos de la siguiente manera:
<ul id="myMenu" class="contextMenu">
<li class="Opcion"><a href="#Opcion1">Opción 1</a></li>
<li class="Opcion"><a href="#Opcion2">Opción 2</a></li>
<li class="Opcion"><a href="#Opcion3">Opción 3</a></li>
</ul>
en donde definimos tantos items de lista como opciones de menú necesitemos.
Luego de tener creado el "menú", en la definición de las columnas del gridview, se debe definir una columna la cual tendrña una imagen o link o boton (lo que deseen) para que ar dar clic derecho podamos visualizar el menú), en resumen la columna quedaria:
<asp:TemplateField>
<ItemTemplate>
<div id="myDiv">
<img src="~/images/options.png" id="img" runat="server" title="Ver opciones [click derecho]" />
</div>
</ItemTemplate>
</asp:TemplateField>
Lo importante aqui es q el div que se define será el encargado de mostrar el menú contextual, por eso antes decia que se puede usar una imagen, un boton, etc, y dentro del div definimos el control, en mi caso usé una imagen de html.
Y en este punto ya hemos terminado con el diseño del gridview y del menú contextual, ahora lo que debemos hacer es con jquery crear de verdad el menú...nuestro código jquery quedaría así:
<script type="text/javascript">
$(function() {
$("#GridViewDatos div").click(function() {
$("#GridViewDatos div").enableContextMenu();
});
$(document).ready(function() {
$("#GridViewDatos div").contextMenu({
menu: 'myMenu'
}, function(action, el, pos) {
switch (action) {
case "Opcion1":
{
alert('Ha seleccionado la opción 1');
break;
}
case "Opcion2":
{
alert('Ha seleccionado la opción 2');
break;
}
case "Opcion3":
{
alert('Ha seleccionado la opción 3');
break;
}
}
});
});
});
</script>
Bueno ahora vamos a comentar...
La primera función que tenemos, lo que hace activar el menú contextual en pocas palabras, y la segunda función la cual es la más compleja, y lo que hace es al div que encuentra dentro del gridview le asigna el menú que creamos, es decir la lista que se definio, por eso el id de la lista es el mismo valor del atributo menu. Luego viene una función que tiene tres argumentos, los cuales sirven para capturar la acción o el item seleccionado del menú contextual, una manera fácil es hacer un switch al action y definir diferentes case para cada opción, los case son definidos con base al valor href de la etiqueta "a" de la lista creada, por eso en el ejemplo se ha definido 3 case (opcion1,opcion2 y opcion3).. luego se muestra un mensaje informando la opción elegida, ya depende de cada necesidad definir la funcionaldiad deseada...
Buenos espero que les sea de ayuda el ejemplo... como siemore cualquier comentario es bien recibido...
Descarga del código fuente !!
En el siguiente post el cual espero subir la otra semana, vamos a realizar un autocomplete contra una base de datos sql con jquery...
No hay comentarios:
Publicar un comentario