Hace unos días estaba trabajando en el blog de un cliente realizado en Wordpress, el tema que hicimos imitaba el diseño de su página oficial a fin de obtener uniformidad, sin embargo nos topamos con un pequeño problema.
Resulta que la página actual del cliente MoneyMenttor, carga los contenidos con AJAX pero no tenía un método en el cual pudieramos poner un enlace por decir a la zona de descargas, no teníamos una URL que te llevará a la página y cargara ese contenido de manera automática y por ello el blog no podría tener el mismo menú que la página oficial pues no había manera de enlazar a las diferentes páginas.
La solución fue implementar el uso del "hash de javascript" en las URLs, así cuando alguien hiciera una referencia a una URL con el hash podríamos cargar el contenido al que hace referencia.
Buscando me encontré con un tutorial acerca de como usar el hash de javascript y era justamente lo que estaba buscando:
De la línea 2 a la 13 se encuentra la función que se encargará de checar si el hash está presente, es decir; buscará que tengamos una URL de este tipo: http://midominio.com/index.php#descargas, donde #descargas es lo que la función estará buscando en la URL.
windows.location.hash será la línea encargada de obtener el hash #descargas de la URL. En la línea 7 se revisa que la variable jash no este vacia y de no estarlo se procede a hacer una búsqueda del hash en todos los enlaces y luego obtener el atributo title de este.
Se obtiene el atributo title porque los enlaces deben estar estructurados de esta manera:
Si se fijan el hash se encuentra en el atributo href del enlace y en el atributo title esta la ruta a la página que deseas descargar.
Con eso debería ser suficiente, sin embargo me encontré con un problema con el código, al menos a mi la línea siguiente no me funcionó:
var href = $("a[@href="+jash+"]").attr("title");
Así que pues tuve que buscar una manera alternativa para realizar esa búsqueda y me tope con un proyecto interesante.
Se trata del Regex Selector para jQuery, el cual introduce un nuevo selector a jQuery :regex, y si no haz adivinado de que se trata, pues es simple; se trata de un selector basado en expresiones regulares, basicamente donde solías poner una clase, un id o alguna etiqueta podrás utilizar una expresión regular.
Así pues para usar el Regex Selector para jQuery, tienes que incluir la función ya sea a través de la inclusión con un archivo externo o pegando la función donde la necesites, mi código quedó así:
Y ya con eso conseguí tener funcionando el script inicial y pude utilizar la misma estructura de los links. Quizás no sea la mejor manera para realizar esta tarea pero por el momento ha hecho el trabajo.
En este enlace pueden ver el ejemplo funcionando, verán que les abrirá en la sección de descargas y si utilizan los menús les cargará las demas secciones.
Aprovecho para recomendarles la aplicación MoneyMenttor que es un asesor financiero de bolsillo, obviamente para tu smartphone con Android, iOS o Blackberry OS.
0 comentarios:
Publicar un comentario