JqueryUI - Pestañas

Las pestañas son conjuntos de contenido agrupado lógicamente que nos permiten cambiar rápidamente entre ellos. Las pestañas nos permiten ahorrar espacio como si fueran acordeones. Para que las pestañas funcionen correctamente, es necesario utilizar el siguiente conjunto de marcas:

  • Las pestañas deben estar en una lista ordenada (<ol>) o desordenada (<ul>).

  • El título de cada pestaña debe estar dentro de cada <li> y envuelto por una etiqueta de anclaje (<a>) con un atributo href .

  • Cada panel de pestañas puede ser cualquier elemento válido pero debe tener una identificación , que corresponde al hash en el ancla de la pestaña asociada.

jQueryUI nos proporciona el método tabs () que cambia drásticamente la apariencia de los elementos HTML dentro de la página. Este método atraviesa (internamente en jQuery UI) el código HTML y agrega nuevas clases CSS a los elementos en cuestión (aquí, las pestañas) para darles el estilo apropiado.

Sintaxis

los tabs () El método se puede utilizar de dos formas:

$ (selector, contexto) .tabs (opciones) Método

El método de pestañas (opciones) declara que un elemento HTML y su contenido deben administrarse como pestañas. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento de las pestañas.

Sintaxis

$(selector, context).tabs (options);

Puede proporcionar una o más opciones a la vez utilizando el objeto JavaScript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:

$(selector, context).tabs({option1: value1, option2: value2..... });

La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:

No Señor. Opción y descripción
1 activo

Esta opción especifica la pestaña / panel activo actual. Por defecto su valor es0.

Option - active

Esta opción especifica la pestaña / panel activo actual. Por defecto su valor es0.

Esto puede ser de tipo:

  • Boolean- Cuando se establece en falso , colapsará todos los paneles. Esto requiere que la opción plegable sea cierta .

  • Integer -

    El índice de base cero del panel que está activo (abierto). Un valor negativo selecciona paneles que retroceden desde el último panel.

Syntax

$( ".selector" ).tabs (
   { active: 1 }
);
2 plegable

Esta opción configurada como verdadera permite deseleccionar las pestañas. Cuando se establece en falso (el valor predeterminado), hacer clic en una pestaña seleccionada no anula la selección (permanece seleccionada). Por defecto su valor esfalse.

Option - collapsible

Esta opción configurada como verdadera permite deseleccionar las pestañas. Cuando se establece en falso (el valor predeterminado), hacer clic en una pestaña seleccionada no anula la selección (permanece seleccionada). Por defecto su valor esfalse.

Syntax

$( ".selector" ).tabs (
   { collapsible: true }
);
3 discapacitado

Esta opción usa una matriz para indicar las pestañas de índice que están deshabilitadas (y por lo tanto no se pueden seleccionar). Por ejemplo, use [0, 1] para deshabilitar las dos primeras pestañas. Por defecto su valor esfalse.

Option - disabled

Esta opción usa una matriz para indicar las pestañas de índice que están deshabilitadas (y por lo tanto no se pueden seleccionar). Por ejemplo, use [0, 1] para deshabilitar las dos primeras pestañas. Por defecto su valor esfalse.

Esto puede ser de tipo:

  • Boolean - Activar o desactivar todas las pestañas.

  • Array - Una matriz que contiene los índices de base cero de las pestañas que deberían estar deshabilitadas, por ejemplo, [0, 2] deshabilitaría la primera y la tercera pestaña.

Syntax

$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
4 evento

Esta opción es un nombre del evento que permite a los usuarios seleccionar una nueva pestaña. Si, por ejemplo, esta opción está configurada como "mouseover", al pasar el mouse sobre una pestaña se seleccionará. Por defecto su valor es"click".

Option - event

Esta opción es un nombre del evento que permite a los usuarios seleccionar una nueva pestaña. Si, por ejemplo, esta opción está configurada como "mouseover", al pasar el mouse sobre una pestaña se seleccionará. Por defecto su valor es"click".

Syntax

$( ".selector" ).tabs (
   { event: "mouseover" }
);
5 heightStyle

Esta opción controla la altura del widget de pestañas y cada panel. Por defecto su valor es"content".

Option - heightStyle

Esta opción controla la altura del widget de pestañas y cada panel. Por defecto su valor es"content".

Los valores posibles son:

  • auto - Todos los paneles se colocarán a la altura del panel más alto.

  • fill - Expanda a la altura disponible según la altura principal de las pestañas.

  • content - Cada panel será tan alto como su contenido.

Syntax

$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
6 esconder

Esta opción especifica cómo animar la ocultación del panel. Por defecto su valor esnull.

Option - hide

