2009-02-22 44 views
19

Actualmente estoy investigando la sustitución de las pestañas provistas por una biblioteca de etiquetas Struts por las pestañas provistas por la interfaz de usuario de jQuery. Logré lograr que las pestañas se integraran con la aplicación existente, pero estoy luchando sobre cómo configurar la pestaña seleccionada usando un parámetro en la URL entrante, que es myurl.com/action.do?selectedTab=SecondTab.Seleccionar una pestaña jQuery usando un parámetro en la URL

Soy un recién llegado a JavaScript y jQuery; ¿Cuáles son algunos consejos sobre dónde comenzar?

+0

http://stackoverflow.com/questions/439463/ how-to-get-get-and-post-variables-with-jquery – chrisjlee

Respuesta

22

Usando http://www.mathias-bank.de/2007/04/21/jquery-plugin-geturlparam-version-2:

$(document).ready(function(){ 
    var param = $(document).getUrlParam('selectedTab'); 
    $('#menu').tabs('select', param); 
}); 

De documentation:

#select 

Firma:

.tabs('select' , [index]) 

Seleccione una pestaña, como si se hubiera hecho clic. El segundo argumento es el índice basado en cero de la pestaña que se va a seleccionar o el selector de id del panel al que está asociada la pestaña (el identificador del fragmento href de la pestaña, por ejemplo, hash, apunta a la ID del panel).

1

Tengo un enfoque ligeramente diferente que no necesariamente dependen de la incorporada en la función de selección(), pero no utilizar el plugin livequery:

http://plugins.jquery.com/project/livequery/

que es una versión más potente de la función en vivo jQuery. Puede vincular fácilmente los elementos futuros que coinciden con una consulta.

Suponga que tiene una estructura de pestañas de la siguiente manera:

<div class="Tabs"> 
<ul class="nav"> 
<li><a id="tab1">Link 1</a></li> 
<li><a id="tab2">Link 2</a></li> 
<li><a id="tab3">Link 3</a></li> 
</ul> 
.. 
.. 
</div> 

Lo ideal es que una estructura de URL como esta:

mydomain/mypage?tab=tab2 

se vuelve bastante complicado debido a que el método de selección() sólo admite entero índices, y qué sucede cuando cambias tus pestañas?

Suponiendo que pueda obtener el parámetro url en una variable, como se indica más arriba para hacer lo siguiente:

En primer lugar a localizar el elemento de destino y agrega una clase a la misma:

jQuery('a#' + param).addClass('selectMe'); 

A continuación se enlaza un livequery función al elemento:

jQuery('.ui-tabs-nav a.selectMe').livequery(function(){ 
jQuery(this).removeClass('selectMe').triggerHandler('click'); 
}); 

Esto coincide con sólo una vez que ha sido pestaña ified y prácticamente 'clic' él.

A continuación, puede llamar a su función de pestañas sin parámetros:

jQuery(".Tabs").tabs(); 

y una vez que esté completo, automáticamente se hace clic y se selecciona la pestaña!

Mejor aún, puede obligar a la creación de fichas para livequery sí:

jQuery(".Tabs").livequery(function(){ 
    jQuery(this).tabs();  
}); 

de manera que cualquier elemento que tiene con la clase'.Tabs automáticamente se convertirán en mis pestañas sobre la carga, ahora o en el futuro !

24

Jquery-UI le doy eso para (casi) gratis: use los enlaces internos. Y es mejor que usar parámetros de obtención desagradables.

Pasando http://my.site.org/mypage/#foo-tab en su navegador seleccionará automáticamente la pestaña con el contenedor que tiene id = "foo-tab".

El truco es añadir un evento para actualizar la URL cuando se selecciona una pestaña de manera que cuando vuelva a cargar que no pierda la ficha actual:

$(document).ready(function() { 
     $("#tabs").bind('tabsselect', function(event, ui) { 
      window.location.href=ui.tab; 
     }); 
    }); 
+0

sin la sintaxis correcta "/" es: http://my.site.org/mypage#foo-tab – kralco626

+2

@ kralco626: https://docs.djangoproject.com/en/dev/#the-view-layer no es una sintaxis no válida. Aclamaciones. – Stan

+1

correcto eres :) Te tomó 6 meses averiguarlo? ;) – kralco626

Cuestiones relacionadas