Seleccionar una pestaña jQuery usando un parámetro en la URL


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.

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 06 sep. 112011-09-06 01:29:20

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

El siguiente enlace de un complemento jQuery parece un posible candidato para una solución, ya que le proporciona la URL y los componentes. A continuación, sería capaz de igualar el valor, ya sea con el índice de la ficha que desee seleccionar o por ID o clase a través del selector de jQuery:

http://www.oakcitygraphics.com/jquery/jqURL/jqURLdemo.html?var1=1&var2=2&var3=3


0

supongo que es suficiente para cargar la historia y conseguir que esto funcione.

  0

esos enlaces ya no funcionan 13 nov. 132013-11-13 06:58:41


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 08 oct. 102010-10-08 14:52:36

+2

@ kralco626: https://docs.djangoproject.com/en/dev/#the-view-layer no es una sintaxis no válida. Aclamaciones. 01 dic. 112011-12-01 08:44:19

+1

correcto eres :) Te tomó 6 meses averiguarlo? ;) 08 dic. 112011-12-08 18:44:22

+4

No me llevó 6 meses olvidar cómo hacerlo! 10 dic. 112011-12-10 18:57:29