Esta opción especifica cómo animar la ocultación del panel. Por defecto su valor esnull.

Esto puede ser de tipo:

  • Boolean- Cuando se establece en falso , no se utilizará ninguna animación y el panel se ocultará inmediatamente.

  • Number - El panel desaparecerá con la duración especificada y la suavización predeterminada.

  • String- El panel se ocultará con el efecto especificado. El valor se puede deslizar hacia arriba o plegar

  • Object- Para este tipo, se pueden proporcionar propiedades de efecto , retardo , duración y suavizado .

Syntax

$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
7 show

Esta opción especifica cómo animar la visualización del panel. Por defecto su valor esnull.

Option - show

Esta opción especifica cómo animar la visualización del panel. Por defecto su valor esnull.

Esto puede ser de tipo:

  • Boolean- Cuando se establece en falso , no se utilizará ninguna animación y el panel se mostrará inmediatamente.

  • Number - El panel desaparecerá con la duración especificada y la suavización predeterminada.

  • String- El panel se mostrará usando el efecto especificado. El valor puede deslizarse hacia arriba o plegarse .

  • Object- Para este tipo, se pueden proporcionar propiedades de efecto , retardo , duración y suavizado .

Syntax

$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad de las pestañas.

Funcionalidad predeterminada

El siguiente ejemplo muestra un ejemplo simple de funcionalidad de pestañas, sin pasar parámetros al tabs() método.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htmy ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, haga clic en las pestañas para cambiar de contenido.

Uso de heightStyle, plegable y hide

El siguiente ejemplo demuestra el uso de tres opciones (a) heightStyle (b) collapsibley (c) hide en la función de pestañas de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

Haga clic en la pestaña seleccionada para alternar su contenido cerrado / abierto. También puede ver el efecto de animación "slideUp" cuando la pestaña está cerrada.

Uso del evento

El siguiente ejemplo demuestra el uso de tres opciones event en la función de pestañas de JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:

En el ejemplo anterior, cambie las secciones abiertas / cerradas con el mouse sobre las pestañas.

$ (selector, context) .tabs ("action", params) Método

El método de pestañas ("acción", parámetros) permite una acción en las pestañas (a través de un programa JavaScript), seleccionando, deshabilitando, agregando o quitando una pestaña. La acción se especifica como una cadena en el primer argumento (por ejemplo, "agregar" para agregar una nueva pestaña). Consulte las acciones que se pueden aprobar en la siguiente tabla.

Sintaxis

$(selector, context).tabs ("action", params);;

La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:

No Señor. Acción Descripción
1 destruir

Esta acción destruye completamente la funcionalidad de las pestañas de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Action - destroy

Esta acción destruye completamente la funcionalidad de las pestañas de un elemento. Los elementos vuelven a su estado previo al inicio. Este método no acepta argumentos.

Syntax

$( ".selector" ).tabs("destroy");
2 inhabilitar

Esta acción desactiva todas las pestañas. Este método no acepta argumentos.

Action - disable

Esta acción desactiva todas las pestañas. Este método no acepta argumentos.

Syntax

$( ".selector" ).tabs("disable");
3 deshabilitar (índice)

Esta acción desactiva la pestaña especificada. Donde índice es la pestaña que se deshabilitará.

Action - disable( index )

Esta acción desactiva la pestaña especificada. Donde índice es la pestaña que se deshabilitará. Para deshabilitar más de una pestaña a la vez, configure la opción deshabilitada: $ ("#tabs") .tabs ("opción", "deshabilitado", [1, 2, 3]).

Syntax

$( ".selector" ).tabs( "disable", 1 );
4 habilitar

Esta acción activa todas las pestañas. Esta firma no acepta argumentos.

Action - enable

Esta acción activa todas las pestañas. Esta firma no acepta argumentos.

Syntax

$( ".selector" ).tabs("enable");
5 habilitar (índice)

Esta acción activa una pestaña específica. Donde índice es la pestaña que se habilitará.

Action - enable( index )

Esta acción activa una pestaña específica. Donde índice es la pestaña que se habilitará. Para habilitar más de una pestaña a la vez, restablezca la propiedad deshabilitada como: $ ("#example") .tabs ("opción", "deshabilitado", []) ;.

Syntax

$( ".selector" ).tabs( "enable", 1 );
6 cargar índice )

Esta acción fuerza una recarga de la pestaña indexada, ignorando el caché. Donde index es la pestaña para cargar.

Action - load( index )

Esta acción fuerza una recarga de la pestaña indexada, ignorando el caché. Donde index es la pestaña para cargar.

Syntax

$( ".selector" ).tabs("load", 1);
7 opción (optionName)

Esta acción obtiene el valor asociado actualmente con el optionName especificado .

