ejemplos - Pestañas de IU de Jquery, cambiando a una nueva pestaña mediante programación

jquery ui widget

Question

Estoy creando una interacción de "check-out" con jQuery UI. Esto significa que el clic de un botón en la primera pestaña desactivará la primera pestaña y pasará a la siguiente. He estado revisando las publicaciones en Stack Overflow pero parece que nada de lo que intento funciona. Estoy usando jQuery UI 1.8, aquí está el código:

 <script type="text/javascript">
$(document).ready(function() {
var $tabs = $(''#tabs'').tabs({ selected: 0 });
$tabs.tabs(''option'', ''selected'', 0);
$("#tabs").tabs({disabled: [1,2]});
$("#addstudent").click(function(){
$tabs.tabs(''option'', ''selected'', 1);
$("#tabs").tabs({disabled: [0,2]});
});
$("#confirm").click(function(){
$tabs.tabs(''option'', ''selected'', 2);
$("#tabs").tabs({disabled: [0,1]});
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Student Information</a></li>
<li><a href="#fragment-2">Confirmation</a></li>
<li><a href="#fragment-3">Invoice</a></li>
</ul>
<div id="fragment-1">
<button id="addstudent" >Add Student</button>
</div>
<div id="fragment-2">
<button id="confirm" >Confirm</button>
</div>
<div id="fragment-3">
tab 3, index 2
</div>
</div>

Cuando hago clic en los botones, la siguiente pestaña se desbloquea (en que se puede seleccionar) pero no desactiva la pestaña en el índice 0 y cambia a la pestaña en el índice 1. Además, el panel correspondiente no se muestra.

Answer 1

@Aaron Sherman ya respondió tu pregunta. Aquí está el paso detallado.

Aquí está JS parte del código:

$(document) .ready(function() {
$("#tabs").tabs();
$(".btnNext").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs(''option'', ''active'')+1 );
});
$(".btnPrev").click(function () {
$( "#tabs" ).tabs( "option", "active", $("#tabs").tabs(''option'', ''active'')-1 );
});
});

Aquí están las etiquetas "a href" que se agregarán en las pestañas div

Ejemplo:

<div id="tabs-1">
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-2">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
<a class="myButton btnNext" style="color:white;">Next Tab</a>
</div>
<div id="tabs-3">
<a class="myButton btnPrev" style="color:white;">Previous Tab</a>
</div>

Answer 2

Intenta cambiar tu código a esto:

var $tabs = $(''#tabs'').tabs({ selected: 0, disabled: [1,2] });
$("#addstudent").click(function(){
$tabs.tabs(''enable'', 1).tabs(''select'', 1).tabs(''disable'', 0);
});
$("#confirm").click(function(){
$tabs.tabs(''enable'', 2).tabs(''select'', 2).tabs(''disable'', 1);
});

Ejemplo JSBin

Answer 3

Para JQUERY UI 1.9+, el método de selección está en desuso ( http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-method )

(de la documentación)

Antigua API:

// Activate the third tab (zero-based index)
$( "#tabs" ).tabs( "select", 2 );

Nueva API:

// Activate the third panel
$( "#tabs" ).tabs( "option", "active", 2 );

Answer 4

Modifiqué la solución de @Mahesh Vemuri añadiendo la posibilidad de deshabilitar los pasos siguientes al primero y luego habilitarlos después de hacer clic en el botón "SIGUIENTE":

JScode:

$(document) .ready(function() {
$("#tabs").tabs();
$("#tabs").tabs( "option", "disabled", [ 1, 2 ] );
$(".btnNext").click(function () {
$("#tabs").tabs( "enable", $("#tabs").tabs(''option'', ''active'')+1 );
$("#tabs").tabs( "option", "active", $("#tabs").tabs(''option'', ''active'')+1 );
});
$(".btnPrev").click(function () {
$("#tabs").tabs( "option", "active", $("#tabs").tabs(''option'', ''active'')-1 );
});
});

El HTML es lo mismo .

PD: Tenga en cuenta que con este código, al hacer clic en el botón NEXT se habilitará la pestaña siguiente (previamente desactivada) pero al hacer clic en el botón PREV no se deshabilitará la pestaña actual para permitir que el usuario avance y retroceda en un flujo secuencial hasta la siguiente pestaña desactivada.

Afortunadamente, si las pestañas contienen 3 pasos de un formulario, la acción del botón NEXT podría activarse solo si una Validación de formulario JS tendrá éxito.

Answer 5

$(function() {
$( "#tabs" ).tabs({ activate: function(event ,ui){
//console.log(event);
//alert( ui.newTab.index());
//alert( ui.newTab.attr(''li'',"innerHTML")[0].getElementsByTagName("a")[0].innerHTML);
alert( ui.newTab[0].getElementsByTagName("a")[0].innerHTML);
//alert( this.text);
} });
});