[Tips] JQuery & ASP.NET Utilizando HyperLinks y ShortCuts para navegar.
Este es un pequeño tip para navegar links de nuestro sitio mediante ShotCut del teclado, tenemos entonces el siguiente escenario:
Tres Hyperlinks (controles ASP.NET) y un Div a continuación de estos, la idea es que cuando presiones la tecla 1 se cargue en ese div la pagina1.aspx, lo mismo con la tecla 2 (pagina2.aspx) y la tecla 3 (pagina3.aspx). Obviamente esta carga de la página dentro del div debe ser asíncrona, y además se debe marcar con rojo el link que está activo.
El siguiente video indica a lo que se quiere llegar.
La Construcción – Código declarativo:
Para la construcción de los links y el div vamos a utilizar el siguiente código:
<asp:HyperLink ID="link1" runat="server" NavigateUrl="pagina1.aspx">
Pagina 1</asp:HyperLink><br />
<asp:HyperLink ID="link2" runat="server" NavigateUrl="pagina2.aspx">
Pagina 2</asp:HyperLink><br />
<asp:HyperLink ID="link3" runat="server" NavigateUrl="pagina3.aspx">
Pagina 3</asp:HyperLink><br />
<div id="contenedor"></div>
La Construcción – Código jQuery:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).keyup(function (e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
switch (key) {
case 49:
cargaPagina($('#link1'));
break;
case 50:
cargaPagina($('#link2'));
break;
case 51:
cargaPagina($('#link3'));
break;
default: ;
}
});
function cargaPagina(jPag) {
$('a[id^="link"]').css("color", "black");
$(jPag).css("color", "red");
$("#contenedor").load($(jPag).attr("href"));
}
});
</script>
Revisemos un poco el código, primero que nada, está la inclusión de la librería jQuery, luego atachamos al evento keyup del documento una función, es decir, cuando se presione una tecla mientras estoy en la página web, se va a ejecutar la función, capturamos el código de la tecla presionada, luego dependiendo de la tecla presionada, la cual determinadnos por su keycode, tecla 1->49, 2->50, 3->51, luego llamamos a la función cargaPagina con el parámetro de entrada de todo el objeto HyperLink y no solo el la propiedad href, para poder acceder posteriormente a más de estas propiedades.
La función cargaPagina recibe el objeto jpag, que es la HyperLink propiamente tal, luego dejo en color negro todos los links que cumplan que su id comience con link, luego solo el hyperlink que se recibió por parámetro es seteado su color a rojo para finalizar cargando en el contendor lo que tiene en su atributo href ( que corresponde al navigateURL del control), entonces, cargamos en el contenedor en link final (pagina1.aspx, pagina2.aspx o pagina3.aspx)
Con estas pocas líneas de código puedes manejar el teclado como shortcuts en tus páginas, otorgando comodidad al usuario al momento de seleccionar opciones mediante el teclado numérico.
Espero que te sirva!, nos vemos!
Saludos,
G