Action - option( optionName )

Esta acción obtiene el valor asociado actualmente con el optionName especificado .

Syntax

var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
8 opción

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de pestañas actuales.

Action - option

Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de pestañas actuales. Este método no acepta argumentos.

Syntax

$( ".selector" ).tabs("option");
9 opción (optionName, valor)

Esta acción establece el valor de la opción de pestañas asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción.

Action - option( optionName, value )

Esta acción establece el valor de la opción de pestañas asociada con el optionName especificado . El argumento optionName es el nombre de la opción que se va a establecer y value es el valor que se va a establecer para la opción.

Syntax

$( ".selector" ).tabs( "option", "disabled", true );
10 opción (opciones)

Esta acción establece una o más opciones para las pestañas.

Action - option( options )

Esta acción establece una o más opciones para las pestañas.

Syntax

$( ".selector" ).tabs( "option", { disabled: true } );
11 actualizar

Esta acción vuelve a calcular la altura de los paneles de pestañas cuando hay pestañas que se agregaron o eliminaron directamente en el DOM. Los resultados dependen del contenido y de la opción heightStyle .

Action - refresh

Esta acción vuelve a calcular la altura de los paneles de pestañas cuando hay pestañas que se agregaron o eliminaron directamente en el DOM. Los resultados dependen del contenido y de la opción heightStyle .

Syntax

$( ".selector" ).tabs( "refresh" );
12 widget

Esta acción devuelve el elemento que actúa como widget de pestañas, anotado con el nombre de la clase ui-tabs .

Action - widget

Esta acción devuelve el elemento que actúa como widget de pestañas, anotado con el nombre de la clase ui-tabs .

Syntax

var widget = $( ".selector" ).tabs( "widget" );

Uso de la acción Desactivar ()

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:

Aquí puede ver que todas las pestañas están desactivadas.

Deshabilitar el uso de acciones (índice)

Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método disable (index) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

En el ejemplo anterior, observa que la pestaña 3 está desactivada.

Gestión de eventos en elementos de pestañas

Además del método de pestañas (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:

No Señor. Método y descripción del evento
1 activar (evento, ui)

Este evento se activa después de que se haya activado la pestaña (después de completar la animación).

Event - activate(event, ui)

Este evento se activa después de que se haya activado la pestaña (después de completar la animación). Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • newTab - La pestaña que se acaba de activar.

  • oldTab - La pestaña que se acaba de desactivar.

  • newPanel - El panel que se acaba de activar.

  • oldPanel - El panel que acaba de desactivar.

Syntax

$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
2 beforeActivate (evento, ui)

Este evento se activa antes de que se active la pestaña.

Event - beforeActivate(event, ui)

Este evento se activa antes de que se active la pestaña. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • newTab - La pestaña que está a punto de activarse.

  • oldTab - La pestaña que está a punto de desactivarse.

  • newPanel - El panel está a punto de activarse.

  • oldPanel - El panel está a punto de desactivarse.

Syntax

$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
3 beforeLoad (evento, ui)

Este evento se activa cuando una pestaña remota está a punto de cargarse, después del evento beforeActivate . Este evento se activa justo antes de que se realice la solicitud Ajax.

Event - beforeLoad(event, ui)

Este evento se activa cuando una pestaña remota está a punto de cargarse, después del evento beforeActivate . Este evento se activa justo antes de que se realice la solicitud Ajax. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • tab - La pestaña que se está cargando.

  • panel - El panel que se completará con la respuesta de Ajax.

  • jqXHR- El objeto jqXHR que solicita el contenido.

  • ajaxSettings- La configuración que utilizará jQuery.ajax para solicitar el contenido.

Syntax

$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
4 crear (evento, ui)

Este evento se activa cuando se crean pestañas.

Event - create(event, ui)

Este evento se activa cuando se crean pestañas. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • tab - La pestaña activa.

  • panel - El panel activo.

Syntax

$( ".selector" ).slider({
   create: function( event, ui ) {}
});
5 cargar (evento, ui)

Este evento se activa después de que se haya cargado una pestaña remota.

Event - load(event, ui)

Este evento se activa después de que se haya cargado una pestaña remota. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:

  • tab - La pestaña que se acaba de cargar.

  • panel - El panel que acaba de llenarse con la respuesta de Ajax.

Syntax

$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Ejemplo

El siguiente ejemplo demuestra el uso del método de evento en widgets de pestañas. Este ejemplo demuestra el uso de eventos activar y crear .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Guardemos el código anterior en un archivo HTML. tabsexample.htm y ábralo en un navegador estándar que admita javascript, debería ver el siguiente resultado:

Haga clic en las pestañas para ver un mensaje que se imprime a continuación sobre eventos específicos.